小程序canvas绘制图片

在生成图片时遇到以下问题：

canvas绘制文字不能换行，如果文字的长度大于你所定的宽度的话，文字会超出你所定宽度，或者文字会挤压变形

解决方法：
（1）截取一定的文字长度，多余的文字省略
（2）通过技术来使文字换行，我们的需求就是文字换行。

微信小程序canvas画图必须用本地的图片路径，所以要把图片下载下来存为临时路径再绘制图片。微信提供了个api可用：wx.downloadFile(OBJECT)和wx.getImageInfo(OBJECT)。都需先配置download域名才能生效。

这就涉及到一个问题：封面图是从自己的服务器请求的，所以可以下载并得到临时路径，但是用户的头像的域名地址是腾讯的，而微信公众平台的域名配置是不可能配置别人的域名的，所以是获取不到用户头像的临时路径，解决办法就是绘制时小程序端向服务器请求用户头像，服务器端向腾讯请求把用户头像下载下来临时存储，然后发给小程序端。

作者：jiuyucha
链接：https://www.jianshu.com/p/5f96a4f91b9c
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

index.html

<view catchtap='shareFrends'>  //  点击生成图片事件
    <view><image src='/imgs/topic-share-friends.png' mode='aspectFill'></image></view>
    <view class='share-text'>朋友圈</view>
</view>

<view class='share-modal-bg' wx:if='{{showModal}}' bindtap='hideModal'>
  <view class='canvas-wrap' catchlongpress='saveImg' catchtap='0'> //长按保存图片事件
     <view><image src='{{shareImg}}' class='share-img'></image></view> // 显示出生成图片的容器
     <view class='share-img-tips'>长按图片保存至相册，快去分享吧！</view>
  </view>
</view>
//画布
<canvas style="width: 286px;height: 415px;background:red;position: fixed;top: -10000px;" canvas-id="shareFrends"></canvas>

ps:  canvas 大小一般是生成图片的两倍 而且canvas画出来的图有点丑，所以还是让canvas看不到比较好

index.js

