Question

我对Canvas很新，所以请原谅这是不是很简单。如果浏览器使用画布支持，我想在上传之前调整图像大小。但是，这段代码

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）[0] .nodeType;

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

更新

非常奇怪：如果我添加“警报（画布）;”作为第3行最后一行（我有时会调试，我知道我可以并且应该使用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加载它们。

canvas drawImage失败

2 个答案: