http://jsfiddle.net/KFEAC/2/

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

Я верю, что это возможно без PHP.

Кто-нибудь может помочь?

HTML:

<input type="file" id="openimg"> <input type="button" id="load" value="Load" style="width:100px;"><br/>

Width and Height (px): <input type="text" id="width" style="width:100px;">, <input type="text" id="height" style="width:100px;"><br/>

<canvas id="myimg" width="300" height="300"></canvas>

JavaScript/JQuery:

$(function(){
    $("canvas#myimg").draggable();

    var canvas = document.getElementById("myimg");
    var context = canvas.getContext("2d");

    function draw() {
        var chosenimg = $("#openimg").val();
        var w = parseInt($("#width").val());
        var h = parseInt($("#height").val());
        canvas.width = w;
        canvas.height = h;

        var img = new Image();
        img.onload = function () {
            context.drawImage(img,0,0,img.width,img.height,0,0,w,h);
        }
        img.src = $("#openimg").val();}

    $("#width").val(150);
    $("#height").val(150);

    $("#load").click(function(){ draw(); });
});