我试图创建一个小图像操作的Web应用程序作为一个项目。我试图将浏览器中的Drag画布图像实现到桌面。我已经做了一些挖掘和发现HTML5画布从浏览器拖出到桌面
http://www.thecssninja.com/javascript/gmail-dragout和http://jsfiddle.net/bgrins/xgdSC/(TheCssNinja &布赖恩格林斯蒂德提供)
function dragoutImages() {
if (!document.addEventListener) {
return;
}
document.addEventListener("dragstart", function(e) {
var element = e.target;
var src;
if (element.tagName === "IMG" && element.src.indexOf("data:") === 0) {
src = element.src;
}
if (element.tagName === "CANVAS") {
try {
src = element.toDataURL();
}
catch(e) { }
}
if (src) {
var name = element.getAttribute("alt") || "download";
var mime = src.split(";")[0].split("data:")[1];
var ext = mime.split("/")[1] || "png";
var download = mime + ":" + name + "." + ext + ":" + src;
e.dataTransfer.setData("DownloadURL", download);
}
}, false);
}
function drawCanvas(){
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
var lingrad = ctx.createLinearGradient(0,0,0,150);
lingrad.addColorStop(0, '#000');
lingrad.addColorStop(0.5, '#669');
lingrad.addColorStop(1, '#fff');
ctx.fillStyle = lingrad;
ctx.fillRect(0, 0, canvas.width, canvas.height);
var img = new Image();
img.src = canvas.toDataURL("image/png");
img.alt = 'downloaded-from-image';
$(img).appendTo("body");
}
dragoutImages();
drawCanvas();
这适用于它们的HTML元素的文件,但我无法抓住画布图像和下载它使用这个理论。有没有人实现过这样的功能?
我已经使用canvas.toDataURL来获取图像数据,如果我做了一个警报,我看到编码的图像数据我的画布拖动开始,但是当在浏览器外部时,图标变回停止符号。
寻找关于如何实现这一点的方法和想法。
这是我已经成功地实施和效果很好,从cssninja和Brian格林斯蒂德
function download(e){
downloadImageData = eCanv.getImageData(750 - (scaledWidth/2), 250 - (scaledHeight/2), scaledWidth, scaledHeight);
dlcanvas = document.createElement('canvas');
dlcanvas.setAttribute('width',scaledWidth);
dlcanvas.setAttribute('height',scaledHeight);
dlcontext = dlcanvas.getContext("2d");
dlcontext.putImageData(downloadImageData, 0,0);
url = dlcanvas.toDataURL('image/jpg');
//name = document.getElementById("filename").value;
var mime = url.split(";")[0].split("data:")[1];
var name = mime.split("/")[0];
var ext = mime.split("/")[1] || "jpg";
var download = mime + ":" + name + "." + ext + ":" + url;
e.dataTransfer.setData("DownloadURL", download);
}
改编代码。
我确实明白这是一个问题,但当然这两个例子表明它可以完成,尽管它们使用的文件类型不同于我期望使用的类型。 – aldo 2013-02-28 10:52:12
所以我*能够用Chrome重现Ryan的拖拽效果(尽管有一次当我放弃了Drop - Chrome冻结了!)我也在Firefox中使用它。我无法在IE上使用拖拽功能。 **然而**,当我用本地资源(我在画布上添加了本地.png)“弄脏”画布时,没有任何拖动工作。我想你的项目会工作,如果你做你的成像没有弄脏画布到浏览器触发安全标志的点。 – markE 2013-02-28 17:48:21
是的,它有点儿车。我在Chrome中管理了一个适用于我的实现,但就像你发现当一个下拉不完整时Chrome会冻结。作为编辑,我会把我在Chrome中做的事情放入问题中。仅供参考我没有使用整个画布我选择画布的局部图像,然后将其投影到缓冲区画布,然后使用toDataURL返回该画布数据... – aldo 2013-02-28 20:53:15