The content of this article is about the code for generating images in the WeChat applet. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
First of all, you need to use the <canvas> component to perform drawing operations in the mini program. The steps are roughly divided into the following three parts: A large background image, a dynamic text ('title user name and other information'), and a small program code image. Then we first put the following <canvas> in our wxml code:
<!--wxml代码--> <view style='width:100%;height:100%;' bindlongpress='saveInviteCard'> <canvas canvas-id="shareCanvas" style="width:{{windowWidth}}px;height:{{windowHeight}}px" ></canvas> </view>
Third-party function introduction
const util = require('../../utils/util.js')
//util.js var Promise = require('../components/bluebird.min.js') module.exports = { promisify: api => { return (options, ...params) => { return new Promise((resolve, reject) => { const extras = { success: resolve, fail: reject } api({ ...options, ...extras }, ...params) }) } } }
bluebird.min.js You can download it from Baidu yourself, the source file The code is too long, so I won't copy and paste it here.
//获取手机宽高 wx.getSystemInfo({ success: function (res) { wc.put('phoneInfo', res) } }); var windowHeight = phoneInfo.windowHeight, windowWidth = phoneInfo.windowWidth self.setData({ windowHeight: windowHeight, windowWidth: windowWidth }) //在这段代码中,我们通过使用wx.getImageInfo这个API来下载一个网络图片到本地(并可获取该图片的尺寸等其他信息),然后调用ctx.drawImage方法将图片绘制到画布上,填满画布。 const wxGetImageInfo = util.promisify(wx.getImageInfo) //绘制二维码 Promise.all([ //背景图 wxGetImageInfo({ src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536213812443&di=753a0a49acfd390fba9fd7884daafa5c&imgtype=0&src=http%3A%2F%2Fi5.hexunimg.cn%2F2016-08-10%2F185422031.jpg' }), //二维码 wxGetImageInfo({ src: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1898297765,3486952215&fm=26&gp=0.jpg' }) ]).then(res => { console.log(res) if (res[0].errMsg == "getImageInfo:ok" && res[1].errMsg == "getImageInfo:ok"){ const ctx = wx.createCanvasContext('shareCanvas') // 底图 ctx.drawImage(res[0].path, 0, 0, windowWidth, windowHeight) //写入文字 ctx.setTextAlign('center') // 文字居中 ctx.setFillStyle('#f3a721') // 文字颜色:黑色 ctx.setFontSize(22) // 文字字号:22px ctx.fillText("作者:墜夢—Eric", windowWidth / 2, windowHeight / 2) // 小程序码 const qrImgSize = 150 ctx.drawImage(res[1].path, (windowWidth - qrImgSize) / 2, windowHeight / 1.8, qrImgSize, qrImgSize) ctx.stroke() ctx.draw() }else{ wx.showToast({ title: '邀请卡绘制失败!', image:'../../asset/images/warning.png' }) } })
In this way, our sharing picture is almost generated.
To save it into the user's system album, to achieve this function, we mainly rely on wx.canvasToTempFilePath
and wx.saveImageToPhotosAlbum
These two APIs.
The main process is to first generate a temporary file from the image drawn on <canvas>
through wx.canvasToTempFilePath
, and then through wx. saveImageToPhotosAlbum
Performs the operation of saving to the system album.
//保存邀请卡 saveInviteCard:function(){ console.log('保存图片') const wxCanvasToTempFilePath = util.promisify(wx.canvasToTempFilePath) const wxSaveImageToPhotosAlbum = util.promisify(wx.saveImageToPhotosAlbum) wxCanvasToTempFilePath({ canvasId: 'shareCanvas' }, this).then(res => { return wxSaveImageToPhotosAlbum({ filePath: res.tempFilePath }) }).then(res => { wx.showToast({ title: '已保存到相册' }) }) }
Related recommendations:
WeChat Mini Program QR code canvas drawing example detailed explanation
##WeChat Mini Program canvas basics detailed explanation
The above is the detailed content of Code for generating images in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!