Canvas保存图片保存到本地

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

一、使用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);

}

Canvas保存图片保存到本地

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

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

秒客网

Canvas保存图片保存到本地

相关文章