画布drawImage失败

Question

我对画布很陌生，所以请原谅，如果这是简单的话。如果浏览器支持使用画布，我希望在上传之前调整图像的大小。但是，这个代码

var img = document.createElement("img");
var reader = new FileReader();  
    reader.onload = function(e) {img.src = e.target.result};
var files = event.target.files;
    reader.readAsDataURL(files[0]);
var canvas = document.createElement('canvas');
    canvas.width = 100;
    canvas.height = 100;
var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

失败与

NS_ERROR_NOT_AVAILABLE:组件不可用slice.call( docElem.childNodes，0 ).nodeType；

在我的测试浏览器Firefox中。有什么不对的？

更新

非常奇怪:如果我添加了一个“警报(画布)”；作为第三行(我有时是为了调试，我知道我可以也应该使用console.log)，错误不会出现，但是，我仍然没有从我的图像中看到任何东西……

Answer 1

需要加载图像才能在画布上绘制：

var img = new Image()
img.onload = function () {
     ctx.drawImage(img, 0, 0)
}
img.src="image.png"

在你的例子中：

var img = document.createElement("img")
var reader = new FileReader()

var canvas = document.createElement('canvas')
canvas.width = 100
canvas.height = 100
var ctx = canvas.getContext("2d")

reader.onload = function(e) {
    var img = new Image()
    img.onload = function () {
        ctx.drawImage(img, 0, 0)
    }
    img.src = e.target.result
}

var files = event.target.files
reader.readAsDataURL(files[0])

Answer 2

如果对您来说更容易，您可以从HTML加载一个图像：

<img id="imagetoload" src="myimage.jpg" />
<script>
    var image = document.getElementById("imagetoload");
</script>  

但最好的方法是像Yukulélé说的那样，用javascript装载它们。