HTML5 Canvas 从浏览器拖出到桌面答案

【问题标题】：HTML5 Canvas Drag out from browser to desktopHTML5 Canvas 从浏览器拖出到桌面
【发布时间】：2013-02-13 23:31:17
【问题描述】：

我正在尝试创建一个小的图像处理网络应用程序作为一个项目。我正在尝试将画布图像从浏览器拖到桌面。我做了一些挖掘并找到了

http://www.thecssninja.com/javascript/gmail-dragout 和 http://jsfiddle.net/bgrins/xgdSC/（由 TheCssNinja 和 Brian Grinstead 提供）

    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 来获取图像数据，如果我发出警报，我会看到编码的图像数据，我的画布开始拖动，但是当在浏览器之外时，图标变回停止符号。

寻找有关如何实现这一点的方法和想法。

这是我设法实现的，并且效果很好，

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);        
}

改编自 cssninja 和 Brian Grinstead 的代码。

【问题讨论】：

标签： javascript html canvas html5-canvas

【解决方案1】：

没有。

出于安全原因，Javascript不能写入本地文件系统。

Javascript 可以使用文件读取器从本地文件系统读取：http://www.html5rocks.com/en/tutorials/file/dndfiles/

它甚至可以写入沙盒浏览器文件（本地存储）：http://www.w3schools.com/html/html5_webstorage.asp

您甚至可以将其从服务器退回，然后询问用户是否要从服务器下载图像。

【讨论】：

我确实明白这是一个问题，但肯定有 2 个示例表明，尽管它们使用的文件类型与我希望使用的不同？
所以我能够使用 Chrome 重现 Ryan 的拖动结果（尽管有一次我放弃了拖放——Chrome 冻结了！）我也让它在 Firefox 中工作.我根本无法在 IE 上工作。但是，当我用本地资产“弄脏”画布时（我在画布上添加了一个本地 .png），所有拖动都不起作用。我想如果你在不把画布弄脏到浏览器触发安全标志的地步进行成像的话，你的项目会起作用。
是的，它有点马车。我在 Chrome 中管理了一个适用于我的实现，但就像你发现 Chrome 在放置不完整时冻结一样。我会将我在 chrome 中所做的事情作为编辑放入问题中。仅供参考，我没有使用整个画布，而是选择了画布的部分图像，然后将其扔到缓冲区画布，然后使用 toDataURL 返回该画布数据...

【解决方案2】：

对于基于本地 Web 的应用程序，您可以使用或编写本地 Web 服务器或服务，或利用例如 php 添加功能以通过 javascript 与本地文件系统进行交互。似乎忘记了，不禁止像浏览器一样在同一台机器上安装网络服务器:)

【讨论】：