Drag Out Images And Canvas

HTML

Drag out the image (or canvas) with file names.
<br />

<canvas id='mycanvas' alt='downloaded-from-canvas' draggable='true'></canvas>
<div id="blah">
</div>
<br />
<br />

JavaScript

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);  
            $("div").innerHTML(download);
            alert(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();