调整窗口大小时如何调整 HTML5 Canvas 图像的大小

Question

我正在设计一个谷歌浏览器应用程序，它有一个用于显示图像的 html5 画布。在通过 ctx.drawImage(...) 显示图像之前，我确保图像的纵横比被保留等。当调整窗口大小时，我添加了一个事件侦听器和一个函数调用来调整画布和图像的大小，这里是相关代码sn-ps：

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

window.onload = function() {
  ctx.canvas.width  = window.innerWidth-10;
  ctx.canvas.height = window.innerHeight-30;
  window.addEventListener('resize', resizeCanvas);
};

function resizeCanvas(){
  var imgData = ctx.getImageData(0,0, ctx.canvas.width, ctx.canvas.height);
  ctx.canvas.width  = window.innerWidth-10;
  ctx.canvas.height = window.innerHeight-85;
  ctx.putImageData(imgData, 0, 0); // Put the image data back onto the canvas
}

但是这不起作用。画布似乎正在正确调整大小（因为我在其上添加了边框并且可以看到它进行了调整），但是 putImageData 没有更新图像？关于为什么会发生这种情况的任何想法？

更新：根据以下建议： 我更改了调整大小功能，尝试重新调整画布 - 但现在调整窗口大小后，图像根本不显示

function resizeCanvas(){
    //var imgData = ctx.getImageData(0,0, ctx.canvas.width, ctx.canvas.height);

  ctx.scale(ctx.canvas.width/window.innerWidth,ctx.canvas.height/window.innerHeight);
  ctx.canvas.width  = window.innerWidth-10;
  ctx.canvas.height = window.innerHeight-85;
  //ctx.putImageData(imgData, 0, 0); // DO I NEED THIS NOW?
}

谢谢！

Answer 1

我不确定这是否是最优雅的方式，但我现在的工作是完全重绘原始图像，即：

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

window.onload = function() {
  ctx.canvas.width  = window.innerWidth-10;
  ctx.canvas.height = window.innerHeight-30;
  window.addEventListener('resize', resizeCanvas);
};

function drawMainStage(img){

  var h             = img.height;
  var w             = img.width;
  var image_ratio   = h/w;
  var canvas_ratio  = Math.round(ctx.canvas.height/ctx.canvas.width);

  if (ctx.canvas.width >= ctx.canvas.height){
    // Landscape canvas, scale using height of canvas
    if (h > ctx.canvas.height){

      // Image larger in at least one dimension compared to the canvas
      var width_scaled  = Math.round((ctx.canvas.height/h)*w);
      var height_scaled = ctx.canvas.height;

      if ( w > h ){
        if ( width_scaled > ctx.canvas.width ){
          height_scaled = Math.round((ctx.canvas.width/w)*h);
          width_scaled  = ctx.canvas.width;
        }
      }
      var x1 = ctx.canvas.width/2 - width_scaled/2;
      var y1 = ctx.canvas.height/2 - height_scaled/2;
      ctx.drawImage(img, 0,0, w,h, x1,y1, width_scaled, height_scaled);
    }
    else
    {
        // Images smaller than the canvas
        var x1 = Math.round(ctx.canvas.width/2  - w/2);
        var y1 = Math.round(ctx.canvas.height/2 - h/2);
        ctx.drawImage(img, x1,y1);
    }
 }
 // else {
 //TBD}

 function resizeCanvas(){
     ctx.canvas.width  = window.innerWidth-10;
     ctx.canvas.height = window.innerHeight-85;
     drawMainStage(img);  
 }

Answer 2

您可以使用另一个画布来存储原始图像，并使用它在新尺寸的画布上重新绘制。您也可以使用图像元素（但这需要重新加载图像）。

var canvasImageName = "//www.somedomain.com/someimage.png";
var original_Image, canvas_Resize, ctx_Resize mycanvas, myctx;

$(document).ready(function()
{
     window.onresize = CanvasSizeChanged;

     original_Image = new Image;
     original_Image.src = canvasImageName;

     // canvas for image
     mycanvas = document.getElementById('mycanvas');
     myctx = canvas_Real.getContext("2d");

     // create canvas to be used for resizing
     canvas_Resize = document.createElement('canvas');
     ctx_Resize = canvas_Resize.getContext('2d');

     original_Image.onload=function()
     {
         // draw image on canvas
         myctx.drawImage(this, 0, 0);

         // also draw on background canvas
         ctx_Resize.drawImage(this, 0, 0);
     }
});

function CanvasSizeChanged()
{
    var w = mycanvas.parentNode.clientWidth;  // find parent dimensions

    var aspect = mycanvas.height/mycanvas.width;

    mycanvas.width = w;
    mycanvas.height = aspect*w;

    // redraw scaled image using your backed up canvas image
    myctx.drawImage(canvas_Resize, 0, 0, canvas_Resize.width, canvas_Resize.height, 
                                   0, 0, mycanvas.width, mycanvas.height); 
}