小程序canvas绘制添加网络图片 & 保存图片到本地

最新推荐文章于 2024-07-22 18:18:11 发布

可乐M

最新推荐文章于 2024-07-22 18:18:11 发布

阅读量3k

点赞数

本文链接：https://blog.csdn.net/qq_37514029/article/details/87191063

版权

// 绘制网络图片到canvas 
const ctx = wx.createCanvasContext('canvas_poster');
    ctx.clearRect(0, 0, 0, 0);
    wx.getImageInfo({
      src: '',//服务器返回的图片地址
      success: function (res) {
        //res.path是网络图片的本地地址
        let Path = res.path;

        ctx.drawImage(Path, 0, 0, 400, 200);
        ctx.draw();

      },
      fail: function (res) {
        
      }
  });

  // 保存图片到本地
    wx.canvasToTempFilePath({
       x: 0,
       y: 0,
       width: 270,
       height: 314,
       destWidth: 810,
       destHeight: 942,
       quality: 1,
       canvasId: 'canvas_poster',
       fileType: 'png',
       success: function (res) {
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success(res) {
              wx.hideLoading();
              wx.showToast({
                title: '保存成功',
              });
            },
            fail() {
              wx.hideLoading()
            }
          })
        }
      })