Canvas保存图片保存到本地

使用Canvas绘图，将图片保存到本地方法

整理的代码1（推荐）：

//下载图片事件
function downloadClick() {
    //判断是否是IE
    var fileName = \'testImg.jpg\';
    if (window.navigator.msSaveBlob) {
        //支持IE10，IE11 ,Edage
        var blob = canvas.msToBlob();
        window.navigator.msSaveBlob(blob, fileName);
    } else {
        //下载图片,Goggle浏览器，火狐浏览器
        var dataImg = new Image()
        dataImg.src = canvas.toDataURL(\'image/png\')
        document.querySelector(\'#view\').appendChild(dataImg)
        var alink = document.createElement("a");
        alink.href = dataImg.src;
        alink.download = fileName;
        alink.click();
    }
}

整理代码2：

//下载图片事件,支持Edge,谷歌浏览器,火狐浏览器
//不支持IE11，IE10
function downloadClick() {
    var fileName = \'testImg.jpg\';
    var dataImg = new Image();
    var imgData = canvas.toDataURL(\'image/png\');
    dataImg.src = imgData;
    var blob = dataURLtoBlob(imgData);
    var objurl = URL.createObjectURL(blob);
    document.querySelector(\'#view\').appendChild(dataImg)
    var alink = document.createElement("a");
    alink.href = objurl;
    alink.download = fileName;
    alink.click();

    function dataURLtoBlob(dataurl) {
        var arr = dataurl.split(\',\'), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
    }
}

一、使用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" />

示例1：简单模式：

//下载图片,Goggle浏览器，火狐浏览器
const dataImg = new Image()
dataImg.src = canvas.toDataURL(\'image/png\')
document.querySelector(\'#view\').appendChild(dataImg)
const alink = document.createElement("a");
alink.href = dataImg.src;
alink.download = "testImg.jpg";
alink.click();

示例2：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);
}

二、IE 浏览器下载图片到本地

该Navigator.msSaveBlob()方法将“ File或” 保存Blob到磁盘。该方法的行为与Navigator.msSaveOrOpenBlob()禁用文件打开选项的行为相同。

非标准
此功能是非标准的，不在标准范围内。请勿在面向Web的生产站点上使用它：它不适用于每个用户。实现之间也可能存在很大的不兼容性，并且将来的行为可能会更改。

navigator.msSaveBlob(blob, defaultName);

参量

blob: 要保存的Blob。
defaultName: 保存文件时使用的文件名。

function download(content, filename) {
    // 字符内容转变成blob地址
    var blob = new Blob([content]);
    if(\'msSaveOrOpenBlob\' in navigator){
        window.navigator.msSaveOrOpenBlob(blob, filename);
        return;
    }
    var eleLink = document.createElement(\'a\');
    eleLink.download = filename;
    $(eleLink).css(\'display\', \'none\');
    eleLink.href = URL.createObjectURL(blob);
    document.body.appendChild(eleLink);
    eleLink.click();
    document.body.removeChild(eleLink);
};

三、将生成图片数据返回服务器，通过http协议通知浏览器下载

这种方式需要服务器处理，暂时没提供代码示例。

手机生成图片长按可以下载到本地。

目前针对手机浏览器使用的方案。