小程序canva绘画海报保存本地图片

àì夳堔傛蜴生んèń 2021-12-11 08:11 396阅读 0赞

获取线上图片，保存本地临时文件：

wx.getImageInfo({
          src: img1,
          success: function(res1) {}
    });

获取移动设备width，height，计算canvas高宽：

// 获取系统width,height
      getSystemInfo: function() {
        let that = this;
        // 获取系统信息，设置canvas宽高
        wx.getSystemInfo({
          success(res) {
            that.setData({
              canvasWidth: res.windowWidth * 602 / 750,
              canvasHeight: res.windowWidth * 939 / 750,
              dp: res.windowWidth / 750,
            });
          }
        })
      },

保存图片本地：

// 图片绘画完成
                                        wx.canvasToTempFilePath({
                                          canvasId: 'mycanvas',
                                          success: function(res_) {
                                            wx.saveImageToPhotosAlbum({
                                              filePath: res_.tempFilePath,
                                              success(result) {
                                                wx.hideLoading();
                                                _this.setData({
                                                  shareModal: false
                                                });
                                                wx.showToast({
                                                  title: '图片保存成功',
                                                  icon: 'success',
                                                  duration: 2000,
                                                  mask: true,
                                                })
                                              }
                                            })
                                          }
                                        }, this)

整个demo代码：

// 绘画海报
      drawCanvas: function() {
        console.log(this.data.room);
        let _this = this;
        wx.showLoading({
          title: '图片生成中',
          mask: true,
        });
        let dp_ = this.data.dp;
        var ctx = wx.createCanvasContext('mycanvas', this);
        let img1 = global.baseUrl + 'index/roomdetail3.png',
          img2 = global.baseUrl + 'index/roomdetail4.png',
          img3 = global.baseUrl + 'index/roomdetail2.png',
          img4 = global.baseUrl + 'index/roomdetail1.png',
          imglogo = global.baseUrl + 'index/wcCodeico.jpg',
          adrtagbg = global.baseUrl + 'index/adrtagbg.png';
        let rent = '2000元/月',
          estatename = '天河公寓',
          mode = ' •整租',
          layout = ' 一房一厅',
          floor = ' 楼层1/5';
        let area = '40㎡',
          adrtag = '近地铁',
          decoration = '精装修';
        // 绘画图片
        // const grd = ctx.createLinearGradient(0, 50 * dp_, 60 * dp_, 0)
        // grd.addColorStop(0, '#fff')
        // grd.addColorStop(1, 'rgba(143, 195, 31, 1)')
        // Fill with gradient
        // ctx.setFillStyle(grd);//将渐变色渲染入正方形
        ctx.setFillStyle('#fff'); // 画布背景颜色
        ctx.fillRect(0, 0, 602 * dp_, 939 * dp_); // 602*939
        wx.getImageInfo({
          src: img1,
          success: function(res1) {
            ctx.drawImage(res1.path, 32 * dp_, 35 * dp_, 265 * dp_, 193 * dp_);
            wx.getImageInfo({
              src: img2,
              success: function(res2) {
                ctx.drawImage(res2.path, 304 * dp_, 35 * dp_, 265 * dp_, 193 * dp_);
                wx.getImageInfo({
                  src: img3,
                  success: function(res3) {
                    ctx.drawImage(res3.path, 32 * dp_, 233 * dp_, 265 * dp_, 193 * dp_);
                    wx.getImageInfo({
                      src: img4,
                      success: function(res4) {
                        ctx.drawImage(res4.path, 304 * dp_, 233 * dp_, 265 * dp_, 193 * dp_);
                        wx.getImageInfo({
                          src: adrtagbg,
                          success: function(res5) {
                            ctx.drawImage(res5.path, 32 * dp_, 545 * dp_, 124 * dp_, 44 * dp_);
                            // 面积
                            ctx.setFontSize(10);
                            ctx.setFillStyle('#fff');
                            ctx.fillText(area, (32 + 62 - area.length * 8) * dp_, 575 * dp_);
                            ctx.stroke();
                            wx.getImageInfo({
                              src: adrtagbg,
                              success: function(res6) {
                                ctx.drawImage(res6.path, 180 * dp_, 545 * dp_, 124 * dp_, 44 * dp_);
                                // 附加条件
                                ctx.setFontSize(10);
                                ctx.setFillStyle('#fff');
                                ctx.fillText(adrtag, (180 + 62 - area.length * 8) * dp_, 575 * dp_);
                                ctx.stroke();
                                wx.getImageInfo({
                                  src: adrtagbg,
                                  success: function(res7) {
                                    ctx.drawImage(res7.path, 325 * dp_, 545 * dp_, 124 * dp_, 44 * dp_);
                                    // 装修程度
                                    ctx.setFontSize(10);
                                    ctx.setFillStyle('#fff');
                                    ctx.fillText(decoration, (325 + 62 - area.length * 8) * dp_, 575 * dp_);
                                    ctx.stroke();
                                    wx.getImageInfo({
                                      src: imglogo,
                                      success: function(res8) {
                                        ctx.drawImage(res8.path, 212 * dp_, 622 * dp_, 178 * dp_, 178 * dp_);
                                        // 租金
                                        ctx.setFontSize(14);
                                        ctx.setFillStyle('#FF0000');
                                        ctx.fillText(rent, 35 * dp_, 470 * dp_);
                                        ctx.stroke();
                                        // 房源--户型，名称，租住方式，楼层
                                        ctx.setFontSize(14);
                                        ctx.setFillStyle('#1A1A1A');
                                        ctx.fillText((estatename + mode + layout + floor), 35 * dp_, 510 * dp_);
                                        ctx.stroke();
                                        ctx.draw();
                                        // 图片绘画完成
                                        wx.canvasToTempFilePath({
                                          canvasId: 'mycanvas',
                                          success: function(res_) {
                                            wx.saveImageToPhotosAlbum({
                                              filePath: res_.tempFilePath,
                                              success(result) {
                                                wx.hideLoading();
                                                _this.setData({
                                                  shareModal: false
                                                });
                                                wx.showToast({
                                                  title: '图片保存成功',
                                                  icon: 'success',
                                                  duration: 2000,
                                                  mask: true,
                                                })
                                              }
                                            })
                                          }
                                        }, this)
                                      }
                                    });
                                  },
                                });
                              },
                            });
                          },
                        });
                      }
                    });
                  }
                })
              },
            })
    
          }
        });
      },

效果图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70]: /images/20211211/2a74a2c856634cd7bffbea22a16bb510.png