微信小程序原生将两张图片合成一张并保存至手机中

我是一名刚毕业工作俩月的实习生，技术很菜，如果文章有写的地方，在评论区写出来，让像我一样的小白少走点弯路。.

需要将图片保存至手机，但是微信小程序官方文档提供的保存至手机api参数是一张图片，而我这是两张图片，一张背景图，一张接口返回的二维码，所以需要先将两张图片合成一张

第一步：在wxml中写canvas 画布，

  <canvas id="myCanvas" type="2d" style="border: 1px solid red;  width: 340px; height: 450px; z-index: 11;" />

第二步：在js中创建实列获取对象

wx.createSelectorQuery().select('#myCanvas') // 在 WXML 中填入的 id.fields({ node: true, size: true }).exec((res) => {// Canvas 对象const canvas = res[0].node// 渲染上下文const ctx = canvas.getContext('2d')
}

切记这段代码在onLoad的生命周期中写。创建 Canvas 实例，获取 CanvasRenderingContext2D 对象（Canvas 绘图上下文）来绘制形状、文本、图像等。

第三步：设置宽高调整图片

// Canvas 画布的实际绘制宽高const width = res[0].widthconst height = res[0].height
// 初始化画布大小const dpr = wx.getWindowInfo().pixelRatiocanvas.width = width * dprcanvas.height = height * dprctx.scale(dpr, dpr)

我的画布宽高在wxml的行内样式中写了，通过这段代码来获取

第四步：绘制内容

直接看整个代码

