收藏
回答

CanvasContext.drawImage真机不显示图片?

开发工具上使用CanvasContext.drawImage 括号9个参数那种方法:

在开发工具上可以正常裁剪图片  真机上打开调试模式也可以正常裁剪  但是关掉调试就不行了  图片变形

对比图:



最后一次编辑于  08-14  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

2 个回答

  • 社区技术运营专员-娇华
    社区技术运营专员-娇华
    08-14

    你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    08-14
    赞同
    回复 4
    • 兮兮
      兮兮
      08-14

      iphonexr  微信7.05   ios12.4


      08-14
      回复
    • 社区技术运营专员-娇华
      社区技术运营专员-娇华
      08-14回复兮兮

      代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)给下

      08-14
      回复
    • 兮兮
      兮兮
      08-14回复社区技术运营专员-娇华


      _this.data.pic_url:前一个页面传过来的服务器图片地址

      path:返回下载下来的图片地址

      ----------------------------------------------

      _this.downloadPicImg(_this.data.pic_url, function (path) {

      wx.getImageInfo({

      src: path,

      success: function success(res) {

      _this.setData({

      imgWidth: res.width,

      imgHeight: res.height

      })

      }

      })

      _this.drawTopPicImg(path)

      })

      //裁剪图片方法

      drawTopPicImg: function (wxShareTopImageUrl) {

      console.log("绘制顶部bananer");

      console.log("wxShareTopImageUrl=", wxShareTopImageUrl);

      let context = this.canvas;

      let headX = this.getCanvasX(0);

      let headY = this.getCanvasY(0);


      let w = this.data.imgWidth  // 图片的宽

      let h = this.data.imgHeight //图片的高

      let headWidth = this.getCanvasX(660);  //展示区域的宽

      let headHeight = this.getCanvasY(400);  //展示区域的高

      // canvas与图片的宽高比

      var dw = headWidth / w

      var dh = headHeight / h

      // 裁剪图片中间部分

      if (w > headWidth && h > headHeight || w < headWidth && h < headHeight) {

      if (dw > dh) {

      console.log('1')

      console.log(wxShareTopImageUrl, 0, (h - headHeight / dw) / 2, w, headHeight / dw, headX, headY, headWidth, headHeight)

      context.drawImage(wxShareTopImageUrl, 0, (h - headHeight / dw) / 2, w, headHeight / dw, 0, 0, headWidth, headHeight)

      context.draw(true);

      } else {

      console.log('2')

      context.drawImage(wxShareTopImageUrl, (w - headWidth / dh) / 2, 0, headWidth / dh, h, 0, 0, headWidth, headHeight)

      context.draw(true);

      }

      }

      },


      08-14
      回复
    • 社区技术运营专员-娇华
      社区技术运营专员-娇华
      08-14回复兮兮

      麻烦按照这里的格式https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

      08-14
      回复
  • 刘福刚
    刘福刚
    08-14
    同意。
    08-14
    赞同
    回复
问题标签