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

в моем тестовом браузере Firefox. Что может быть неправильным?

Update

Очень странно: если добавить "предупреждение (холст);" как 3-я последняя строка (я иногда это делаю для отладки, я знаю, что могу и должен использовать console.log), ошибка не появляется, однако я все еще ничего не вижу из своего изображения ...

Answer 1

image должны быть загружены, чтобы быть нарисованы на холсте:

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

в вашем 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]) 

Answer 2

Если это проще для вас, вы можете загрузить изображение с HTML:

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

Но лучший способ - загрузить их с помощью javascript, как сказал Юкулеле.