onLoad(options) {wx.createSelectorQuery().select('#myCanvas') // 在 WXML 中填入的 id.fields({ node: true, size: true }).exec((res) => {// Canvas 对象const canvas = res[0].node// 渲染上下文const ctx = canvas.getContext('2d')// Canvas 画布的实际绘制宽高const width = res[0].widthconst height = res[0].height// 初始化画布大小const dpr = wx.getWindowInfo().pixelRatiocanvas.width = width * dprcanvas.height = height * dprctx.scale(dpr, dpr)// 图片对象const image = canvas.createImage()//本地背景图 const imgs = canvas.createImage()//接口返回二维码图片// 图片加载完成回调image.onload = () => {// 将图片绘制到 canvas 上ctx.drawImage(image, 0, 0,340,450)ctx.drawImage(imgs,115,124,110,110)// 文本 一定要写到图片后面 要不然会被盖住ctx.font = "15px SimHei";ctx.textAlgin = "left"ctx.fillStyle = "#333333";ctx.fillText(store.data.User.info.nickname, 120, 275);ctx.font = "12px SimHei";ctx.fillStyle = "#999999";ctx.fillText(store.data.User.info.shop_info.name+' 店主', 100,300);ctx.textAlgin = "center"}// 设置图片srcimage.src = '../../../images/二维码背景.png'imgs.src = 'http://ljtest.remo.cn/uploads/qrcode/shop1.png'//没加定时器之前合成的图片是一片灰色，加了之后才有图片，测试了一下最少需要400毫秒setTimeout(()=>{wx.canvasToTempFilePath({canvas: canvas,success: res => {// 生成的图片临时文件路径this.setData({img:res.tempFilePath}) },})},1000)})},

使用 CanvasRenderingContext2D 绘制，根据业务需要在画布中绘制头像、文字、背景等。有不懂的代码直接去微信官方文档查一下，他们讲的很详细，我这里就不一一解释了

接下来该保存图片至手机了

我直接封装好了，如何在点击事件的函数中直接调用

下面是我封装的代码

// 保存图片到本地export function getAvaterInfo (url) {wx.saveImageToPhotosAlbum({filePath: url,success(res) {wx.showModal({content: '图片已保存到相册，赶紧晒一下吧~',showCancel: false,confirmText: '好的',confirmColor: '#333',success: function (res) {if (res.confirm) { }},fail: function (res) { }})},fail: function (err) {console.log(err)wx.showModal({content: '需要授权保存到相册',showCancel: false,confirmText: '好的',confirmColor: '#333',success: function (res) {if (res.confirm) {wx.openSetting({success(settingdata) {console.log(settingdata)if (settingdata.authSetting['scope.writePhotosAlbum']) {console.log('获取权限成功，给出再次点击图片保存到相册的提示。')} else {console.log('获取权限失败，给出不给权限就无法正常使用的提示')}}})}},fail: function (res) { }})}})}

然后引用、在点击事件中调用

const funct = require ('../../../utils/function')

abc(){funct.getAvaterInfo(this.data.img)},

函数名随便起的，将合成的图片直接传过去就行。

微信小程序原生将两张图片合成一张并保存至手机中相关推荐

微信小程序之实现两张图片合成一张并保存到相册
不喜欢看废话的小伙伴,可以直接看图片下面的文字和注意事项实现是没问题的. 应用场景: 项目中,每个用户都会生成自己专属的小程序码,当用户扫描这个小程序码的时候,默认这个用户就会成为你的好友,,嗯,举 ...
微信小程序原生开发实现弹窗遮罩层并且在遮罩层内使用scroll-view实现滚动内容（包括图片）
微信小程序原生开发实现弹窗遮罩层并且在遮罩层内可以滚动内容(包括图片) 效果图这里的遮罩层内容由两张图片构成底图+内部内容实现代码 wxml 使用云开发的存储,自己开发的时候换掉src即可 ...
微信小程序原生开发功能合集一：微信小程序开发介绍
一.专栏介绍本专栏主要内容为微信小程序常用功能开发过程的介绍说明,包括开发微信小程序常用组件的封装.常用功能的开发等,提供源代码.开发过程讲解视频.完整的课程等. 组件封装: 下拉选择组件. ...
微信小程序原生上传图片封装
资源参考组件免费下载地址概述微信小程序原生上传图片功能封装,具体使用根据个人情况而定. 组件自定义属性与方法描述 isShow:布尔值,默认为true true:不显示上传图标 false:显示 ...
微信小程序原生开发记录
遇到类似 ref 交互的情况所需写法 // wxml<wux-calendar id="wux-calendar" /> // js Page({data: {}, ...
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表（含Tdesign升级，切换调试基础库，设置全局样式，配置组件按需注入，添加图片素材，wx:for，生命周期 onLoad）
开始前,请先完成首页的开发,详见 [微信小程序-原生开发]实用教程05-首页(含自定义调试模式.插入图片.图文排版.底部留白.添加本地图片) https://blog.csdn.net/weixin_ ...
微信小程序原生接入腾讯云im（单聊，列表，聊天界面，自定义消息，自动回复）
微信小程序原生接入腾讯云im(单聊,列表,聊天界面,自定义消息,自动回复) 发送图片语音消息传送→ 文章目录 1.项目需求 2.参考文档 3.效果图 4.初始化集成SDK 5.登录 6.会话列表 7 ...
【微信小程序-原生开发】watch 的实现
微信小程序-原生开发本身并没有 vue 中 watch 的功能,可以通过以下方式实现定义监听器 utils\watch.js /*** 设置监听器*/ export function setWatc ...
【微信小程序-原生开发】实用教程20 - 生成海报（实战范例为生成活动海报，内含生成指定页面的小程序二维码，保存图片到手机，canvas 系列教程）
可在系列教程的基础上继续开发,也可以单独使用 [微信小程序-原生开发]系列教程效果预览代码实现点击触发生成海报在活动详情页,指定点击某图标/按钮,触发跳转到生成海报的页面 pages\comp ...
【微信小程序-原生开发】实用教程08 - 开通微信云开发，操作云数据库新增数据（含修改数据权限），初始化云服务（含获取微信云环境 id），获取云数据，滚动公告栏
开始前,请先完成圆梦宝典中宫格导航的开发,详见 [微信小程序-原生开发]实用教程 07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字) https://blog.csdn.net ...

微信小程序原生将两张图片合成一张并保存至手机中

接下来该保存图片至手机了

微信小程序原生将两张图片合成一张并保存至手机中相关推荐

最新文章

热门文章