在HTML5 Canvas中放入图片和保存为图片的方法

摘要: 保存页面上图片到本地

第一种方式

如果是使用的图片的话，就会涉及到canvas的图片跨域问题，因为canvas是禁止跨域的，如果图像来自其他域，调用toDataURL()会抛出一个错误



需要添加“img.crossOrigin = "anonymous"或者“*”，这个方式还需进一步测试

需求： 将HTML5的内容保存为图片
思路： 通过Canvas绘图生成base64图片，长按即可保存到本地
问题： canvas禁止跨域、安卓微信长按不能保存base64图片、服务器拉取的图片被压缩

如果使用canvas画出来的可以实现下载保存

HTML

<canvas id="canvas1" style="border: 1px solid red"></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);
}

可以实现选择一种图片格式进行下载

--------------------------------------------------

var img = new Image;
img.onload = function () {
var cas = document.getElementById('c1');
var ctx = cas.getContext('2d');
cas.width = img.width, cas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
console.log(cas.toDataURL());
};
img.crossOrigin = "anonymous"; //关键
img.src = "http://cn.vuejs.org/images/lifecycle.png";

第二种方式

使用 a 链接，添加 download 属性，实现点击下载，但都是直接下载到浏览器的默认路径，无法实现自己手动选择路径保存

<a href="./12456.png">点击下载</a>

document.getElementsByTagName('a')[0].onclick = function (e) {
e.target.download = "12456.png"
}