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

Question

我是 JavaScript 的新手，无法理解以下浏览器兼容性问题：

以下内容在 Chrome、IE 和 Opera（尚未尝试过 safari）中运行良好，但无法在 Firefox 中运行。我在 hi 和 low 中搜索了我调用的 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 不会立即加载数据 uri 图像，而 chrome 会...

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

Loading an image to a canvas from the local filesystem prior to upload

javascript

firefox

html5-canvas