画布drawImage失败 [英] canvas drawImage fails
问题描述
我是Canvas的新手,如果这很简单,请原谅。如果浏览器支持使用画布,我想在上传之前调整图像大小。但是,这段代码
I'm fairly new to Canvas so please excuse if this is to simple. I want to resize images prior to upload if the browser supports this using canvas. However, this code
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;
NS_ERROR_NOT_AVAILABLE: Component is not available slice.call( docElem.childNodes, 0 )[0].nodeType;
<在我的测试浏览器Firefox中。
in my test-browser Firefox. What could be wrong?
更新
很奇怪:如果我添加一个警报(画布);作为最后一行的第三行(有时我会进行调试,我知道我可以并且应该使用console.log),该错误不会出现,但是,我的映像中仍然看不到任何东西...
Very strange: If I add a "alert(canvas);" as the 3rd last line (I do that sometimes for debugging, I know I could and should use console.log), the error does not appear, however, I still do not see anything from my image...
推荐答案
需要加载图像才能在画布上绘制:
image need to be loaded to be drawn on canvas :
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])
这篇关于画布drawImage失败的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!