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>//画布<canvascanvas-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  =  thisuni.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.ratioPromise.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>

uni-app通过canvas将两张图片合成一张图片相关推荐

使用CSS3中Canvas 实现两张图片合成一张图片【常用于合成二维码图片】
CSS3 Canvas 实现两张图片合成一张图片需求需求:在项目中遇到将一张固定图片和一张二维码图片合成一张新图片,并且用户能够将图片保存下载到本地. 思路:使用 CSS3 中的 Canvas 将 ...
怎么将三张图片合成一张图片？
怎么将三张图片合成一张图片?遇到这个问题,我们其实有很多方法来处理.我们首当其冲想到的是其中最常见的,可以使用我们手机的APP来处理,比如某秀秀等.但是此方法比较适合于尺寸比较小的图片进行合并,如果图 ...
chatgpt赋能Python-python2张图片合成1张图片
Python 图片合成:将两张图片组合成一张图片介绍图片合成是一种将两张或多张图片组合在一起形成一张新图片的技术.在设计和摄影领域中,图片合成是非常常见的技术,可以创造出丰富多彩的视觉效果. Py ...
怎么将几张图片合成一张图片？值得尝试的方法打开看看
怎么将几张图片合成一张图片?最近小编在后台收到很多小伙伴的私信,其中有不少人咨询图片合并的方法,今天这一期小编就给小伙伴们讲一讲如何将几张图片合成一张图片.图片合成是将多个图片合并成一个更大的图片的过 ...
unity 多张图片合成一张图片
在工作中遇到了需要把两张图片合成一张图片的需求,在网上没有查找到好的解决方法,经过查找和询问别人解决了这个问题.话不多说上干货! public Texture2D TwoToOne(Texture2D ...
php 图片合成,PHP中多张图片合成一张图片例子
今天分享一段PHP中多张图片合成一张图片的代码实现,我们可以在图片合成,水印,九宫格等需求下使用到类似这样的图片合成效果,下面一起来看看例子吧. 今天分享一段PHP中多张图片合成一张图片的代码实现,我 ...
uni-app使用canvas将两张图片合成一张图片
1.HTML部分 <view class="poster" id="canvas"><img id="avatar" /& ...
canva怎么拼接图片_js canvas实现5张图片合成一张图片
本文具体要实现的效果类似下面这张图片,主题流程大概是,页面上有类似这样布局的结构,点击中间那个紫色的按钮就会生成一张这样的图片,并且能够让用户下载图片的 1.首先我们布局页面的时候用的都是图片来布局成 ...
html多张图片合成,js+canvas多张图片合成一张图片代码
js代码 function hecheng(){ draw(function(){ document.getElementById('imgBox').innerHTML=' 合成图片成功!可以鼠标另 ...
php多张图合成一张图,PHP中多张图片合成一张图片例子
$imgs = array(); $imgs[0] = '1.jpg'; $imgs[1] = '2.jpg'; $imgs[2] = '3.jpg'; $imgs[3] = '4.jpg'; $ta ...

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

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

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

uni-app通过canvas将两张图片合成一张图片相关推荐

最新文章

热门文章