javascript - 在上传之前将图像从本地文件系统加载到 Canvas

Question

我对 JavaScript 还很陌生，无法理解以下浏览器兼容性问题:

以下内容在 Chrome、IE 和 Opera(还没有尝试过 safari)中工作得很好，但在 Firefox 中却无法工作。我到处搜索了我调用的 Firefox 不支持的对象和属性，但没有找到。

无论如何，这是代码:

<input type='file' accept='image/*' onchange='loadImg(event)'><br>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;"></canvas><br>
<button type="button">Upload</button><br>

<script>
var loadImg = function(event) {
    var input = event.target;

    var reader = new FileReader();
    reader.readAsDataURL(input.files[0]);

    reader.onloadend = function() {
        var dataURL = reader.result;
        var output = document.getElementById('myCanvas');
        var context = output.getContext('2d');
        var imageObj = new Image();
        imageObj.src = dataURL;
        context.drawImage(imageObj,1,1,198,198);
    }       
}
</script>

Answer 1

这是因为当您在 Canvas 上绘制图像时，图像尚未加载。 你可以这样做:

<input type='file' accept='image/*' onchange='loadImg(event)'><br>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;"></canvas><br>
<button type="button">Upload</button><br>

<script>
var loadImg = function(event) {
    var output = document.getElementById('myCanvas');
    var context = output.getContext('2d');
    var input = event.target;
    var reader = new FileReader();
    reader.onload = function() {
        var dataURL = reader.result;
        var imageObj = new Image();
        imageObj.src = dataURL;
        imageObj.onload=function(){
            context.drawImage(imageObj,1,1,198,198);
        }
    }
    reader.readAsDataURL(input.files[0]);


}
</script>

imageObj.onload 回调将在图像加载时执行。看来 Firefox 不会立即加载 data-uri 图像，而 chrome 会...