vue前端製作圖片，並下載（canvase）

1.引入jquery.qrcode.min.js(生成二維碼外掛)

    import qrcode from '../../util/jquery.qrcode.min.js'
    import bgimg from '../../assets/bgimg.png'; //由於圖片路徑問題，此處要import，
複製程式碼

2.在tempalte dom數裡面定義canvas

    <div>
    	<canvas id="myCanvas" width="510" height="744" v-if='download'>
    	</canvas>
    </div> 
    <div v-if='download' class='smImage'></div>
複製程式碼

3. 直接擼程式碼

downQRCode: function(scope) {
	_self.download = true; //解決canvas突然閃現的問題
	let _self = this;
	const smImage = 'https://goss.vcg.com/creative/vcg/800/version23/VCG41187144006.jpg';
	Vue.nextTick(() => {
    	var c = document.getElementById("myCanvas");
    	var cxt = c.getContext("2d");
    	var img = new Image();
    	img.onload = function() {
            var text = "http://www.baidu.com";
    		cxt.drawImage(img, 0, 0);//新增背景圖片
    		//門店名稱
    		cxt.textAlign="center";   
    		cxt.fillStyle='#dcae69';
    		cxt.font="20px Arial";  	
    		cxt.fillText(scope.row.shopName,255, 568);  
    		//客服電話
    		cxt.fillStyle='#594a53';
    		cxt.font="18px Arial";  
    		cxt.fillText('客服電話：400-1888-699',255, 720);  
    		//商戶名稱
    		cxt.fillStyle='#000';	
    		cxt.fillText(`No: ${scope.row.localMctNo}`,255, 541);   
    		$('.smImage').find('canvas').remove();
    		$('.smImage').qrcode({
    			render: "canvas",
    			width: 260,
    			height: 260,
    			typeNumber: -1,//計算模式
    			correctLevel: 2,//二維碼糾錯級別
    			text: text + scope.row.id,								
    		});
    		var canvas = $('.smImage').find('canvas')[0];
    		var image = new Image();
    		image.src = canvas.toDataURL("image/png"); //"image/png"
    		//將canvas轉化為圖片新增到大的canvas中
    		image.onload = function() {
    			cxt.drawImage(image, 122, 255);
    			//將門店圖片劃到大的canvas中
    			var smimg = new Image();
    			smimg.setAttribute('crossOrigin', 'anonymous');//設定伺服器圖片跨域								
    			//小圖片固定寬高60px
    			smimg.onload=function() {						
    				cxt.drawImage(smimg, 215, 355, 70,70); //（smimg，posX,posY,width,height,）
    				_self.downloadFile(`${scope.row.shopName}.png`, c.toDataURL("image/png"));
    				_self.download = false;
    			};
    			smimg.src= bgimg; 						
    		}										
    	};
    	img.src = bgimg;
    })
},
複製程式碼

將base64轉化為blob型別

base64Img2Blob(code) {
	var parts = code.split(';base64,');
	var contentType = parts[0].split(':')[1];
	var raw = window.atob(parts[1]);
	var rawLength = raw.length;
	var uInt8Array = new Uint8Array(rawLength);
	for(var i = 0; i < rawLength; ++i) {
    	uInt8Array[i] = raw.charCodeAt(i);
	}
	return new Blob([uInt8Array], {
    	type: contentType
	});
},
複製程式碼

下載

downloadFile(fileName, content) {
	var aLink = document.createElement('a');
	var blob = this.base64Img2Blob(content); //new Blob([content]);
	//var evt = document.createEvent("HTMLEvents");
	//evt.initEvent("click", false, false); //initEvent 不加後兩個引數在FF下會報錯
	aLink.download = fileName;
	aLink.href = URL.createObjectURL(blob);
	aLink.click()
	//aLink.dispatchEvent(evt);
}
複製程式碼

實現效果圖如下

#### 注意: 圖片採用本地的毫無問題，如果是https的伺服器圖片，伺服器必須設定圖片允許操作，即請求頭設定 croigin 為 true,否則會跨域報錯
複製程式碼