From Image to Download

by Blueprinter

HTML

<button onmouseup="fncDrawNewImage()">Download Image</button>
<span style='color:red'>NOTE: Large Image.  Scroll Down to see New Image<span>
    <br/>
    <br>
<img id='rawUploadImg' src="https://c63b5816896b8b38120d71a4eb99978894a5ef14.googledrive.com/host/0B52YKjuEE44ySkhPUTBsbW5sSWM/F28_003537_KPQQAPSQQQQQT0Bw_A.JPG">
<canvas id="cnvsForFormat" width="400" height="226"></canvas>
    
<div id='divTagForDownload'>initial content</div>

JavaScript

window.fncDrawNewImage = function () {
    window.img = document.getElementById("rawUploadImg");
    var cnvs = document.getElementById("cnvsForFormat");
    var ctx = cnvs.getContext("2d");
    cnvs.style.border = "1px solid #c3c3c3";
    ctx.drawImage(img, 0, 0, 400, 226);
    
    //Image is now in canvas.  Now extract img as data
    
	//Even if original image is jpeg, getting data out of the canvas will default to png if not specified
	//This creates an error in jsFiddle, but won't in regular webpage
    var canvasToDtaUrl = cnvs.toDataURL("image/jpeg");

    //alert('canvasToDtaUrl: ' + canvasToDtaUrl);
    //Now put data into an a tag
	document.getElementById('divTagForDownload').innerHTML = "just anything for test";
    //document.getElementById('divTagForDownload').innerHTML = "<a href='" + canvasToDtaUrl + "' download>This is the link</a>";
};