收藏
回答

canvasToTempFilePath部分ios手机导出图片裁剪?

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug canvasToTempFilePath 微信iOS客户端 8.0.18 2.16.1

真机截图(正常):

iphone 7中截图(图片发生了裁剪):


核心代码片段(具体见代码片段:https://developers.weixin.qq.com/s/fUJ4d3m17UxT):

<view class="page">
    <canvas
      type="2d"
      style="width:{{canvasWidth}}px;height:{{canvasHeight}}px;"
      id="myCanvas"
      class="myCanvas"
    ></canvas>
    <image src="{{imageSrc}}" mode="widthFix"></image>
</view>


const app = getApp()

Page({
  data: {
    imageSrc: "",
    canvasWidth: '',
    canvasHeight: '',
    imageSrc:""
  },
  onLoad: async function () {
    let imageSrc = './1.jpg';
    let imageInfo = await this.getImageInfo(imageSrc);
    let r = 2.165914247136675;
    let canvasWidth = Math.abs(imageInfo.width / r);
    let canvasHeight = Math.abs(imageInfo.height / imageInfo.width*canvasWidth);
    this.setData({
      canvasWidth,
      canvasHeight
    },async ()=>{
      let {
        canvas,
        context
      } = await this.initCanvas('#myCanvas', 1);
      let img = await this.createImage(canvas, imageSrc);
      context.drawImage(img00, imageInfo.width, imageInfo.height, 00, canvasWidth, canvasHeight)
  
      let src = await wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width:canvasWidth,
        height:canvasHeight,
        destWidth:canvasWidth,
        destHeight:canvasHeight,
        canvas,
        success:(res)=>{
          this.setData({
            imageSrc:res.tempFilePath
          })
        }
      })
    })
  },
  getImageInfo(src) {
    return new Promise(async (resolve, reject) => {
      wx.getImageInfo({
        src,
        success: (result) => {
          resolve(result);
        },
        fail: (e) => {
          reject(e);
        }
      });
    });
  },
  initCanvas(selector, dpr) {
    return new Promise((resolve, reject) => {
      wx.createSelectorQuery()
        .select(selector)
        .fields({
          node: !0,
          size: !0
        })
        .exec((res) => {
          let canvasWidth = res[0].width;
          let canvasHeight = res[0].height;
          let canvas = res[0].node;
          let context = canvas.getContext('2d');
          canvas.width = canvasWidth * dpr;
          canvas.height = canvasHeight * dpr;
          context.scale(dpr, dpr);
          resolve({
            context,
            canvas,
            canvasWidth,
            canvasHeight
          });
        });
    });
  },
  createImage(ctxNode, imageSrc) {
    return new Promise((resolve, reject) => {
      const img = ctxNode.createImage();
      img.src = imageSrc;
      img.onload = () => {
        resolve(img);
      };
    });
  }
})


drawImage这一步是正常的,就是canvasToTempFilePath的时候发生了裁剪
最后一次编辑于  2022-02-14
回答关注问题邀请回答
收藏

2 个回答

  • |
    2022-03-13

    楼主解决了吗?怎么解决的

    2022-03-13
    有用
    回复 2
    • L
      L
      2022-03-15
      已解决 因为canvas不支持动态设置尺寸,重新设置宽高之后,重新初始化canvas即可。上诉代码中canvas标签中添加一个wx:if="{{canvasWidth}}"即可
      2022-03-15
      4
      回复
    • Maikk
      Maikk
      2022-05-19回复L
      太感谢了!!!!!
      2022-05-19
      回复
  • Listen
    Listen
    2022-02-14

    initCanvas 应该传 wx.getSystemInfoSync().pixelRatio 而不是固定值 1

    

    2022-02-14
    有用
    回复 6
    • L
      L
      2022-02-14
      我改了之后,用iphone 7测试还是不行,其他ios手机应该也不行吧。另外,这个参数只影响canvas的缩放比例,和导出图片裁剪没关系啊
      2022-02-14
      回复
    • Listen
      Listen
      2022-02-14回复L
      这两个宽高应该保持一直
      2022-02-14
      回复
    • L
      L
      2022-02-14
      我代码里面设置为1,比例就是一样的啊。而且这个比例只是设置canvas缩放比例,主要用于输出高清图。和我这个问题没关系啊
      2022-02-14
      回复
    • Listen
      Listen
      2022-02-14回复L
      2022-02-14
      回复
    • L
      L
      2022-02-14回复Listen
      方便的话加我微信July_lib沟通,我看了并没有超过canvas的宽高限制,这个dpr只是缩放比例。示例代码这样写,是为了保证高清图。而且我上面也说了,就算dpr改为默认的pixelRatio。还是有着问题
      2022-02-14
      回复
    查看更多(1)
登录 后发表内容