微信小程序实现两张图片合二为一

wxml页面:

<canvas canvas-id="myCanvas" type="2d" id="myCanvas"style="position:fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 290px;height:390px;box-sizing:border-box;" />

js部分:


that.frame(下层图片,上层图片); //必须使用png图片
frame(back,pic){const that = this;const eventChannel = that.getOpenerEventChannel()wx.createSelectorQuery().select("#myCanvas").fields({node: true,size: true}).exec(res => {const canvas = res[0].node; //获取返回节点const ctx = canvas.getContext('2d');canvas.width = 290; //设置宽高canvas.height = 390; const backImg = canvas.createImage(); //创建图片模板backImg.src = back; //设置图片路径,背景图backImg.onload = () => {//设置完毕之后,在设置上一层的图片const Img = canvas.createImage();Img.src = pic;Img.onload = () => {ctx.drawImage(Img, 0, 0, 290, 390);ctx.drawImage(backImg, 0, 0, 290, 390);wx.canvasToTempFilePath({ //api画板转化为图片canvas: canvas, success: ress => {//ress就是合二为一之后的图片wx.uploadFile({url: 图片上传地址,filePath: ress.tempFilePath,header: {imageType: false},name: 'file',success(resss) {//后端图片上传接口返回值console.log(resss);}})}})}}})}

微信小程序实现两张图片合二为一相关推荐

微信小程序实现两个数之间的运算
微信小程序实现两个数之间的运算要求:创建一个微信小程序实现两个数字的比较运算.加法运算.减法运算.乘法运算或者除法运算中的一种,效果如图(这里我写的包含了所有运算,可根据需要自行选择): app.j ...
微信小程序实现两数相加
下面为实现微信小程序两数相加的代码
微信小程序-实现两个按钮固定在页面底端且不随页面滑动（静态页面）
微信小程序的文件主要由wxml,wxss,js,json四部分组成,其实和web开发很类似,就是多了一个json文件,里面写的是一些配置文件.对页面布局的处理,主要就是通过编写wxss文件. 先看一些 ...
微信小程序比较两个数大小
微信小程序,输入两个数比较大小效果图 wxml代码  <view class="demo-box"><text c ...
微信小程序选择多张图片连同表单中其他信息一起上传并保存到MySQL数据库
多读多写多记录,多学多练多思考.----------- Banana • Banuit Gang(BUG香柚帮) 最近在做小程序的多图片上传+连同表单信息和图片服务器端地址一起保存到数据库中这项功能, ...
css卷轴动画小程序,微信小程序动画两种实现方式
开发小程序,实现动画功能,有两种实现方式,下面来看看具体怎么做: JS动画利用小程序API提供的wx.createAnimation(OBJECT)实现,API中是这样说:创建一个动画实例anima ...
微信小程序实现两个页面之间的跳转
两个简单的页面点击链接实现在两个页面之间的跳转图片和文字自行设置步骤 1:创建项目 2:删除多余无用文件和代码最新版的微信开发者工具不支持创建空白项目,我们需要把原来多余的文件和代码删除需要 ...
微信小程序 —— 保留两位小数
以下所述参考网上众多大佬略写,本人只是菜鸟一枚,记录博客主要怕自己记不住,方便以后参考,有何不足,欢迎补充- 方式方法和网上大多大佬有雷同,因为我也是参考网上各位大佬的- 两种方法一: 在 util ...
微信小程序计算两个日期之间相差几天
计算时长是几天 data() {return {form: {start: '',end: ''}, start代表开始时间,end代表结束时间 1.拿到两个日期 let start = this.f ...

微信小程序实现两张图片合二为一

微信小程序实现两张图片合二为一相关推荐

最新文章

热门文章