小程序中通过canvas生成并保存图片

1. html

html 复制代码
<canvas class="canvas" id="photo" type="2d" style="width:200px;height: 300px;"></canvas>
<button bindtap="saveImage">保存</button>
<!-- 用来展示生成的那张图片 -->
<image src="{{tempFilePath}}" mode="widthFix" />

2. js

javascript 复制代码
data: {
  canvas: null,  //canvas 对象
  tempFilePath: ""
},

onLoad(options) {
  wx.createSelectorQuery()
    .select('#photo') // 在 canvas的 id
    .fields({
      node: true,
      size: true
    })
    .exec((res) => {
      // Canvas 对象
      const canvas = res[0].node
      this.setData({ //这里保存canvas对象是因为下面保存相片要用这个对象
        canvas
      })
      // 渲染上下文
      const ctx = canvas.getContext('2d')
      // canvas 画布的实际绘制宽高
      const width = res[0].width
      const height = res[0].height
      // 初始化画布大小
      const dpr = wx.getWindowInfo().pixelRatio
      canvas.width = width * dpr
      canvas.height = height * dpr
      ctx.scale(dpr, dpr)
      // 清空画布
      ctx.clearRect(0, 0, width, height)
      //canvas背景色
      ctx.fillStyle = '#3c9cff';
      ctx.fillRect(0, 0, 200, 300);
      // 图片对象
      const image = canvas.createImage()
      image.src = '/images/640.png'
      image.onload = () => {
        // 将图片绘制到 canvas 上
        ctx.drawImage(image, 0, 0, 200, 300)
      }
   })
},
// 生成图片
saveImage() {
  wx.canvasToTempFilePath({
    canvasId: 'photo',
    destWidth: 286,
    destHeight: 417,
    canvas: this.data.canvas,
    success: (res) => {
      this.setData({
        tempFilePath: res.tempFilePath
      })
      wx.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success: (res)=> {
          wx.showToast({
            title: '保存成功',
          })
        }
      })
    }
  });
},

3. css

css 复制代码
.canvas {
  margin: auto;
  font-size: 0;
}

.show {
  width: 200px;
  margin: auto;
  display: block;
}

4. 效果图

相关推荐
萧寂1732 小时前
微信小程序自定义轮播图指示点样式
微信小程序·小程序
R_yy10 小时前
微信小程序开发——视频播放实现(本地视频或者云端视频均可)
前端·微信小程序·小程序
低代码布道师15 小时前
加油站小程序实战教程03站点管理
低代码·小程序
V+zmm1013418 小时前
智慧物流小程序(论文源码调试讲解)
java·数据库·微信小程序·小程序·毕业设计
霍格沃兹测试开发学社测试人社区18 小时前
性能测试丨微信小程序性能优化指南
性能优化·微信小程序·小程序
猿毕设21 小时前
【FL0100】基于SSM微信小程序的走失人员的报备平台
java·spring boot·后端·python·微信小程序·小程序
猿毕设21 小时前
【FL0091】基于SSM和微信小程序的社区二手物品交易小程序
java·spring boot·后端·python·微信小程序·小程序
前端小雪的博客.1 天前
Uniapp 小程序复制、粘贴功能实现
小程序·uni-app
V+zmm101341 天前
岳阳市美术馆预约平台(小程序论文源码调试讲解)
java·数据库·微信小程序·小程序·毕业设计