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

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

canvas可以用来画一些东西,前台生成一些海报什么的,可以保存base64图片(待定,因为图片转base64,有点模糊),

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

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

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

第一步:获取系统信息:

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);
      }
    })
  },

  

原文地址:https://www.cnblogs.com/naturl/p/9682223.html

时间: 2024-10-29 10:46:13

小程序canvas使用,及一些坑,以及自己的一些小总结的相关文章

微信小程序 | canvas绘图

1.新的尺寸单位 rpx rpx(responsive pixel): 可以根据屏幕宽度进行自适应. 规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素. 设备 rpx换算px (屏幕宽度/750): px换算rpx (750/屏幕宽度) 2.小程序canvas总结 小程序绘制的单位是px, 基础知识点请参考文档 : canvas中存在一个坐标系,二维的,左上

微信小程序怎么用?线下商家最适合玩小程序

随着微信小程序不断地释放新功能,许多行业越来越关注小程序,目前已经有不少餐饮和线下传统零售企业开始谋划利用好小程序.但是,线下商业有着复杂的场景,如何针对自己行业的特点和需求开发出属于自己的小程序,是摆在商家面前的一道难题. 公众号+小程序 在小程序诞生之前,很多企业纷纷将公众号作为O2O升级的重要渠道,但公众号的内容属性让它更侧重企业与用户建立线上的连接,而用完即走的小程序则被微信寄予连接更多的线下服务和场景,它将成为线下商业的最大入口,带来新零售的变革. 于是,微信将公众号与小程序连接在一起

小程序项目之再填坑

简诉 是的,真的,你没有看错,我就是上次那个加薪的,但是现在问题来了,最近又搞了个小程序的需求,又填了不少坑,其中的辛酸就不说了,说多了都是泪,此处省略三千字 ---^--,说重点吧,反正最后就是差点这让老板叫走人了,你说优秀不优秀-. 前段时间网上一直说的"<你可以骂那些中年人,尤其是有车有房的-->",虽然我没有房.也没有车,但也坚决不做那个可以随便骂的中年人(人到中年不如狗??),不存在的啦,这个仇宝宝已经记下了,先分享一下最近遇到的几个坑吧. -- 我是首席填坑官-

小程序 canvas 2d 新接口 绘制带小程序码的海报图

截止2020.3.26,小程序官方文档中,有两种绘制方式:Canvas 2D.webGL 文档地址:https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html 而开发者工具中,官方推荐使用性能更好的2d模式,用法如下所示: <canvas type="2d" id="myCanvas"></canvas> 但是网上大多数教程都是使用旧的接口,如: <can

微信小程序初体验遇到的坑

今天,2017年1月9日凌晨,微信小程序如约上线.2007年1月9日,整整10年前的今天,苹果的iPhone手机正式问世! 经不起新技术的诱惑了,想试着开发一下看看.刚开始遇到很多坑,在这里记录一下,有遇到同样坑的可以参考 1.我用的是mac版本的开发工具,运行官方demo后报错 Failed to load resource: net::ERR_NAME_NOT_RESOLVEDhttp://1351598279.appservice.open.weixin.qq.com/appservice

微信 小程序 canvas

测试手机为IPHONE6,开发者工具版本0.10.102800 微信小程序里的canvas 非 h5 canvas有很多不一样的地方,以下把微信小程序的canvas叫做wxcanvas 下面全是我一点点测试出的干货,耐心看: 1.wxcanvas,不像h5canvas那样有width和height属性和width和height的style样式.他只有style样式,可以理解为他就是个框吧: 2.wxcanvas不要当成真的H5canvas,就当它是个div就行,画出范围的东西也是存在的,改变wi

小程序canvas截图组件

最近做一个小程序的过程中,需要用到截图功能,网上搜了一下,发现没有符合要求的,就自己搞了个组件,方便复用. 目前功能很简单,传入宽高和图片路径即可,宽高是为了计算截图的比例,只支持缩放和移动. 实现思路是: 1.模拟一个截取框:2.移动图片位置,缩放图片:3.获取图片在其中的位置(left,top,width,height):4.使用canvas绘制图片,然后截取就ok了. 其中第二步的缩放图片比较麻烦,缩放中心点以及平滑缩放 以下是我的实现方式 wxml: <!--component/picP

小程序---canvas画图,生成分享图片,画图文字换行

小程序目前只支持转发,不支持分享朋友圈,为了能实现分享,很多线上小程序通过生成分享图片,保存到相册来给用户增加分享的可能. 具体思路及简要代码如下: 一:canvas画图 drawCanvas:function(){ var that = this; var contentPic = '/images/[email protected]' wx.downloadFile({ //当图片为网络图片时,需要先下载到本地,再进行操作, url: contentPic, //否则canvas会加载不到图

微信小程序 canvas 绘图问题总结

业务中碰到微信小程序需要生成海报进行朋友圈分享,这个是非常常见的功能,没想到实际操作的时候花了整整一天一夜才搞好,微信的 canvas 绘图实在是太难用了,官方快点优化一下吧. 业务非常简单,只需要将用到的图片,文案素材拼装到一张图片,保存到本地就可以了. 首先创建画布,将一张网上的图片画到画布上. const ctx = wx.createCanvasContext('shareCanvas'); ctx.drawImage("https://img3.doubanio.com/view/ph