时间:2021-07-01 10:21:17 帮助过:7人阅读
本文实例讲述了微信小程序使用canvas的画图操作。分享给大家供大家参考,具体如下:
基础写起来太没动力了,也写得乱七八糟的,还是直接解决一些小问题比较方便,代码的方方面面的细节都会详尽的解释一下。
1、下面介绍一下canvas的画图,我这个简单一点,画一个带图文的背景图,图片可以从后台获取也可以选择本地的。canvas画图首先要在wxml里面新建一个<canvas>标签,一定要写上canvas-id='canvas的id',这是必须条件,如下面代码:
<canvas canvas-id='canvas' style='width:{{windowW}}px;height:{{windowH}}px'></canvas> <button bindtap='chooseImage'>相册</button>
2、上面canvas的宽高都是js控制的,使用?wx.getSystemInfo获取屏幕的可见宽高。代码如下:
wx.getSystemInfo({ success: function (res) { that.setData({ windowW: res.windowWidth, windowH: res.windowHeight }) }, })
相当的详细,有没有!!!
3、重点注意一下:在微信小程序的canvas画图中如果使用了网络图片,一定要先把这张图片读取下载下来(可使用wx.downloadFile),存为网络格式的图片!!!
上面这个操作是避免网络状况不好的时候canvas画图完成了背景图片确显示不出来的情况,同时,这个图片所在的域名必须在微信公众平台配置一下,代码如下:
wx.downloadFile({ url: '图片路径', success: function (res) { that.setData({ canvasimgbg: res.tempFilePath }) } })
4、 我上面wxml代码里面写了一个按钮,使用wx.chooseImage
调用了系统相册,所以说,我们选择一张图片画进canvas也是可以的,代码如下:
wx.chooseImage({ success: function (res) { that.setData({ chooseimg: res.tempFilePaths[0] }) }, })
5、下面就是cancas画图啦,画和屏幕一样宽高的,然后我们再写一行字哈哈哈,代码如下:
var that = this; var windowW = that.data.windowW; var windowH = that.data.windowH; var canvasimgbg = that.data.canvasimgbg; var canvasimg1 = that.data.chooseimg; canvas.drawImage(canvasimgbg, 0, 0, windowW, windowH); canvas.drawImage(canvasimg1, 0, 10, 200, 200); canvas.setFontSize(50) canvas.fillText('Hello', 200, 200) canvas.draw(true,setTimeout(function(){ that.daochu() },1000));
使用canvas.draw()
画图,完毕之后直接wx.canvasToTempFilePath
导出图片
6、导出图片,代码如下:
var that = this; var windowW = that.data.windowW; var windowH = that.data.windowH; wx.canvasToTempFilePath({ x: 0, y: 0, width: windowW, height: windowH, destWidth: windowW, destHeight: windowH, canvasId: 'canvas', success: function (res) { console.log(res) wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success(res) { } }) wx.previewImage({ urls: [res.tempFilePath], }) } })
上面这些代码已经完成啦!!!
主要就是各位使用的时候看需要什么样的啦!
下面还是附上完整的代码把!
// pages/canvas/canvas.js Page({ /** * 页面的初始数据 */ data: { }, onLoad: function (options) { var that = this; that.sys(); that.bginfo(); }, sys: function () { var that = this; wx.getSystemInfo({ success: function (res) { that.setData({ windowW: res.windowWidth, windowH: res.windowHeight }) }, }) }, bginfo: function () { var that = this; wx.downloadFile({ url: '图片链接',//注意公众平台是否配置相应的域名 success: function (res) { that.setData({ canvasimgbg: res.tempFilePath }) } }) }, canvasdraw: function (canvas) { var that = this; var windowW = that.data.windowW; var windowH = that.data.windowH; var canvasimgbg = that.data.canvasimgbg; var canvasimg1 = that.data.chooseimg; canvas.drawImage(canvasimgbg, 0, 0, windowW, windowH); canvas.drawImage(canvasimg1, 0, 10, 200, 200); canvas.setFontSize(50) canvas.fillText('Hello', 200, 200) canvas.draw(true,setTimeout(function(){ that.daochu() },1000)); // canvas.draw(); }, daochu: function () { console.log('a'); var that = this; var windowW = that.data.windowW; var windowH = that.data.windowH; wx.canvasToTempFilePath({ x: 0, y: 0, width: windowW, height: windowH, destWidth: windowW, destHeight: windowH, canvasId: 'canvas', success: function (res) { console.log(res) wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success(res) { } }) wx.previewImage({ urls: [res.tempFilePath], }) } }) }, chooseImage: function () { var that = this; var canvas = wx.createCanvasContext('canvas'); wx.chooseImage({ success: function (res) { that.setData({ chooseimg: res.tempFilePaths[0] }) that.canvasdraw(canvas); }, }) } })
希望本文所述对大家微信小程序开发有所帮助。