小程序使用canvas type=“2d“时利用 canvasToTempFilePath生成指定图片

<canvas type="2d" id="canvas" style="width: 300px; height: 300px"></canvas>
wx.createSelectorQuery()
        .select('#canvas')
        .fields({
          node: true
        })
        .exec(async res => {
          const canvas = res[0].node
          const ctx = canvas.getContext('2d')
          const that = this
          wx.canvasToTempFilePath({
            //把当前画布指定区域的内容导出生成指定大小的图片
            canvas: canvas, // canvas实例
            success(res) {
              that.imageUrl = res.tempFilePath
            }
          })
        })

在这里插入图片描述
https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要在小程序使用 Canvas2D 绘制页面并生成图片,可以按照以下步骤进行: 1. 在 `wxml` 文件中添加 `canvas` 标签,设置宽高和 `canvas-id`。 ``` <canvas canvas-id="myCanvas" style="width: 100%; height: 100%;"></canvas> ``` 2. 在 `js` 文件中获取 `canvas` 上下文对象,并进行绘制。绘制完成后可以通过 `canvasToTempFilePath` 方法将画布转换为临图片路径。 ``` // 获取canvas上下文对象 const ctx = wx.createCanvasContext('myCanvas', this); // 绘制图形 ctx.setFillStyle('#ffffff'); ctx.fillRect(0, 0, 100, 100); ctx.setFillStyle('#000000'); ctx.setFontSize(20); ctx.fillText('Hello, World!', 10, 50); // 将画布转换为临图片路径 ctx.draw(false, () => { wx.canvasToTempFilePath({ canvasId: 'myCanvas', success: (res) => { console.log(res.tempFilePath); }, fail: (res) => { console.log(res.errMsg); } }, this); }); ``` 3. 生成的临图片路径可以通过 `Image` 组件显示在页面中。 ``` <image src="{{imageUrl}}" mode="aspectFill" style="width: 100%; height: 100%;"></image> ``` 完整代码示例: ``` // index.wxml <canvas canvas-id="myCanvas" style="width: 100%; height: 100%;"></canvas> <image src="{{imageUrl}}" mode="aspectFill" style="width: 100%; height: 100%;"></image> // index.js Page({ data: { imageUrl: '' }, onLoad() { const ctx = wx.createCanvasContext('myCanvas', this); ctx.setFillStyle('#ffffff'); ctx.fillRect(0, 0, 100, 100); ctx.setFillStyle('#000000'); ctx.setFontSize(20); ctx.fillText('Hello, World!', 10, 50); ctx.draw(false, () => { wx.canvasToTempFilePath({ canvasId: 'myCanvas', success: (res) => { this.setData({ imageUrl: res.tempFilePath }); }, fail: (res) => { console.log(res.errMsg); } }, this); }); } }); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值