canvas_0">uni-app通过canvas将两张图片合成一张图片

如果出现在开发工具工具中可以合成并查看，在真机预览时只有打开调试面板才能看到合成的图片，极大可能线上图片的地址中包含的域名，在微信呢后台没有配置，这时要检验一下微信后台配置的downloadFile域名中有没有线上图片的域名，在开发工具中查看如下

如果要在开发工具中检验是哪个域名导致的，可以把如下操作关掉，就可以检测了

<template>
	<view class="share">
		<button type="default" @click="exportPost"></button>
		<view id="pre_style">
			//预览合成的图片
			<image :src="page_data.post_img" mode="heightFix" class='poster'></iage>
			<u-icon name="download" @click.native.stop="download_post"></u-icon>
		</view>
		//画布
		<canvas
		   canvas-id="shareCanvas"
		    class="canvas"
		    bindlongpress="saveImg"
		    catchtouchmove="true"
			:style="{height: canvasHeight+'rpx',width:canvasWidth+'rpx'}"
		   >
		</canvas>
	</view>
</template>
<script>
export default {
	data(){
		return {
			pageData:{
				post_img:''，
				codePng:null
			},
			ctx:null,
			windowObj:{}
		}
	},
	onReady(){
		//初始化画布
		this.ctx = wx.createCanvasContext('shareCanvas')
	},
	methods:{
		//获取图片的基本信息，即将网络图片转成本地图片，
		getImageInfo(src) {
			return new Promise((resolve, reject) => {
				wx.getImageInfo({
					src,
					success: (res) => resolve(res),
					fail: (res) => reject(res)
				})
			});
		},
		exportPost(){
			let that  =  this
			uni.showLoading({
				title:'海报生成中'
			})
		//image是画布的底图，后期可以换成自己需要的
			let image ='https://cn.bing.com/images/search?view=detailV2&ccid=QLvpleW0&id=5B6A695B602912680FC5C239AE13A3EBA4F4E0F3&thid=OIP.QLvpleW0sVvyaVndJJLvPQHaEo&mediaurl=https%3a%2f%2fth.bing.com%2fth%2fid%2fR40bbe995e5b4b15bf26959dd2492ef3d%3frik%3d8%252bD0pOujE645wg%26riu%3dhttp%253a%252f%252fwww.pp3.cn%252fuploads%252f1212qxn%252f476.jpg%26ehk%3dna1tDwMwrncjRAg1A9ROG%252bkj4YZrklFwjUCYQl2c8yo%253d%26risl%3d%26pid%3dImgRaw&exph=1200&expw=1920&q=%e5%9b%be%e7%89%87&simid=607996108042012442&ck=DB9394719A910317FE77BFF4E17674F8&selectedIndex=9&qpvt=%e5%9b%be%e7%89%87&FORM=IRPRST' 
			//获取系统的基本信息，为后期的画布和底图适配宽高
			 uni.getSystemInfo({
				success: function (res) {
				that.windowObj = res 
				that.windowObj.ratio = that.windowObj.windowWidth/750 //因为小程序是用rpx单位，为了是后期合成的图片更好是适应各个手机屏幕的尺寸，这里先计算出一个比率，后面除以这个比率就可以对各个手机尺寸进行适配了
				that.canvasWidth = that.windowObj.windowWidth/that.windowObj.ratio //设置画布的宽高
				that.canvasHeight = that.windowObj.windowHeight/that.windowObj.ratio
				Promise.all([that.getImageInfo(image),that.getImageInfo(that.page_data.codePng)]).then(res=>{
		//获取底图和二维码图片的基本信息,通常前端导出的二维码是base64格式的，所以要转成图片格式的才可以获取图片的基本信息			
			
				let arr = [
					{width:res[0].width,height:res[0].height},
					{width:res[1].width/that.windowObj.pixelRatio/2,height:res[1].height/that.windowObj.pixelRatio/2}
				]
				that.ctx.drawImage(res[0].path,0 , 0,that.windowObj.windowWidth,res[0].height*that.windowObj.ratio);
				that.ctx.drawImage(res[1].path, (that.windowObj.windowWidth-arr[1].width)/2, (that.windowObj.windowHeight-arr[1].height)-30,arr[1].width,arr[1].height);
					  that.ctx.draw(false,function(){
						  wx.canvasToTempFilePath({
							  x: 0,
							  y: 0,
							  width:that.windowObj.windowWidth,
							  height:that.windowObj.windowHeight,
							  destWidth:that.windowObj.windowWidth*2,//这里乘以2是为了保证合成图片的清晰度
							  destHeight:that.windowObj.windowHeight*2,
							  canvasId: 'shareCanvas',
							  fileType:'jpg',//设置导出图片的后缀名
							  success: function (res) {
								  that.page_data.first_post_img =  res.tempFilePath 
								  //保存图片到本地
								  uni.saveImageToPhotosAlbum({
								  filePath: that.page_data.first_post_img,
								  success: function () {
								  	uni.hideLoading()
								  	uni.showToast({
								  		title:'保存成功'
								  	})
								  },
							   })
							  }
						  })   
					  });
					})     
				}
			})
		},
	},
}
</script>