微信小程序使用canvas的画图操作示例
本文实例讲述了微信小程序使用canvas的画图操作。分享给大家供大家参考,具体如下:
基础写起来太没动力了,也写得乱七八糟的,还是直接解决一些小问题比较方便,代码的方方面面的细节都会详尽的解释一下。
1、下面介绍一下canvas的画图,我这个简单一点,画一个带图文的背景图,图片可以从后台获取也可以选择本地的。canvas画图首先要在wxml里面新建一个
相册
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画图啦,画和屏幕一样宽高的,然后我们再写一行字哈哈哈,代码如下:
varthat=this; varwindowW=that.data.windowW; varwindowH=that.data.windowH; varcanvasimgbg=that.data.canvasimgbg; varcanvasimg1=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、导出图片,代码如下:
varthat=this; varwindowW=that.data.windowW; varwindowH=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){ varthat=this; that.sys(); that.bginfo(); }, sys:function(){ varthat=this; wx.getSystemInfo({ success:function(res){ that.setData({ windowW:res.windowWidth, windowH:res.windowHeight }) }, }) }, bginfo:function(){ varthat=this; wx.downloadFile({ url:'图片链接',//注意公众平台是否配置相应的域名 success:function(res){ that.setData({ canvasimgbg:res.tempFilePath }) } }) }, canvasdraw:function(canvas){ varthat=this; varwindowW=that.data.windowW; varwindowH=that.data.windowH; varcanvasimgbg=that.data.canvasimgbg; varcanvasimg1=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'); varthat=this; varwindowW=that.data.windowW; varwindowH=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(){ varthat=this; varcanvas=wx.createCanvasContext('canvas'); wx.chooseImage({ success:function(res){ that.setData({ chooseimg:res.tempFilePaths[0] }) that.canvasdraw(canvas); }, }) } })
希望本文所述对大家微信小程序开发有所帮助。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。