使用 javascript 调整图像大小创建空白画布图像答案

【问题标题】：resize image using javascript creates blank canvas image使用 javascript 调整图像大小创建空白画布图像
【发布时间】：2020-01-21 23:18:21
【问题描述】：

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

下面是代码：

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

它适用于某些图像，但不适用于所有图像。在代码中链接了无法调整图像大小的图像之一。

为什么有些图片会失败？

【问题讨论】：

标签： javascript html image image-processing image-resizing

【解决方案1】：

下面的代码可以解决你的问题。请记住，如果它太大，这不尊重原始图像比例。它只会把它挤进 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]);
    }
}

【讨论】：

【解决方案2】：

你为什么设置oc.width/oc.height两次，中间有一个draw指令？（更改画布尺寸会清除画布，因此一旦调整大小，您通常不想触摸这些尺寸除非您想硬清除画布）

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

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

【讨论】：

我可以（jsbin.com/femocomiku/edit?html,js,output），虽然这感觉有点像你要求我为你做你的工作，因为这应该已经足够你更新代码了。至少，足以让您尝试更新您的代码，并附上一条评论“我试过了，但我无法让它工作”=)
你是对的，我应该用我之前尝试你的方法时收到的错误更新代码 - 如果这很重要，我尝试并得到了类似的东西 (i.imgur.com/yp2uQMJ.jpg) 我试着挖掘更多，但找不到故障。你上面的代码很有帮助，我会深入研究它来解决我的问题。非常感谢您在指导正确方法方面提供的巨大帮助。这种帮助对于帮助我找到正确的解决方案非常重要。谢谢