uni-app通过canvas将两张图片合成一张图片
如果出现在开发工具工具中可以合成并查看,在真机预览时只有打开调试面板才能看到合成的图片,极大可能线上图片的地址中包含的域名,在微信呢后台没有配置,这时要检验一下微信后台配置的downloadFile域名中有没有线上图片的域名,在开发工具中查看如下
![《uni-app通过canvas将两张图片合成一张图片》](https://ddrvcn.oss-cn-hangzhou.aliyuncs.com/2022/07/5603653919990923079.png)
如果要在开发工具中检验是哪个域名导致的,可以把如下操作关掉,就可以检测了
![《uni-app通过canvas将两张图片合成一张图片》](https://ddrvcn.oss-cn-hangzhou.aliyuncs.com/2022/07/1083569278187926767.png)
<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>