如何在HTML畫布中縮放imageData？

Question

我在我的網頁上有一個畫布;我在這個畫布中創建一個新的圖像數據，然後通過myImgData.data []數組修改一些像素。現在我想縮放這張圖片並將其放大。我試圖縮放上下文，但圖像仍然很小。是否有可能做到這一點？ 謝謝

Answer 1

您可以將imageData繪製到新的畫布上，縮放原始畫布，然後將新畫布繪製到原始畫布上。

像這樣的東西應該工作：

var imageData = context.getImageData(0, 0, 100, 100); 
var newCanvas = $("<canvas>") 
    .attr("width", imageData.width) 
    .attr("height", imageData.height)[0]; 

newCanvas.getContext("2d").putImageData(imageData, 0, 0); 

context.scale(1.5, 1.5); 
context.drawImage(newCanvas, 0, 0); 

這裏有一個功能演示http://jsfiddle.net/Hm2xq/2/。

Answer 2

我需要這樣做，而不需要putImageData（）引起的插值，所以我通過將圖像數據縮放到一個新的，調整大小的ImageData對象來實現。我想不出任何其他的時間我已經想到用5嵌套的for循環是一個好主意：

function scaleImageData(imageData, scale) { 
    var scaled = c.createImageData(imageData.width * scale, imageData.height * scale); 

    for(var row = 0; row < imageData.height; row++) { 
    for(var col = 0; col < imageData.width; col++) { 
     var sourcePixel = [ 
     imageData.data[(row * imageData.width + col) * 4 + 0], 
     imageData.data[(row * imageData.width + col) * 4 + 1], 
     imageData.data[(row * imageData.width + col) * 4 + 2], 
     imageData.data[(row * imageData.width + col) * 4 + 3] 
     ]; 
     for(var y = 0; y < scale; y++) { 
     var destRow = row * scale + y; 
     for(var x = 0; x < scale; x++) { 
      var destCol = col * scale + x; 
      for(var i = 0; i < 4; i++) { 
      scaled.data[(destRow * scaled.width + destCol) * 4 + i] = 
       sourcePixel[i]; 
      } 
     } 
     } 
    } 
    } 

    return scaled; 
} 

我希望至少一個其他程序員可以複製並粘貼到自己的編輯一邊喃喃自語， 「除了上帝的恩典，我去吧。」

Answer 3

您可以使用drawImage方法縮放畫布。

context = canvas.getContext('2d'); 
context.drawImage(canvas, 0, 0, 2*canvas.width, 2*canvas.height); 

這會縮放圖像以使其大小加倍並將其西北部分呈現在畫布上。縮放是通過drawImage方法的第三個和第四個參數實現的，它指定了圖像的最終寬度和高度。

見文檔在MDN https://developer.mozilla.org/en-US/docs/DOM/CanvasRenderingContext2D#drawImage%28%29

Answer 4

我知道這是一個老話題，但因爲人們喜歡會發現它很有用，我我的優化添加到rodarmor的代碼：

function scaleImageData(imageData, scale) { 
    var scaled = ctx.createImageData(imageData.width * scale, imageData.height * scale); 
    var subLine = ctx.createImageData(scale, 1).data 
    for (var row = 0; row < imageData.height; row++) { 
     for (var col = 0; col < imageData.width; col++) { 
      var sourcePixel = imageData.data.subarray(
       (row * imageData.width + col) * 4, 
       (row * imageData.width + col) * 4 + 4 
      ); 
      for (var x = 0; x < scale; x++) subLine.set(sourcePixel, x*4) 
      for (var y = 0; y < scale; y++) { 
       var destRow = row * scale + y; 
       var destCol = col * scale; 
       scaled.data.set(subLine, (destRow * scaled.width + destCol) * 4) 
      } 
     } 
    } 

    return scaled; 
} 

該代碼使用較少循環運行速度大約快30倍。例如，在100 * 100區域的100倍變焦時，該代碼需要250毫秒，而另一個則需要8秒以上。

Answer 5

@ Castrohenge的答案很有用，但正如Muhammad Umer指出的那樣，它在原來的畫布上弄亂了鼠標座標。如果你想保持執行額外縮放的能力（對於裁剪等），那麼你需要利用第二個畫布（用於縮放），然後從第二個畫布獲取圖像數據並將其放到原始畫布中。像這樣：

function scaleImageData(imageData, scale){ 
    var newCanvas = $("<canvas>") 
     .attr("width", imageData.width) 
     .attr("height", imageData.height)[0]; 

    newCanvas.getContext("2d").putImageData(imageData, 0, 0); 

    // Second canvas, for scaling 
    var scaleCanvas = $("<canvas>") 
     .attr("width", canvas.width) 
     .attr("height", canvas.height)[0]; 

    var scaleCtx = scaleCanvas.getContext("2d"); 

    scaleCtx.scale(scale, scale); 
    scaleCtx.drawImage(newCanvas, 0, 0); 

    var scaledImageData = scaleCtx.getImageData(0, 0, scaleCanvas.width, scaleCanvas.height); 

    return scaledImageData; 
}