Javascript 在画布中打开本地图像

我正在尝试制作一个javascript图像颜色选择器。 是否可以在画布中打开本地映像，而无需将其上载到服务器

function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    var img = new Image();
    img.onload = function(){
        ctx.drawImage(img,0,0);
    }

    img.src = $('#uploadimage').val(); 
}

<input type='file' name='img' size='65' id='uploadimage' />

函数绘图（）{
var ctx=document.getElementById（'canvas'）.getContext（'2d'）；
var img=新图像（）；
img.onload=函数（）{
ctx.drawImage（img，0,0）；
}
img.src=$（'#uploadimage'）.val（）；
}

并非所有浏览器都支持（IE和Opera AFAIK），但您可以使用

函数绘图（）{
var ctx=document.getElementById（'canvas'）.getContext（'2d'））
，img=新图像（）
，f=document.getElementById（“uploadimage”）.files[0]
，url=window.url | | window.webkitURL
，src=url.createObjectURL（f）；
img.src=src；
img.onload=函数（）{
ctx.drawImage（img，0,0）；
revokeObjectURL（src）；
}
}

---

我添加了一个示例。

呃，为什么不呢？指定相对路径。您可以使用。

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d')
    , img = new Image()
    , f = document.getElementById("uploadimage").files[0]
    , url = window.URL || window.webkitURL
    , src = url.createObjectURL(f);

  img.src = src;
  img.onload = function(){
    ctx.drawImage(img,0,0);
    url.revokeObjectURL(src);
  }
}

<input type='file' name='img' size='65' id='uploadimage' />