使用 javascript 调整图像大小创建空白 canvas 图像

Question

我正在使用 javascript 和 canvas 调整图像大小，但一些调整后的图像是黑色背景。

代码如下：

function resizeImage(input, maxWidth, maxHeight, callback) {
  var data;
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function (event) {
        var img = new Image();
        img.onload = function () {
          var oc = document.createElement('canvas'), octx = oc.getContext('2d');
          oc.width = img.width;
          oc.height = img.height;
          octx.drawImage(img, 0, 0);
          oc.width = maxWidth;
          oc.height = maxHeight;
          if (img.width > maxWidth) {
            octx.drawImage(oc, 0, 0, oc.width, oc.height);
            octx.drawImage(img, 0, 0, oc.width, oc.height);
            data = oc.toDataURL("image/jpeg", 0.7);
          } else {
            data = oc.toDataURL("image/jpeg", 0.7);
          }
          callback(data);
        };
        img.src = event.target.result;
      };
      reader.readAsDataURL(input.files[0]);
    }
}

function run() {
    resizeImage(
      document.getElementById('image'), 
      600, 600, 
      function(dat) { 
    document.getElementById('preview').src= dat; 
      }
    )
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Resize</title>
</head>
<body>
  <p>Use this image to upload - <a href="https://i.imgur.com/ckNzNNR.jpg">https://i.imgur.com/ckNzNNR.jpg</a> to see the bug.</p>

  <input id="image" type="file" onchange="run()">
  <img id="preview" src="">
  
  <p><b>It creates blank image, works fine for some of the image </b></p>
  
</body>
</html>

这里是live JS bin，如果你想测试live - https://jsbin.com/kivojewuti/edit?html,js,output

它适用于部分图像，但不适用于所有图像。在代码中链接了调整图像大小不起作用的图像之一。

为什么有些图片会失败？

Answer 1

为什么要设置 oc.width/oc.height 两次，中间有一条绘制指令？（更改 canvas 尺寸会清除 canvas，因此一旦调整大小，您通常不想触摸这些尺寸除非您想要硬清除 canvas)

相反，加载图像，然后在其 onload 处理程序中：

首先检查要使用的尺寸（img width/height 或根据 maxw/maxh 缩小），然后
创建您的 canvas，设置其 width/height，然后获取 2d 上下文。那么
使用 ctx.drawImage(0,0,cvs.width,cvs.height)，现在可以根据需要自动调整大小，最后
获取（可能调整大小的）图像作为数据 url。

Answer 2

下面的代码将助您一臂之力。请记住，如果原始图像比例太大，则不符合原始图像比例。它只会把它挤在 600x600 的盒子里。

function resizeImage(input, maxWidth, maxHeight, callback) {
    var data;
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (event) {
            var img = new Image();
            img.onload = function () {
                var oc = document.createElement('canvas'), octx = oc.getContext('2d');

                if (img.width > maxWidth || img.height > maxHeight) {
                    // Image is too big -> resize
                    oc.width = maxWidth;
                    oc.height = maxHeight;
                } else {
                    // Image will fit - use original sizes
                    oc.width = img.width;
                    oc.height = img.height;
                }

                octx.drawImage(img, 0, 0, oc.width, oc.height);
                data = oc.toDataURL("image/jpeg", 0.7);

                callback(data);
            };
            img.src = event.target.result;
        };
        reader.readAsDataURL(input.files[0]);
    }
}

使用 javascript 调整图像大小创建空白 canvas 图像

resize image using javascript creates blank canvas image

javascript

html

image

image-processing

image-resizing