微信小程序生成图片分享朋友圈
2020/3/12 11:01:44
本文主要是介绍微信小程序生成图片分享朋友圈,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一、实现逻辑
- 使用wx.downloadFile()获取图片的路径(wx.getImageInfo这个api也可以获取图片路径)
- 使用canvas的api画出文字与图片
- 用canvasToImage()生成用canvas画出来的图片
- 用wx.saveImageToPhotosAlbum保存图片到手机
二、期间遇到的问题
- canvas无法使用rpx作为单位做适配,所以要动态获取手机屏幕的宽度
- 把整个生成图片的功能封装成自定义组件时wx.canvasToTempFilePath()与wx.createCanvasContext()这两个api需要传去第二个this参数,不然获取不到canvasId
- 使用wx.canvasToTempFilePath()生成图片的画质很模糊,只需要把destWidth,destHeight这两个参数的值是生成图片的宽高的4倍即可
三、代码实现
- wxml代码
<view class="canvas-box"> <canvas class="canvas" canvas-id="shareImg" style="width: {{width}}px; height: {{height}}px;z-index: 100;"> </canvas> </view> <view class="btn-box"> <view bindtap="saveImageToLocal"> <view>保存海报</view> </view> </view> 复制代码
- 动态获取屏幕宽度,获取自适应单位(ui图以ipone6为标准)
//获取屏幕宽度,获取自适应单位 wx.getSystemInfo({ success: function(res) { var num = (res.windowWidth/375).toFixed(2) this.setData({rpx: num}) } }) var rpx = _this.data.rpx //给宽高赋值 this.setData({height: rpx*350}) this.setData({width: rpx*250}) this.setData({leftWidth: rpx*60}) this.setData({topHeight: rpx*110}) 复制代码
- 下载图片
//获取二维码图片 wx.downloadFile({ url: url, success (res) { _this.setData({tempFilePath: res.tempFilePath}) }, fail (err) { console.log(err,'err') } }) 复制代码
4.用canvas画图
//在自定义组件中使用canvas,获取wx.createCanvasContext第二个参数必须传入this,不然获取不到 const ctx = wx.createCanvasContext('shareImg',_this); //绘制一个白色矩形 ctx.setFillStyle('#fff'); ctx.fillRect(0, 0, _this.data.width, _this.data.height); //绘制背景图 ctx.drawImage( _this.data.wxBgImg, //背景图 0, //目标图片在画布中x坐标 0, //目标图片在画布中y坐标 _this.data.width, //目标图片宽 250*rpx //目标图片高 ); // 绘制想要的文字 ctx.setFontSize(16); ctx.setFillStyle('black'); ctx.fillText('请扫码购买', 70*rpx, 300*rpx); ctx.stroke(); // 画(前面都是准备,这才是画的那一步) ctx.draw(false,_this.canvasToImage()); 复制代码
- 生成canvas画出来的图片
//画二维码 canvasToImage: function () { var _this = this; base.hideLoading() //这里必须加一个定时器,不然会生成图片失败 setTimeout(() => { wx.canvasToTempFilePath({ canvasId: 'shareImg', width: _this.data.width, height: _this.data.height, destWidth: _this.data.width*4,//输出的图片的宽度是画布区域的宽度的4倍 destHeight: _this.data.height*4,//输出的图片的高度是画布区域的高度的4倍 success: res => { console.log(res,'画二维码====成功') _this.setData({ resultImage: res.tempFilePath }); }, fail: (err) => { console.log(err,"err==========") wx.showToast({ title: '图片生成失败', icon: 'success', duration: 2000 }); } },this);//在自定义组件中使用canvas,获取wx.canvasToTempFilePath第二个参数必须传入this,不然获取不到 }, 2000); 复制代码
- 保存图片
//保存图片 saveImageToLocal() { wx.saveImageToPhotosAlbum({ filePath: this.data.resultImage, success: res => { wx.showToast({ title: '保存成功', icon: 'success', duration: 2000 }); }, fail() { wx.showToast({ title: '保存失败', duration: 2000 }); } }); }, 复制代码
这篇关于微信小程序生成图片分享朋友圈的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-30实现小程序内部扫码签到和微信扫一扫签到-icode9专业技术文章分享
- 2024-06-30微信内调用扫码扫描小程序码如何解析链接-icode9专业技术文章分享
- 2024-06-30小程序码链接加密了如何解-icode9专业技术文章分享
- 2024-05-302024年最新版云开发cms开通步骤,开始开发微信小程序前的准备工作,认真看完奥!
- 2024-03-30微信小程序的网络设置,及网络请求:wx.request(OBJECT)
- 2024-01-22基于taro搭建小程序多项目框架
- 2024-01-13小程序开发:在插件市场寻找步骤条组件并二开
- 2024-01-05钉钉小程序生态—企业机器人加互动卡片,改善用户体验的开始!
- 2023-12-29【UniApp】-uni-app-打包成小程序
- 2023-12-26性能翻倍!京东亿级体量小程序优化实践