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,否则会跨域报错