Canvas保存圖片保存到本地

使用Canvas繪圖，將圖片保存到本地方法

一、使用HTML5 a標簽的download屬性，將圖片保存到本地，不需要鏈接服務器

關於download屬性：HTML5 <a>標簽download 屬性

特別說明：這種方式只支持Google和FF，IE瀏覽器還不支持。(注：目前測試手機版瀏覽器也不支持)

    <canvas id="canvas1"></canvas>
    <br /><br />
    <input type="button" value="保存png圖片" id="btn1" />
    <input type="button" value="保存jpg圖片" id="btn2" />

JS代碼：

//繪制圖片
var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "red";
ctx.font = 'italic bold 30px Helvetica ';
ctx.fillText('楷體', 50, 50);
//綁定下載事件
var btn = document.getElementById('btn1');
btn.onclick = function () {
    var type = 'png';
    download(type);
}
document.getElementById('btn2').onclick = function () {
    var type = 'jpg';
    download(type);
}
//圖片下載操作,指定圖片類型
function download(type) {
    //設置保存圖片的類型
    var imgdata = canvas.toDataURL(type);
    //將mime-type改為image/octet-stream,強制讓瀏覽器下載
    var fixtype = function (type) {
        type = type.toLocaleLowerCase().replace(/jpg/i, 'jpeg');
        var r = type.match(/png|jpeg|bmp|gif/)[0];
        return 'image/' + r;
    }
    imgdata = imgdata.replace(fixtype(type), 'image/octet-stream')
    //將圖片保存到本地
    var saveFile = function (data, filename) {
        var link = document.createElement('a');
        link.href = data;
        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);
        link.dispatchEvent(event);
    }
    var filename = new Date().toLocaleDateString() + '.' + type;
    saveFile(imgdata, filename);
}

 

 

二、將生成圖片數據返回服務器，通過http協議通知瀏覽器下載

這種方式需要服務器處理，暫時沒提供代碼示例。