收藏
回答

CanvasContext.drawImage真机不显示图片?

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

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

对比图:



回答关注问题邀请回答
收藏

3 个回答

  • 殿春
    殿春
    2020-07-13

    答主这个解决了吗,我这里工具都裁剪不了

    2020-07-13
    有用
    回复
  • 疯狂的小辣椒
    疯狂的小辣椒
    2019-08-14

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

    2019-08-14
    有用
    回复 4
    • 2019-08-14

      iphonexr  微信7.05   ios12.4


      2019-08-14
      回复
    • 疯狂的小辣椒
      疯狂的小辣椒
      2019-08-14回复

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

      2019-08-14
      回复
    • 2019-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);

      }

      }

      },


      2019-08-14
      回复
    • 疯狂的小辣椒
      疯狂的小辣椒
      2019-08-14回复

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

      2019-08-14
      回复
  • 刘福刚
    刘福刚
    2019-08-14
    同意。
    2019-08-14
    有用
    回复
登录 后发表内容
问题标签