0

我正在使用<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 画布中是否有任何事件表明图像已被绘制？

4

2 回答 2

1

尝试使用reader.onloadend而不是 reader.onload。

顺便说一句，在一个不相关的问题上，Chrome 中有一个新的错误，它被使用 new Image() 触发了。

如果你使用备用：你很好document.createElement("img")。

最后（不是关键），由于您正在处理图像文件，您可能会查看reader.readAsDataURLFileReader 上的选项。

于 2013-06-19T19:43:06.570 回答
1

您必须在图像$.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 调用，并且在加载发生之前图像不会被绘制到画布上。

于 2013-06-19T19:43:44.463 回答