Question

我使用<input type='file' onchange="readURL(this)"/>控件将图片上传到我的网络服务。在这里，我使用canvas来缩小图像大小。代码工作正常，但是当我们第一次尝试上传图像时，它会发送空白图像，第二次尝试发送第一张图像。这意味着我需要一个画布事件来告诉我什么时候在画布上绘制了图像

function readURL(input) {
    if (input.files && input.files[0]) {
        var canvas = document.getElementById('canvas1');
        var context = canvas.getContext('2d');
        var reader = new FileReader();
        reader.onload = function (e) {
            var imageObj = new Image();                  
            imageObj.onload = function () {
                context.drawImage(imageObj, 0, 0, 300, 275);
            };
            imageObj.src = e.target.result.toString();

            $.ajax({
                 //My Web Service call code
            });                 
        }
        reader.readAsDataURL(input.files[0]);
    }
}

所以问题是HTML5画布中是否有任何事件表明图像已被绘制？

Answer 1

尝试使用reader.onloadend代替reader.onload。

BTW在一个不相关的问题上，Chrome中有一个新的错误，它使用新的Image（）来绊倒。

如果你使用替代品，那就很好了：document.createElement("img")。

最后（不是关键），因为你正在做图像文件，你可以查看FileReader上的reader.readAsDataURL选项。

Answer 2

您必须在图片的$.ajax处理程序中移动onload来电：

var imageObj = new Image();                  
imageObj.onload = function () {
    context.drawImage(imageObj, 0, 0, 300, 275);

    $.ajax({
         //My Web Service call code
    });
};
imageObj.src = e.target.result.toString();

您编写的代码在加载图像之前进行了Ajax调用，并且在加载发生之前图像未被绘制到画布。

HTML5画布中是否有任何事件表明图像已被绘制？

2 个答案: