微信小程序canvas 2d 引入本地图片并生成分享图

2020-04-27阅读(777)评论(0)牵着狗狗看MM

苏州实时公交查询

在小程序基础库 v2.9.0 正式开放一套全新的 Canvas 接口。该接口符合 HTML Canvas 2D 的标准,实现上采用 GPU 硬件加速,渲染性能相比于现有的 Canvas 接口有一倍左右的提升。

接口用法可参考该代码片段

本文在此代码片段上做了点调整,来实现引入本地图片并生成分享图

index.wxml

<view class="intro">
  <canvas id="canvas" class="my_canvas" type="2d" style="width: 750rpx; height: 1334rpx"></canvas>
  <image src="{{imgSrc}}" style="width:500px;height:753px"></image>
</view>
<!-- image标签中的宽高设置为本地图片的宽高 -->

index.js

const app = getApp()

Page({
  data: {

  },
  onLoad: function () {
    const query = wx.createSelectorQuery();//如果是在组件中,则改成 this.createSelectorQuery()
    query.select('#canvas').fields({
      node: true,
      rect: true
    }, res => {
      const canvas = res.node;
      const ctx = canvas.getContext('2d');
      canvas.width = 500;//本地图像的width
      canvas.height = 753;//本地图像的height
      this.render(canvas, ctx);
    }).exec()
  },
  render(canvas, ctx) {
    let that = this;
    let img = canvas.createImage();//canvas 2d 通过此函数创建一个图片对象
    img.onload = (e) => {
      console.log('img loaded')
      ctx.drawImage(img, 0, 0, 500, 753);
      ctx.font = "28px sans-serif";
      ctx.fillStyle = "rgba(0, 0, 0, 1)";
      ctx.fillText("我是分享文字111111111", 0, 40);
      ctx.fillStyle = "rgba(0, 0, 0, .5)";
      ctx.fillText("我是分享文字222", 0, 80);
      wx.canvasToTempFilePath({
        canvas,
        wwidth: 500,
        height: 753,
        destWidth:500,
        destHeight:753,
        success(res) {
          console.log(res.tempFilePath)
          that.setData({
            imgSrc:res.tempFilePath
          })
        }
      }, that)
    }
    img.onerror = (e) => {
      console.error('err:', e)
    }
    img.src = './share.jpg'
  },

})

 

完整代码片段

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 微信小程序canvas 2d 引入本地图片并生成分享图
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