公告列表
公告列表
收藏
回答

canvas 2d新版接口 绘图 图片位置偏移bug

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

使用新版canvas2D 绘图 drawImage方法，ios端绘图不能从(0,0)点开始画图。

测试环境： iPad mini4 系统 ios13.5.1 微信版本 7.0.14

测试用图

演示效果：

上方灰色区域为 新版canvas接口，

下方为旧版接口，实现同样功能。

正常的情况 应该是从（0,0）点开始绘图。

代码片段

https://developers.weixin.qq.com/s/O5BsQ6m472jx

说明：点击灰色区域上传图片，请使用测试用图


关键代码截图


https://developers.weixin.qq.com/s/O5BsQ6m472jx
回答关注问题邀请回答
收藏

1 个回答

  • 纸玫瑰
    纸玫瑰
    2020-07-25

    const canvas = res[0].node

          const ctx = canvas.getContext('2d')


          const width = res[0].width

          const dpr = wx.getSystemInfoSync().pixelRatio

          canvas.width = width * dpr

          canvas.height = height * dpr

          ctx.scale(dpr, dpr)

    1.抓取到的canvas 为PX ,要*像素比

    2.ctx 要使用scale(dpr,dpr),进行缩放到正常大小

    3.感觉你的imgw 和imgh 要 * dpr

    👇 -------如果感觉回答有用,请点击有用按钮,让答案帮助更多的人

    2020-07-25
    有用
    回复 8
    • 李岩
      李岩
      2020-07-25
      看代码，my_ctx.scale(dpr, dpr) ，有做缩放，没有用
      2020-07-25
      赞
      回复
    • 纸玫瑰
      纸玫瑰
      2020-07-25回复李岩
      canvas.width= res[0].width *dpr     不要自作聪明*屏幕宽度   自己找问题把  代码都给你看了
      2020-07-25
      赞
      回复
    • 李岩
      李岩
      2020-07-25回复纸玫瑰
      大佬，愿闻其详，canvas的初始宽 需要设定屏幕宽度，res[0].width取出来的默认值没用啊
      2020-07-25
      赞
      回复
    • 李岩
      李岩
      2020-07-25回复纸玫瑰
      测试过了，还是不行，ios 绘图没有从起点开始
      2020-07-25
      赞
      回复
    • 纸玫瑰
      纸玫瑰
      2020-07-25回复李岩
      // 初始化
        initCanvasNew:function(imgW,imgH){
          var that=this;
          ////////////////修改/////////////////////
          const dpr = wx.getSystemInfoSync().pixelRatio;
          that.setData({
            canvasDisplayW:imgW*dpr,
            canvasDisplayH:imgH*dpr
          })
          ////////////////修改/////////////////////
          const query = wx.createSelectorQuery()
          query.select('#myCanvas')
            .fields({ node: true, size: true })
            .exec((res) => {
              const width = res[0].width
              const height = res[0].height
              // 缩放
              my_ctx.scale(dpr, dpr)
              myCanvas = res[0].node;
              my_ctx = myCanvas.getContext('2d');
              my_dpr=dpr;
      ////////////////修改/////////////////////
              myCanvas.width = my_dpr*width;
              myCanvas.height = my_dpr*height;
                ////////////////修改/////////////////////
              console.log("my_dpr:"+my_dpr)
              const windowWidth= wx.getSystemInfoSync().windowWidth;
              my_windowWidth=windowWidth;
              let imgRatio=imgH/imgW;
              console.log("res[0]")
              console.log(res[0])
              that.setData({
                canvasDisplayW:windowWidth,
                canvasDisplayH:windowWidth * imgRatio,
                canvasw:imgW,
                canvash:imgH,
              })
              console.log("myCanvas.W H :"+myCanvas.width+" "+myCanvas.height)
              // 绘图
              let bigImg=myCanvas.createImage();
              bigImg.src=my_img;
              bigImg.onload = (e) => {
                my_ctx.drawImage(bigImg, 0, 0);
              }
              bigImg.onerror = (e) => {
                console.error('创建大图错误')
                console.error(e)
              }
            })
        },




      看看这样行么?
      2020-07-25
      赞 1
      回复
    查看更多(3)
请 登录 后发表内容
相关问题
相关文档
问题标签
canvas位置上传图片代码drawimage