shareFrends() {
    wx.showLoading({
      title: '图片生成中',
    })
    let that = this;
    const detail = this.data.detail;   // 海报图的的一些信息，从后台请求的数据
    let avatar;// 头像
    const post_cover = detail.post_cover || '../../imgs/cars.png'; //没有封面图时设置默认图片
    wx.$.fetch('api/setLocalAvatar', { //请求头像的地址
      method: 'post',
      hideLoading: true,
      showLoading: true,
      data: {
        api_token: wx.getStorageSync('token'),
        member_id: detail.member.member_id,
      }
    }).then(res => {
      avatar = res.data.url;
      wx.getImageInfo({   // 根据头像地址下载头像并存为临时路径
        src: avatar,
        success: res => {
          that.setData({
            avatar: res.path
          })
          wx.getImageInfo({ // 封面图
            src: post_cover,
            success: res => {
              //如果是本地图片的话此api返回的路径有问题，所以需要判断是否是网络图片
              if (!/^https/.test(post_cover)) {
                res.path = post_cover
              };
              that.setData({
                cover: res.path,
                coverWidth: res.width,  //封面图的宽
                coverHeight: res.height //封面图的高
              })
              wx.$.fetch('api/getQrCode', { //获取二维码图片
                method: 'post',
                hideLoading: true,
                showLoading: true,
                data: {
                  path: 'pages/topicdetail/index?id=' + this.data.id,
                  post_id: this.data.id,
                  width: 340
                }
              }).then(res => {
                wx.getImageInfo({
                  src: res.data.path,
                  success: res => {
                    that.setData({
                      erweima: res.path
                    })

                    that.createdCode() // 根据以上信息开始画图
                    //canvas画图需要时间而且还是异步的，所以加了个定时器
                    setTimeout(() => {
                     // 将生成的canvas图片，转为真实图片
                      wx.canvasToTempFilePath({
                        x: 0,
                        y: 0,
                        canvasId: 'shareFrends',
                        success: function (res) {
                          
                          let shareImg = res.tempFilePath;
                          that.setData({
                            shareImg: shareImg,
                            showModal: true,
                            showShareModal: false
                          }
                          wx.hideLoading()
                        },
                        fail: function (res) {
                        }
                      })
                    }, 500)
                  }
                })
              })
            },
            fail(err) {
              console.log(err)
            }
          })
        }
      })
    })
  },



//开始绘图
createdCode() {
    let that = this;
    const detail = this.data.detail;
    const ctx = wx.createCanvasContext('shareFrends');    //绘图上下文
    const date = new Date;
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    const time = year + '.' + month + '.' + day;   // 绘图的时间
    const name = detail.post_title;     //绘图的标题  需要处理换行
    const coverWidth = this.data.coverWidth; // 封面图的宽度 裁剪需要
    const coverHeight = this.data.coverHeight; // 封面图的宽度 裁剪需要
    let pichName = detail.member.name;  //用户昵称
    const explain = 'Hi,我想分享给你一条资讯猛料!';
    // 截取昵称 超出省略。。。
    if (pichName.length > 16) {   //用户昵称显示一行 截取
      pichName = pichName.slice(0, 9) + '...'
    };
    // 绘制logo
    ctx.save()
    // canvas 背景颜色设置不成功，只好用白色背景图
    ctx.drawImage('/imgs/canvas-bg.jpg', 0, 0, 286, 480);  
    //绘制logo
    ctx.drawImage('/imgs/share-logo.png', 140, 25, 128, 34);

    // 绘制时间
    ctx.setFontSize(12);
    ctx.setTextAlign('right');
    const metrics = ctx.measureText(time).width;   //时间文字的所占宽度
    ctx.fillText(time, 266, 78, metrics + 5);
    // 绘制 封面图并裁剪（这里图片确定是按100%宽度，同时高度按比例截取，否则图片将会变形）
    // 裁剪位置  图片上的坐标  x:0 ,y: (coverHeight - 129 * coverWidth / 252) / 2
    // 图片比例 255:129   图片宽度按原图宽度即coverWidth  图片高度按129*coverWidth/252
    // 开始绘图的位置  16, 94
    // 裁剪框的大小，即需要图片的大小 252, 129
    ctx.drawImage(this.data.cover, 0, (coverHeight - 129 * coverWidth / 252) / 2, coverWidth, 129*coverWidth/252 , 16, 94, 252, 129);

    
    // 绘制标题
    ctx.font = 'normal bold 14px sans-serif';
    ctx.setTextAlign('left');
    const nameWidth = ctx.measureText(name).width;
    // 标题换行  16是自已定的，为字体的高度
    this.wordsWrap(ctx, name, nameWidth, 252, 16, 252, 16);  
    // 计算标题所占高度
    const titleHight = Math.ceil(nameWidth / 252) * 16;  
    // 绘制头像和昵称
    ctx.arc(36, 268 + titleHight, 20, 0, 2 * Math.PI);
    ctx.clip()
    ctx.drawImage(this.data.avatar, 16, 248 + titleHight, 40, 44);
    ctx.restore();
    ctx.font = 'normal normal 14px sans-serif';
    ctx.setTextAlign('left');
    ctx.setFillStyle('#bbbbbb')
    ctx.fillText(pichName, 70, 270 + titleHight);
    // 二维码描述  及图片
    ctx.setStrokeStyle('#eeeeee');
    ctx.strokeRect(16, 300 + titleHight, 252, 80);
    ctx.setFillStyle('#333333')
    ctx.fillText(explain.slice(0, 11), 30, 336 + titleHight);   // 描述截取换行
    ctx.fillText(explain.slice(11), 30, 358 + titleHight);

    ctx.drawImage(this.data.erweima, 194, 308 + titleHight, 44, 44);
    ctx.setFontSize(10);
    ctx.setFillStyle('#bbbbbb')
    ctx.fillText('长按扫码查看详情', 175, 370 + titleHight);
    // ctx.setFillStyle('#f7f7f7')
    // ctx.fillRect(0, 400 + titleHight, 286, 48)
    // ctx.setFontSize(14);
    // ctx.setFillStyle('#bbbbbb')
    // ctx.setTextAlign('center');
    // ctx.fillText('长按图片保存至相册，并分享至朋友圈！', 142, 430 + titleHight);

    ctx.draw()


  },


  //文字换行处理
  // canvas 标题超出换行处理
  wordsWrap(ctx, name, nameWidth, maxWidth, startX, srartY, wordsHight) {
    let lineWidth = 0;
    let lastSubStrIndex = 0;
    for (let i = 0; i < name.length; i++) {
      lineWidth += ctx.measureText(name[i]).width;
      if (lineWidth > maxWidth) {
        ctx.fillText(name.substring(lastSubStrIndex, i), startX, srartY);
        srartY += wordsHight;
        lineWidth = 0;
        lastSubStrIndex = i;
      }
      if (i == name.length - 1) {
        ctx.fillText(name.substring(lastSubStrIndex, i + 1), startX, srartY);
      }
    }
  },



 // 长按保存事件
saveImg() {
    let that = this;
    // 获取用户是否开启用户授权相册
    wx.getSetting({
      success(res) {
        // 如果没有则获取授权
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {
              wx.saveImageToPhotosAlbum({
                filePath: that.data.shareImg,
                success() {
                  wx.showToast({
                    title: '保存成功'
                  })
                },
                fail() {
                  wx.showToast({
                    title: '保存失败',
                    icon: 'none'
                  })
                }
              })
            },
            fail() {
            // 如果用户拒绝过或没有授权，则再次打开授权窗口
            //（ps：微信api又改了现在只能通过button才能打开授权设置，以前通过openSet就可打开，下面有打开授权的button弹窗代码）
              that.setData({
                openSet: true
              })
            }
          })
        } else {
          // 有则直接保存
          wx.saveImageToPhotosAlbum({
            filePath: that.data.shareImg,
            success() {
              wx.showToast({
                title: '保存成功'
              })
            },
            fail() {
              wx.showToast({
                title: '保存失败',
                icon: 'none'
              })
            }
          })
        }
      }
    })
  },

  //  授权弹窗
//  wxml
<view class='open-seting-bg' wx:if='{{openSet}}' catchtap='cancleSet'>
  <view class='open-set-inner'>
    <view class='set-title'>是否打开授权设置？</view>
    <view class='btn-openset'>
      <view catchtap='cancleSet'>取消</view>
          <view>
              <button open-type='openSetting' class='button-style' catchtap='cancleSet'>确定</button>
          </view>
    </view>
  </view>
</view>

//wxss
.open-seting-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
}

.btn-openset {
  display: flex;
  justify-content: space-around;
  font-size: 30rpx;
  margin-top: 60rpx;
}

.set-title {
  font-size: 30rpx;
  margin-top: 40rpx;
}

.open-set-inner {
  width: 400rpx;
  height: 220rpx;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: #ffffff;
  padding: 30rpx;
}

.btn-openset > view:nth-child(1) {
  color: #919191;
}

.button-style {
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 0;
  font-size: 30rpx;
  line-height: 0;
  color: red;
}

button::after {
  border: 0;
}


   //js

  // 授权
  cancleSet() {
    this.setData({
      openSet: false
    })
  },

VirtuousIntro

发布了21 篇原创文章 · 获赞 3 · 访问量 5万+

私信关注

小程序canvas绘制图片

猜你喜欢