在画布中打开本地图像

【问题标题】：Open local image in canvas在画布中打开本地图像
【发布时间】：2012-04-18 12:18:17
【问题描述】：

我正在尝试制作一个 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' />

【问题讨论】：

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

标签： javascript jquery html

【解决方案1】：

并非所有浏览器（IE 和 Opera AFAIK）都支持，但您可以使用 File API 获取数据 URI

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' />

我添加了一个fiddle here 作为示例。

【讨论】：