js實現保存圖片到本地、相冊

一、保存到電腦上（pc）

downloadCanvasIamge(selector, name) {
	var image = new Image()
	// 解決跨域 Canvas 污染問題
	image.setAttribute('crossOrigin', 'anonymous')
	image.onload = function () {
		var canvas = document.createElement('canvas')
		canvas.width = image.width
		canvas.height = image.height

		var context = canvas.getContext('2d')
		context.drawImage(image, 0, 0, image.width, image.height)
		var url = canvas.toDataURL('image/png')

		// 生成一個a元素
		var a = document.createElement('a')
		// 建立一個單擊事件
		var event = new MouseEvent('click')

		// 將a的download屬性設置爲咱們想要下載的圖片名稱，若name不存在則使用‘下載圖片名稱’做爲默認名稱
		a.download = name || '下載圖片名稱'
		// 將生成的URL設置爲a.href屬性
		a.href = url
		// 觸發a的單擊事件
		a.dispatchEvent(event)
	}

	image.src = document.querySelector(selector).src
},
複製代碼

參數

selector：要保存的元素的名字，img的那個標籤，不用寫到src
name：要下載的圖片的名字（可填可不填），不填默認爲 下載圖片名稱 上面代碼有判斷~

二、保存到電腦、手機端（相冊）中

saveImg (Url) {
	var blob=new Blob([''], {type:'application/octet-stream'});
	var url = URL.createObjectURL(blob);
	var a = document.createElement('a');
	a.href = Url;
	a.download = Url.replace(/(.*\/)*([^.]+.*)/ig,"$2").split("?")[0];
	var e = document.createEvent('MouseEvents');
	e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
	a.dispatchEvent(e);
	URL.revokeObjectURL(url);
},
複製代碼

參數

Url：要保存的路徑（圖片的名字），也就是 img 標籤屬性裏的 src的值
譬如： 在vue中的data裏

data () {
    return {
        saveImgpath: require('../assets/moren.png')
    }
}
而後這個 saveImgpath 就是上面方法saveImg（Url）的 Url的參~
複製代碼

---

注：這是vue的項目中用到的，其餘也適用，稍作修改就行了~~~