微信小程序2D canvas绘制分享海报

╰+攻爆jí腚メ 2021-07-24 23:50 1082阅读 0赞

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70][]

# wxml  #

<view>
    	<canvas type="2d" id="canvas_box" style="width:260px;height:430px "></canvas>
    	<button class='bottom' catchtap="bc" canvas-id="mycanvas"> 保存到相册    </button>
    </view>

type：指定 canvas 类型

id：canvas 组件的唯一标识符

# 样式根据自己情况自定义 #

page{
      background: rgb(223, 165, 165);
      
    }
    canvas{
      margin:20rpx auto;
      border: 1rpx solid #ccc;
      background: #fff;
      color: #fff;
    }

# js重点    #

（完整js代码在最下面）

onReady: function () {
        const query = wx.createSelectorQuery()
        query.select('#canvas_box')
          .fields({
            id: true,
            node: true,
            size: true
          })
          .exec(this.init.bind(this));
      },

**id:true    是否返回节点 id**

**node:true    是否返回节点对应的 Node 实例**

**size:true    是否返回节点尺寸（`width` `height`）**

**wx.createSelectorQuery()**

返回一个 SelectorQuery 对象实例。在自定义组件或包含自定义组件的页面中，应使用 `this.createSelectorQuery()` 来代替。

**select**

在当前页面下选择第一个匹配选择器 `selector` 的节点。返回一个 `NodesRef` 对象实例，可以用于获取节点信息。

selector 语法

selector类似于 CSS 的选择器，但仅支持下列语法。

*  ID选择器：\#the-id
 *  class选择器（可以连续指定多个）：.a-class.another-class
 *  子元素选择器：.the-parent > .the-child
 *  后代选择器：.the-ancestor .the-descendant
 *  跨自定义组件的后代选择器：.the-ancestor >>> .the-descendant
 *  多选择器的并集：\#a-node, .some-other-nodes

**fields**

获取节点的相关信息。需要获取的字段在fields中指定。返回值是 `nodesRef` 对应的 `selectorQuery`

注意

computedStyle 的优先级高于 size，当同时在 computedStyle 里指定了 width/height 和传入了 size: true，则优先返回 computedStyle 获取到的 width/height。

init(res) {
        console.log(res)
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        const dpr = wx.getSystemInfoSync().pixelRatio
        //新接口需显示设置画布宽高；
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr
        ctx.scale(dpr, dpr);
        this.setData({
          canvas,
          ctx
        });
      //向画布方法
        this.canvasDraw(ctx);
       this.title(ctx);
       this.name(ctx)
       this.code(ctx).then(rrr=>{
        this.hande(ctx)
       })
      },

wx.getSystemInfoSync()   // wx.getSystemInfo 的同步版本

通过 Canvas.getContext('2d') 接口可以获取 CanvasRenderingContext2D 对象，实现了 [HTML Canvas 2D Context][] 定义的属性、方法。

### 画图 ###

canvasDraw(ctx) {
        let img = this.data.canvas.createImage(); 
        img.src = "img/2.jpg";
        img.onload = () => {
          this.data.ctx.drawImage(img, 0, 0, 260, 260);
        };
         
      },

let img = this.data.canvas.createImage();   //创建img对象

img.src = "图片地址"

img.onload   图片加载监听

this.data.ctx.drawImage(img, 10, 10, 260, 260);  //   (图片，左距离，上距离，宽，高）

### **画文字** ###

title(ctx) {
        // ctx.setFontSize(12)
        let text = '接小程序开发，web开发，H5开发，小程序云开发，PHP开发'
        let moy =  '有需要的直接微信扫码'
        ctx.font = 'normal bold 12px sans-serif';
        ctx.fillStyle = "rgba(60, 59, 59)";
        console.log('======,', text.length)
        if (text.length <= 19) {
          ctx.fillText(text, 10, 275, 280)
          ctx.fillStyle = "rgba(0,0,0)";
          ctx.font = 'normal bold 16px sans-serif';
          ctx.fillStyle = "red";
          ctx.fillText(moy, 10, 290, 280)
        }
        if (text.length <= 38) {
          let firstLine = text.substring(0, 20);
          let secondLine = text.substring(20, 38);
          ctx.fillText(firstLine, 10, 275, 280)
          ctx.fillText(secondLine, 10, 290, 280)
          ctx.fillStyle = "rgba(0,0,0)";
          ctx.font = 'normal bold 16px sans-serif';
          ctx.fillStyle = "red";
          ctx.fillText(moy, 10, 315, 280)
        } else {
          let firstLine = text.substring(0, 20);
          let secondLine = text.substring(20, 38) + '...';
          ctx.fillText(firstLine, 10, 280, 280)
          ctx.fillText(secondLine, 10, 295, 280)
          ctx.font = 'normal bold 16px sans-serif';
          ctx.fillStyle = "red";
          ctx.fillText(moy, 10, 320, 280)
        }
         
      },

###  保存到相册 ###

普通的保存

wx.canvasToTempFilePath({
      x: 100,
      y: 200,
      width: 50,
      height: 50,
      destWidth: 100,
      destHeight: 100,
      canvasId: 'myCanvas',
      success(res) {
        console.log(res.tempFilePath)
      }
    })

2d的保存

