第一種方式

如果是使用的圖片的話，就會涉及到canvas的圖片跨域問題，因為canvas是禁止跨域的，如果圖像來自其他域，調用toDataURL()會拋出一個錯誤

需要添加“img.crossOrigin = "anonymous"或者“*”，這個方式還需進一步測試

需求： 將HTML5的內容保存為圖片

思路： 通過Canvas繪圖生成base64圖片，長按即可保存到本地

問題： canvas禁止跨域、安卓微信長按不能保存base64圖片、服務器拉取的圖片被壓縮

如果使用canvas畫出來的可以實現下載保存

HTML

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 屬性，實現點擊下載，但都是直接下載到瀏覽器的默認路徑，無法實現自己手動選擇路徑保存

點擊下載

document.getElementsByTagName('a')[0].onclick = function (e) {

e.target.download = "12456.png"

}

總結

以上是生活随笔為你收集整理的html canvas保存为图片,在HTML5 Canvas中放入图片和保存为图片的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。