HTML5 Canvas Drag out from browser to desktop

Question

I'm trying to create a little image manipulation web app as a project. I'm trying to implement a Drag canvas image out of the browser to the desktop. I have done some digging and found

http://www.thecssninja.com/javascript/gmail-dragout and http://jsfiddle.net/bgrins/xgdSC/ (courtesy of 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();

This works for files which are elements of the HTML but I am unable to grab the canvas image and download it using the theory. Has anyone implemented such a feature?

I have used the canvas.toDataURL to get the image data, if I do an alert I see the encoded image data my canvas drag begins but when outside the browser the icon changes back to the stop symbol.

Looking for approaches and ideas on how to implement this.

This is what I've managed to implement and works pretty well,

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

Adapted code from cssninja and Brian Grinstead.

Answer 1

No.

For security reasons, Javascript cannot write to the local file system.

Javascript can read from the local file system with the filereader: http://www.html5rocks.com/en/tutorials/file/dndfiles/

It can even write to a sandboxed browser file (localstorage): http://www.w3schools.com/html/html5_webstorage.asp

You could even bounce it off your server and then ask the user if they want to download the image off the server.

Answer 2

For local web based applications you can use or write a local webserver or service and or utilzize for example php to add the functionality to interact with the local filesystem from javascript. Seems this is forgotten that it is not forbidden to install a webserver on the same machine like the browser :)