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协议通知浏览器下载

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

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

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