我正在尝试制作一个 javascript 图像颜色选择器。 是否可以在 Canvas 中打开本地镜像,而无需将其上传到服务器?
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' />
最佳答案
并非所有浏览器(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举个例子。
关于javascript - 在 Canvas 中打开本地镜像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10209227/