画布从 daturl 绘制新图像

Question

我正在使用下面的函数来使用画布调整大小和图像

var img = new Image();
img.src = reader.result;
img.onload = function() {

    var max_width = 800;
    var max_height = 800;
    var tempW = img.width;
    var tempH = img.height;
     var aspect_ratio = 1;
    if (tempW > tempH) {
        if (tempH > max_height){
          var aspect_ratio = tempH / max_height
                       }
    } else {

            if (tempW > max_width){
          var aspect_ratio = tempW / max_width
                       }


    }
    tempH = tempH / aspect_ratio;
    tempW = tempW / aspect_ratio;

    var canvas = document.createElement('canvas')
     canvas.id = "uploadedcanvas";
    canvas.width = tempW;
    canvas.height = tempH;
    var ctx = canvas.getContext("2d");
ctx.fillStyle="#FFFFFF";
    ctx.fillRect(0,0,tempW,tempH); 
    ctx.drawImage(this, 0, 0, tempW, tempH);
    var dataURL = canvas.toDataURL("image/jpeg");

   createsecondimage(dataURL,tempW,tempH,max_width,max_height,canvas)


   }

这可以调整从文件阅读器获取的图像的大小。我想使用 dataURL 作为图像源在同一个画布中创建第二个图像，但这似乎不起作用这就是我正在做的事情

    function createsecondimage(dataURL,tempW,tempH,max_width,max_height,canvas){
var copy = document.createElement('canvas');
    copy.width = max_width;
    copy.height = max_height;
    var copyctx = copy.getContext("2d");
var sx = (tempW - max_width) / 2
    var sy = (tempH - max_height) /2
   copyctx.fillStyle="#FFFFFF";
    copyctx.fillRect(0,0,max_width,max_height); 
   var imgcopy = new Image();
        imgcopy.src = dataURL;
        imgcopy.onload = function() {
      copyctx.drawImage(imgcopy, sx, sy, 800, 800,0, 0, 800, 800);
var dataURL_ = copy.toDataURL("image/jpeg");

        }

但是 datURL_ 似乎是空的。我不确定为什么会这样。理想情况下，我想使用刚刚调整大小的图像创建一个新图像。

Answer 1

您可以进行以下两项更改，它应该可以工作：

• 设置imgcpy.src在加载之后。
• 使用copyctx.drawImage(this, ...) 而不是imgcopy。

这样您可以确保在调用 onload 之前未完成图像的解码和设置，并且this 将拥有对正在解码的图像的有效引用。