如何創建用於組合多個圖像的圖像生成器？

Question

更新 我正在使用HTML5 canvas和jQuery/JS的圖像生成器。 我想要完成的是以下內容。

用戶可以上傳2個或最多3個圖像（類型應該是png或jpg）到畫布上。 基因圖像應該等待1080x1920。如果hart只上傳2張圖片，則圖片爲1080x960。如果上傳3張圖片。每個圖像的大小應該是1080x640。

上傳2張或3張圖片後，用戶可以點擊下載按鈕獲取合併圖片，格式爲1080x1920px。它應該使用HTML畫布來完成這件事。

我想出了這一點：

HTML：

<canvas id="canvas"> 
     Sorry, canvas not supported 
    </canvas><!-- /canvas.offers --> 
    <input id="fileInput" type="file" /> 
<a href="#" class="generate">Generate</a> 

的jQuery：

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 

canvas.height = 400; 
canvas.width = 800; 


var img1 = loadImage('http://www.shsu.edu/dotAsset/0e829093-971c-4037-9c1b-864a7be1dbe8.png', main); 
var img2 = loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Ikea_logo.svg/266px-Ikea_logo.svg.png', main); 

var minImages = 2; 
var imagesLoaded = 0; 

function main() { 
    imagesLoaded += 1; 

    if(imagesLoaded >= minImages) { 
     ctx.clearRect(0,0,canvas.width,canvas.height); 
     ctx.save(); 

     ctx.drawImage(img1, 0, 0); 

     // ctx.translate(canvas.height/2,canvas.width/2); // move to the center of the canvas 
     // ctx.rotate(270*Math.PI/180); // rotate the canvas to the specified degrees 
     // ctx.drawImage(img2,0,canvas.height/2); 

     ctx.translate(-canvas.height/2,canvas.width/2); // move to the center of the canvas 
     ctx.rotate(90*Math.PI/180); // rotate the canvas to the specified degrees 
     ctx.drawImage(img2,-img2.width/2,-img2.width/2); 

     ctx.restore(); // restore the unrotated context 
    } 
} 


function loadImage(src, onload) { 
    var img = new Image(); 

    img.onload = onload; 
    img.src = src; 

    console.log(img); 
    return img; 
} 

上面的代碼將創建畫布上，並放置兩個圖像（即現在硬編碼在JS）到創建的畫布。它會旋轉90度，但不會位於右側角落。另外第二個圖像應該位於第一個圖像的旁邊。

希望有人可以幫助我擺脫每個圖像並排的旋轉和定位。如果有任何問題，請告訴我。

工作小提琴：https://jsfiddle.net/8ww1x4eq/2/

Answer 1

看一看更新jsFiddle，是你想要的嗎？

這裏看看關於image rotation

Updated jsFiddle，繪製多個圖像。

注意：

1. 保存腳本只是一個偷懶的辦法，以確保我已經得到了我之前保存merged_image的 外部腳本加載中...
2. 沒有synchornisation在示例腳本中，請注意 在圖像加載事件時被調用，這裏可能存在競態條件 （但我懷疑它，因爲圖像加載到客戶端的 上的內存）

function addToCanvas(img) { 
 
    // resize canvas to fit the image 
 
    // height should be the max width of the images added, since we rotate -90 degree 
 
    // width is just a sum of all images' height 
 
    canvas.height = max(lastHeight, img.width); 
 
    canvas.width = lastWidth + img.height; 
 
    
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    if (lastImage) { 
 
     ctx.drawImage(lastImage, 0, canvas.height - lastImage.height); 
 
    } 
 
    
 
    ctx.rotate(270 * Math.PI/180); // rotate the canvas to the specified degrees 
 
    ctx.drawImage(img, -canvas.height, lastWidth); 
 
    
 
    lastImage = new Image(); 
 
    lastImage.src = canvas.toDataURL(); 
 
    lastWidth += img.height; 
 
    lastHeight = canvas.height; 
 
    imagesLoaded += 1; 
 
}

PS：我已經添加了一些腳本下載合併圖像，但它會失敗。錯誤消息是：「Uncaught SecurityError：未能在'HTMLCanvasElement'上執行'toDataURL'：受污染的畫布可能不會被導出。」

我做了一個快速的Google搜索，它似乎與跨源資源有關。我認爲它不會是FileReader的問題。 我還沒有時間來測試，所以請測試它（請讓我知道:)它與FileReader一起使用！

Answer 2

您可以使用toDataURL。但這種方式，用戶必須這樣做圖片另存爲...

var img = canvas.toDataURL("image/png"); 

然後例如IMG 結果 SRC設置：

$("#result").attr("src",img); 

Answer 3

帆布已經是一個形象。

的canvas和img是可以互換的，所以沒有必要添加的canvas.toDataURL的危險步驟，其可以根據圖像源域失敗。只要將畫布視爲img並將其放入DOM即可。轉換爲jpg不會節省空間（實際上是資源耗盡的操作），因爲img需要先解碼才能顯示。

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 
canvas.height = 400; 
canvas.width = 800; 
document.body.appendChild(canvas); // add to the end of the document 

// or add it to a containing element 
var container = document.getElementById("containerID"); // or use JQuery 
if(container !== null){ 
    container.appendChild(canvas); 
}