0

我对 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 中。有什么问题？

更新

很奇怪：如果我添加一个“alert(canvas);” 作为最后一行的第三行（我有时会这样做以进行调试，我知道我可以并且应该使用 console.log），错误没有出现，但是，我仍然没有从我的图像中看到任何东西......

4

2 回答 2

4

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

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])
于 2013-03-28T10:50:48.497 回答
0

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

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

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

于 2013-03-28T15:27:02.360 回答