• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

2小程序canvas使用,及一些坑,以及自己的一些小总结

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

自己做了一个小程序,主要用于给头像加图标的那种,和qq似的,主要用canvas做的, 第一回用,掉了很多坑,所以今天总结一下自己所做的,如果大家有不理解的地方,欢迎提问;如果帮到大家的话,帮忙点个啥的

canvas可以用来画一些东西,前台生成一些海报什么的,可以保存base64图片

canvas中介绍的各种方法有很多参数,不理解的话请自行到小程序开发文档查看

我合成的方法是,第一步:获取系统信息,第二步:画背景,第三步:在这个背景上画另外一张图片,进行合成,然后转base64图片,传给后台

##你在画布,想把一张图片画上去,只要是网络图片,就一定要download file下来,使用临时路径,因为我就踩了这个大坑,直接使用网络图片,会有真机不显示的问题

##因为你头像也需要使用缓存路径,所有你需要把https://wx.qlogo.cn添加到你的downloadfile的域名下,这样就省事了很多,如果你想要测试,就把详情里的不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书,对勾去掉测试,为了实现效果不择手段

第一步:获取系统信息:

1://获取系统信息。手机型号,设备像素比,屏幕宽高,可使用窗口宽高,微信app的信息
getSystemInfo: function () {
    var t = this;
    wx.getSystemInfo({
      success: function (a) {
        //screenWidth,screenHeight屏幕宽高
        var i = a.screenWidth / 375;
        t.setData({
          screenWidth: i,
          canvasWidth: a.screenWidth / 375 * 250,
          canvasHeight: a.screenWidth / 375 * 250
        }), e.globalData.platform = a.platform;
      }
    })
  },

第二步:绘制背景

//需要获取canvas,和h5一样
 const ctx = wx.createCanvasContext(\'myCanvas\')
 draw: function (path) {
    console.log(path)
    var that = this
    //背景图片路径
    var path = path
    //画布宽度    //画布高度
    var canvasWidth = that.data.canvasWidth
    var canvasHeight = that.data.canvasHeight
    //getImageInfo()获取图片信息,倘若为网络图片,需先配置download域名才能生效。
    wx.getImageInfo({
      src: path,
      success: function (res) {
      	//drawImage()绘制图像到画布。
      	//res.path所要绘制的图片资源
      	//0,0,是你要在画布的哪个位置开始画
      	//canvasWidth, canvasHeight你需要在画布上绘制多大的背景图,允许缩放
        ctx.drawImage(res.path, 0, 0, canvasWidth, canvasHeight)
        //画完第一层背景之后,调用合成图标的方法
        that.headicon()
      },
      fail: function (res) {
        console.log(res);
      }
    })
  },

第三步:画好背景,合成图标,图片做好后,我利用canvasGetImageData()方法,把画布内容保存成base64的图片,如果有想用此方法的需要三个文件,我把它放在网盘,大家可以下载

链接:https://pan.baidu.com/s/1bHXpAGDdPkmQpgLt49wUGQ 密码:6riy

const base64 = require(\'../../utils/base64.js\')
const upng = require(\'../../utils/UPNG.js\')

headicon: function () { var that = this //图标路径 var qrcodeUrl = this.data.qrcodeUrl; //画布宽度 //画布高度 var canvasWidth = this.data.canvasWidth var canvasHeight = this.data.canvasHeight // 你需要把图标绘制到哪个位置(起点位置) var x = canvasWidth - 80 var y = canvasHeight - 80 wx.getImageInfo({ src: qrcodeUrl, success: function (res) { ctx.drawImage(qrcodeUrl, x, y, 80, 80) //保存当前画的状态 ctx.save(); //恢复当前画的状态 ctx.restore(); ctx.draw(false, () => { // 2. 获取图像数据。canvasGetImageData()在ctx.draw()里使用在有效 wx.canvasGetImageData({ // 你需要获取那张画布的数据,获取多大范围的数据 canvasId: "myCanvas", x: 0, y: 0, width: canvasWidth, height: canvasHeight, success:res=> { // 3. png编码 let pngData = upng.encode([res.data.buffer], res.width, res.height) // 4. base64编码,转成base64图片,就可以发送给后台保存了 let base64 = wx.arrayBufferToBase64(pngData) that.setData({ generatePictures: base64 }) } }) }) }, fail: function (res) { console.log(res); } }) },

  


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序echarts层级太高发布时间:2022-07-18
下一篇:
小程序canvas的使用发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap