0

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

I'd like to learn how to add a image from my hard drive into an HTML5 canvas. I don't wanna upload it, just load it from my hard drive dynamically from a browse window after a button is clicked.

I do believe this is possible without PHP.

Can anyone help?

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(); });
});
Michael Schwartz
  • 8,153
  • 14
  • 81
  • 144

1 Answers1

1
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    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);
        console.log(img.src);
        }
        img.src = $("#openimg").val();
    }

    $("#width").val(150);
    $("#height").val(150);
    $("#load").click(function(){ draw(); });

}); // end $(function(){});
</script>

</head>

<body>
    <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>
</body>
</html>
markE
  • 102,905
  • 11
  • 164
  • 176
  • Photo's only from the desktop show not from my pictures or any folder. idk why that is (I'm running Ubuntu 10.04) – Michael Schwartz May 06 '13 at 20:58
  • I still don't know why it works for some folders and not others, but it works none the less. Thanks again. – Michael Schwartz May 06 '13 at 21:35
  • I'm guessing since you're using Ubuntu you're also using Firefox? If so, you can tell Firefox to allow you access to local files like this: http://graphic-sim.com/running_from_files.html Here is why you need to set that flag: https://developer.mozilla.org/en-US/docs/Same-origin_policy_for_file:_URIs – markE May 06 '13 at 21:40
  • I got the same results with Chrome. Sometimes it works sometimes it doesn't. I'll take a look at those links when I have more free time. Thanks again :) – Michael Schwartz May 06 '13 at 21:47