logo标签列表

HTML5画布：从浏览器拖拽到桌面

javascripthtmlcanvashtml5-canvas
4
我正在尝试创建一个小型的图像处理Web应用程序作为项目。我正在尝试实现将画布图片从浏览器拖到桌面。我进行了一些调查并发现了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的代码进行了修改。

2个回答
0
我理解这是一个问题，但两个示例表明它是可行的，尽管它们使用的文件类型与我要使用的不同。 - aldo
所以我能够使用Chrome重现Ryan的拖动效果（尽管有一次当我放弃拖动时，Chrome冻结了！）我还在Firefox中使其工作。 我无法在IE上使拖动完全正常。 但是，当我用本地资产“弄脏”画布时（我向画布添加了一个本地.png），所有拖动都无法工作。 我想，如果您进行成像而不将画布弄得像浏览器触发安全标志一样，那么您的项目应该可以正常工作。 - markE
是的，它有一些错误。我在Chrome中实现了一个适合自己使用的版本，但就像你发现的那样，在拖放未完成时Chrome会冻结。我将我的Chrome实现作为编辑添加到问题中。FYI，我没有使用整个画布，而是选择了画布的部分图像，然后将其传递给缓冲画布，然后使用toDataURL返回该画布数据... - aldo
0

对于本地基于Web的应用程序，您可以使用或编写本地Web服务器或服务，并且可以利用例如PHP来添加与JavaScript交互的本地文件系统功能。似乎人们忘记了在同一台机器上安装Web服务器并不是被禁止的 :)

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接