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

我对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>

上传

var loadImg=函数（事件）{
var输入=event.target；
var reader=new FileReader（）；
reader.readAsDataURL（input.files[0]）；
reader.onloadend=函数（）{
var dataURL=reader.result；
var output=document.getElementById（'myCanvas'）；
var context=output.getContext（'2d'）；
var imageObj=新图像（）；
imageObj.src=dataURL；
drawImage（imageObj，1,1198198）；
}       
}

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

<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>

上传

var loadImg=函数（事件）{
var output=document.getElementById（'myCanvas'）；
var context=output.getContext（'2d'）；
var输入=event.target；
var reader=new FileReader（）；
reader.onload=函数（）{
var dataURL=reader.result；
var imageObj=新图像（）；
imageObj.src=dataURL；
imageObj.onload=函数（）{
drawImage（imageObj，1,1198198）；
}
}
reader.readAsDataURL（input.files[0]）；
}

---

加载图像时将执行

imageObj.onload

回调。firefox似乎不会立即加载数据uri图像，而chrome会加载…

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

<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>

上传

var loadImg=函数（事件）{
var output=document.getElementById（'myCanvas'）；
var context=output.getContext（'2d'）；
var输入=event.target；
var reader=new FileReader（）；
reader.onload=函数（）{
var dataURL=reader.result；
var imageObj=新图像（）；
imageObj.src=dataURL；
imageObj.onload=函数（）{
drawImage（imageObj，1,1198198）；
}
}
reader.readAsDataURL（input.files[0]）；
}

---

加载图像时将执行

imageObj.onload

回调。firefox似乎不会立即加载数据uri图像，而chrome会…

输出是什么？请更准确地说…输出是在上传到服务器之前将所选图像从文件系统绘制到页面上的画布元素，作为用户配置文件的化身。为此，您应该忽略上载按钮。输出是什么？请更准确地说…输出是在上传到服务器之前将所选图像从文件系统绘制到页面上的画布元素，作为用户配置文件的化身。为此，您应该忽略上载按钮。谢谢您的帮助。我很感激。因此，为了避免将来出现这种情况，你能告诉我区别吗？我看到你在重新绘制画布之前清除了画布，你还添加了一个新的“imageObj.onload=function（）”我不明白这是为了什么。再次感谢。重要的部分是

imageObj.onload=function（）{…}

其他只是我添加来尝试代码的东西，加载图像时会触发onload处理程序，因此呈现画布。好的，我明白了。感谢您的帮助。如果有帮助，请选择最佳答案。第一次发布，选择最佳答案。感谢您的帮助。我很感激。因此，为了避免将来出现这种情况，你能告诉我区别吗？我看到你在重新绘制画布之前清除了画布，你还添加了一个新的“imageObj.onload=function（）”我不明白这是为了什么。再次感谢。重要的部分是

imageObj.onload=function（）{…}

其他只是我添加来尝试代码的东西，加载图像时会触发onload处理程序，因此呈现画布。好的，我明白了。感谢您的帮助。如果有帮助，请选择最佳答案。第一次发布，选择最佳答案。