canvas drawImage fails

Question

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

fails with

NS_ERROR_NOT_AVAILABLE: Component is not available slice.call( docElem.childNodes, 0 )[0].nodeType;

in my test-browser Firefox. What could be wrong?

Update

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

Yukulélé · Answer 1 · 2017-02-13T19:52:24.423

4

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"

in your exemple:

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

edited Feb 13 '17 at 19:52

answered Mar 28 '13 at 10:50

Yukulélé

15,644
10
70
94

thanks, but isn't that done with the line reader.onload = function(e) {img.src = e.target.result}; – Raphael Jeger Mar 28 '13 at 10:57
no, apply a dataURL on img.src still need to wait for loading http://stackoverflow.com/questions/4776670/should-setting-an-image-src-to-data-url-be-available-immediately – Yukulélé Mar 28 '13 at 11:14
can't get it to work... could you use my code for your answer? – Raphael Jeger Mar 28 '13 at 11:25

score 1 · Answer 2 · answered Mar 28 '13 at 15:27

If it's easier to you, you can load an image from your HTML:

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

But the best way is to load them with javascript like Yukulélé said.

canvas drawImage fails

2 Answers2

Linked