小程序海报的制作与保存

最新推荐文章于 2024-07-31 13:57:35 发布

Qjhss

最新推荐文章于 2024-07-31 13:57:35 发布

阅读量240

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/weixin_44122653/article/details/110874376

版权

小程序 canvas 海报生成图片保存前端开发

关键词由CSDN通过智能技术生成

小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

小程序海报的制作与保存

一、wxml文件

 <!-- 用于显示制作的海报 --!>
    <image src="imagePath" style="width: 100px, height: 100px" round />

    <!-- 利用canvas画海报，不显示 注意不能使用wx:if 或者 hidden 实际测试当使用这两个方法影藏是海报都无法被渲染 --!>
    <!-- 可以使用fix定位来实现canvas隐藏 --!>
    <canvas canvas-id="canvas1"  style="width: 100px;height: 100px;position:fixed;top:-9999px" ></canvas>
    <button bindtap="save">保存海报</button>

二、绘制canvas

绘制方法可以参考：https://blog.csdn.net/abs625/article/details/100170552
使用二倍图解决保存的图片模糊问题
js：

const ctx1 = wx.createCanvasContext('canvas1')
  canvas() {
  ctx1.drawImage('背景图片地址', 0, 0, 10, 100)

  ctx1.setFontSize(40)
  ctx1.setTextBaseline('middle')
  ctx1.fillText('添加文字', 320, 140)

  //添加图片，若是添加网络图片需要先将图片存为本地临时图片
  ctx1.drawImage('本地图片地址', 320, 340, 200, 200)

  let that = this
  ctx1.draw(true, function () {
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 100,
      height: 1000,
      destWidth: 100,
      destHeight: 100,
      canvasId: 'canvas1',
      success: function (res) {
        that.setData({
          //保存地址
          imagePath: res.tempFilePath
        })
        console.log(res);
      },
      fail: function (res) {
        console.log(res)
      }
    })
  })
},

三、保存生成的海报到本地

js：

save() {
      wx.saveImageToPhotosAlbum({  //保存图片到相册
        filePath: this.data.imagePath,
        success: function () {
          wx.showToast({
            title: "生成图片成功！",
            duration: 2000
          })
        },
      })
    },