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

这是因为在画布上绘制图像时尚未加载图像。你可以这样做：

<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确实......

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

1 个答案: