小程序图片旋转生成新的图片

最新推荐文章于 2024-08-28 13:47:43 发布

迷茫人生真的

最新推荐文章于 2024-08-28 13:47:43 发布

阅读量1.1k

点赞数 2

分类专栏：小程序

本文链接：https://blog.csdn.net/wenfu814/article/details/109441976

版权

小程序专栏收录该内容

9 篇文章 0 订阅

订阅专栏

结构中想写一个 canvas标签

 <!-- 旋转图片canvas -->
  <canvas canvas-id="camCacnvs" class="canvsborder"></canvas>

//绘制canvas 旋转图片
    const ctx = wx.createCanvasContext('camCacnvs');
    ctx.translate(0, 200);
    ctx.rotate(-90 * Math.PI / 180)
    ctx.drawImage(that.data.src, 0, 0, 228, 369)
    ctx.draw()

//将canvas转为图片 
    wx.canvasToTempFilePath({
      canvasId: 'camCacnvs',
      success: function (res) {
          var tempFilePath = res.tempFilePath;
          that.setData({
            roteSrc:tempFilePath
          })
          //获取到旋转绘制的图片 把旋转的图片上传到服务器
          //测试接口   app.globalData.apiUrl+'takeIdCardFront'
          }

.canvsborder{
  width: 300px;
  height: 200px;
  border: 1px solid #333;
  position: absolute;
  top: 0;
  left: 10000rpx;
  left: 0;
  z-index: 999;
  opacity: 0;
}