Question

我做了很多研究，而且我对这个问题感到非常难过。

代码应该将dataURL的大小调整为500x500px。但最终会出现空白图像。

代码顶部的原始dataURL变量有效。我console.log它，它在浏览器中打开它时工作。所以我认为这不是问题。

$('#img-resizer .do-it').bindFirst("click", function () {
        originalImg = $("#img-resizer img.original").cropper('getCroppedCanvas').toDataURL('image/jpeg');

        var img = document.createElement("img");
        img.src = originalImg;

        var canvas = document.createElement("canvas");
        canvas.width = 500;
        canvas.height = 500;
        var ctx = canvas.getContext("2d");
        ctx.width = 500;
        ctx.height = 500;
        ctx.drawImage(img, 0, 0, 500, 500);

        cropImg = canvas.toDataURL("image/png");

        $($("#img-resizer").attr("save-to")).attr("src", cropImg);
    });

所以最终发生的事情是，cropImg变量在我的浏览器中打开时只是一个空白图像。

正如我之前所说，我很肯定originalImg变量是有效的，因为我在console.log中它并且它在打开时有效。

感谢。

Answer 1

添加load个事件。 非常重要

删除不必要的ctx.width/height

$('#img-resizer .do-it').bindFirst("click", function() {
  originalImg = $("#img-resizer img.original").cropper('getCroppedCanvas').toDataURL('image/jpeg');

  var img = document.createElement("img");
  img.onload = function() {
    var canvas = document.createElement("canvas");
    canvas.width = 500;
    canvas.height = 500;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, 500, 500);
    var cropImg = canvas.toDataURL("image/png");
    $($("#img-resizer").attr("save-to")).attr("src", cropImg);
  }
  img.src = originalImg;
});

使用Javascript画布调整dataURL的大小不起作用

1 个答案: