Drag Out Images

by bgrins

HTML

Drag out the canvas as test.png!
<br />

<canvas id='mycanvas'></canvas>

JavaScript

/*function dragoutDelegate() {
    $(document).delegate("[data-downloadurl]", "dragstart", function(e) {
        console.log(e, this);
        e.originalEvent.dataTransfer.setData("DownloadURL",$(this).attr("data-downloadurl"));
    });
      
}
dragout();
*/

function getDownloadImage(canvas, name) {
    var src= canvas.toDataURL("image/png");  
    var dragoutData = "image/png:" + name + ".png:" + src;
    
    var img = new Image();
    img.src = src;
    $(img).attr("name", "test");
    /*img.setAttribute("draggable", "true");
    img.ondragstart = function(e) {
        e.dataTransfer.setData("DownloadURL", dragoutData);
    };*/
    
    return img;
}

function dragoutDataUriDelegate() {
    document.addEventListener("dragstart", function(e) {
        var img = e.target;

        if (img.tagName === "IMG" && img.src && img.src.indexOf("data:") === 0) {
            var name = img.getAttribute("name") || "download";
            var mime = img.src.split(";")[0].split("data:")[1];
            var ext = mime.split("/")[1] || "png";
            
            var download = mime + ":" + name + "." + ext + ":" + img.src;
            e.dataTransfer.setData("DownloadURL", download);
        }
    }, false);
}

    
function makeDownloadable(canvas, name) {
    
    canvas.setAttribute("draggable", "true");
    canvas.ondragstart = function(e) {
        var src= canvas.toDataURL("image/png");  
        var dragoutData = "image/png:" + name + ".png:" + src;
        
        e.dataTransfer.setData("DownloadURL", dragoutData);
    };
    
}
    

function drawShape(){
    // get the canvas element using the DOM
    var canvas = document.getElementById('mycanvas');


    // use getContext to use the canvas for drawing
    var ctx = canvas.getContext('2d');
    
    // Create Linear Gradients
    var lingrad = ctx.createLinearGradient(0,0,0,150);
    lingrad.addColorStop(0, '#00ABEB');
    lingrad.addColorStop(0.5, '#fff');
    lingrad.addColorStop(0.5, '#66CC00');
   ...