[Javascript]下載Canvas圖片

宣告一個canvas

• var canvasObj = document.getElementById("canvasId");
• var context = canvasObj.getContext("2d");

對canvas的context畫一方塊

• context.fillStyle = 'rgb(200, 0, 0)';
•  context.fillRect (10, 10, 55, 50);

到本地去抓名為img.jpg的圖片

• var image = new Image();
• image.src = "img.jpg";

等到圖片讀取完成後，將圖片載到canvas上

• image.onload = function()

{
context.drawImage(image,0,0,300,300);
}
將Canvas轉成dataURI

• var type = 'png';
• var dataURL = canvasObj.toDataURL(type);

將mime-type改為image/octet-stream，強制讓瀏覽器直接download,在本地的圖片好像可以不用

• var _fixType = function(type)

{

    type = type.toLowerCase().replace(/jpg/i, 'jpeg');
    var r = type.match(/png|jpeg|bmp|gif/)[0];
    return 'image/' + r;

};

• imgData = imgData.replace(_fixType(type),'image/octet-stream');

取得系統時間,自1970/1/1開始計算毫秒,並降低長度

• var d=new Date();
• var t=d.getTime();
• t = t - 1386041000000;

建立檔名(使用者姓名+系統時間+副檔名)

• var filename = objName.value + t + '.' + type;

圖片存檔函數(給他dataURI與檔名)

• var saveFile = function(data, filename)

{

var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');

save_link.href = data;

save_link.download = filename;

var event = document.createEvent('MouseEvents');

event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

save_link.dispatchEvent(event);

};

• saveFile(dataURL,filename);

參考:
http://www.baidufe.com/item/65c055482d26ec59e27e.html
http://www.w3schools.com/jsref/jsref_gettime.asp
http://blog.xuite.net/vexed/tech/56169024-HTML5+Canvas+%E5%8F%A6%E5%AD%98%E5%9C%96%E6%AA%94