Как загрузить изображение в холст HTML5

Ответ 1

Я предполагаю, что вы имеете в виду, чтобы загрузить изображение в холст и не загружать изображение с холста.

Вероятно, было бы неплохо прочитать все материалы холста, которые у них есть здесь https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images

Но в основном то, что вы хотите сделать, это создать образ в javascript и установить image.src= в любом месте файла. В случае загрузки изображений с пользователя на их конце вам понадобится использовать API файловой системы.

Вкратце приведенный здесь краткий пример: http://jsfiddle.net/influenztial/qy7h5/

function handleImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.onload = function(){
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img,0,0);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);     
}

Ответ 2

<script>
window.onload = function() {
var canvas=document.getElementById("drawing"); // grabs the canvas element
var context=canvas.getContext("2d"); // returns the 2d context object
var img=new Image() //creates a variable for a new image

img.src= "images/vft.jpg" // specifies the location of the image
context.drawImage(img,20,20); // draws the image at the specified x and y location
}
</script>

Отметьте Демо