bc() {
        // 保存到相册
        console.log('保存canvasId',this.data.canvas._canvasId)
        wx.canvasToTempFilePath({     //将canvas生成图片
          canvas:this.data.canvas,
          x: 0,
          y: 0,
          width: this.data._width,
          height: this.data._height,
          destWidth: this.data._width,     //截取canvas的宽度
          destHeight:this.data._height,   //截取canvas的高度
          success: function (res) {
            console.log('生成图片成功：',res)
            wx.saveImageToPhotosAlbum({  //保存图片到相册
              filePath: res.tempFilePath,
              success: function () {
                wx.showToast({
                  title: "保存图片成功！",
                  duration: 2000
                })
              }
            })
    
          },
        },this)
    
      },

注意两者区别:[请参考官方文档][Link 1]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 1][]     ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 2][]

完整js代码

Page({
      data: {
    
      },
      onLoad: function () {
    
      },
      onReady: function () {
        const query = wx.createSelectorQuery()
        query.select('#canvas_box')
          .fields({
            id: true,
            node: true,
            size: true
          })
          .exec(this.init.bind(this));
      },
      init(res) {
        console.log(res)
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        const dpr = wx.getSystemInfoSync().pixelRatio
        //新接口需显示设置画布宽高；
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr
        ctx.scale(dpr, dpr);
        this.setData({
          canvas,
          ctx
        });
      //向画布载入图片的方法
        this.canvasDraw(ctx);
      //向画布载入标题的方法
       this.title(ctx);
       this.name(ctx)
       this.code(ctx).then(rrr=>{
       // 头像加载
      this.hande(ctx)
       })
      },
      // 封面图
      canvasDraw(ctx) {
        let img = this.data.canvas.createImage(); //创建img对象
        img.src = "img/2.jpg";
        img.onload = () => {
          console.log(img.complete); //true
          this.data.ctx.drawImage(img, 0, 0, 260, 260);
        };
         
      },
      // 标题
      title(ctx) {
        // ctx.setFontSize(12)
        let text = '接小程序开发，web开发，H5开发，小程序云开发，PHP开发'
        let moy =  '有需要的直接微信扫码'
        ctx.font = 'normal bold 12px sans-serif';
        ctx.fillStyle = "rgba(60, 59, 59)";
        console.log('======,', text.length)
        if (text.length <= 19) {
          // 一行字
          ctx.fillText(text, 10, 275, 280)
          ctx.fillStyle = "rgba(0,0,0)";
         
        }else if (text.length <= 38) {
          // 两行字
          let firstLine = text.substring(0, 20);//第一行
          let secondLine = text.substring(20, 38);第二行
          ctx.fillText(firstLine, 10, 275, 280)
          ctx.fillText(secondLine, 10, 290, 280)
     
        } else {
          // 超过两行省略多的加省略号
          let firstLine = text.substring(0, 20);
          let secondLine = text.substring(20, 38) + '...';
          ctx.fillText(firstLine, 10, 280, 280)
          ctx.fillText(secondLine, 10, 295, 280)
        
        }
        ctx.font = 'normal bold 16px sans-serif';
        ctx.fillStyle = "red";
        ctx.fillText(moy, 10, 320, 280)
      },
      // 头像
      hande(ctx) {
        let hande = this.data.canvas.createImage(); //创建img对象
        hande.onload = () => {
          console.log(hande.complete); //true
           // 绘制头像图片
           ctx.arc(30, 370, 40/2, 0, 2 * Math.PI) //画出圆
           ctx.clip(); //裁剪上面的圆形
           ctx.drawImage(hande, 10, 350, 40, 40)
           ctx.restore();
        };
        hande.src = "img/1.jpg";
      },
      // 名字
      name(ctx){
        ctx.fillStyle = "rgba(60, 59, 59)";
        ctx.font = 'normal bold 12px sans-serif';
        ctx.fillText('Loust', 60, 365, 280)
        ctx.fillStyle = "rgba(60, 59, 59)";
        ctx.font = 'normal bold 10px sans-serif';
        ctx.fillStyle = "#999";
        ctx.fillText('希望大佬们能够多多指教', 60, 380, 280)
      },
      // 二维码
      code(ctx) {
        return new Promise(rrr=>{
          let code = this.data.canvas.createImage(); //创建img对象
          code.onload = () => {
            console.log(code.complete); //true
            this.data.ctx.drawImage(code, 180, 340, 60, 60);
          };
          code.src = "img/code.jpg";
          setTimeout(() => {
            rrr(true)
          }, 100);
        })
      },
      bc() {
        // 保存到相册
        console.log('保存canvasId',this.data.canvas._canvasId)
        wx.canvasToTempFilePath({     //将canvas生成图片
          canvas:this.data.canvas,
          x: 0,
          y: 0,
          width: this.data._width,
          height: this.data._height,
          destWidth: this.data._width,     //截取canvas的宽度
          destHeight:this.data._height,   //截取canvas的高度
          success: function (res) {
            console.log('生成图片成功：',res)
            wx.saveImageToPhotosAlbum({  //保存图片到相册
              filePath: res.tempFilePath,
              success: function () {
                wx.showToast({
                  title: "保存图片成功！",
                  duration: 2000
                })
              }
            })
    
          },
        },this)
    
      },
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70]: /images/20210724/a801963475844c349d835dbc507ed5c4.png
[HTML Canvas 2D Context]: https://www.w3.org/TR/2dcontext/
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200805165319724.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 2]: /images/20210724/afe58c9894d04e4e872422f329da1620.png