Question

我可以使用图片元素调整图片大小，但似乎无法获取新网址。我找到了一个可以正常工作的功能，但事件发生的时间太晚了。

我在image元素上有一个onload事件，在该函数之后我将img.src设置为我想要应用的URL，但onload事件在离开函数后触发，然后返回。但为时已晚。我正在使用Chrome。

   function getBase64FromImageUrl(url) {
     var img = new Image();

     img.setAttribute('crossOrigin', 'anonymous');

     img.onload = function () {
        var canvas = document.createElement("canvas");
        canvas.width = this.width;
        canvas.height = this.height;

        var ctx = canvas.getContext("2d");
        ctx.drawImage(this, 0, 0);

        var dataURL = canvas.toDataURL("image/png");

        alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
     };

     img.src = url;
   }

它被称为：

           var imgURL = URL.createObjectURL(file);

           // Set img src to ObjectURL
           showPicture.src = imgURL;
           resizeImageToImg(showPicture, "200", "120");

           newURL = getBase64FromImageUrl(showPicture.src);

           showPicture.src = newURL;

在onload事件触发之前，它会转到showPicture.src = newURL，因此newURL为undefined。

我见过的所有函数都使用这个技术，使用onload事件，这样在加载完所有内容后，你就可以达到宽度和高度。

我在这里做错了吗？

谢谢，

汤姆

Answer 1

请尝试改为：

var imgURL = URL.createObjectURL(file);
// Set img src to ObjectURL
showPicture.onload = function () {
  resizeImageToImg(showPicture, "200", "120");
  newURL = getBase64FromImageUrl(showPicture.src);
  showPicture.onload = null;
  showPicture.src = newURL;
}
showPicture.src = imgURL;

调整图像大小不起作用因为事件未及时触发

1 个答案: