收藏
回答

调用canvas的drawImage之后,在canvas显示的图片,没有显示完全?

右面是drawImage之后的效果,图片没有在canvas上完全显示。

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

2 个回答

  • 社区技术运营专员-CJiang
    社区技术运营专员-CJiang
    06-04

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

    06-04
    有用
    回复 4
    • (-。-)
      (-。-)
      06-05
      我用的开发者工具调试,版本是V1.02.2004020
      代码如下:
      wx.getImageInfo({
            src: tempFiles[0].path,
            success(imgDetail) {
              console.log(imgDetail, "imgDetail");
              const sysInfo = wx.getSystemInfoSync();
              console.log( sysInfo.pixelRatio, " sysInfo.pixelRatio");
              var maxWidth = 1024 / sysInfo.pixelRatio; // 最大长度
              var maxHeight = 1024 / sysInfo.pixelRatio; // 最大高度
              var bili = imgDetail.width / imgDetail.height // 获取图片长高比例
              if (imgDetail.width > maxWidth || imgDetail.height > maxHeight) {
                if (imgDetail.width >= imgDetail.height) { // 长图或正方形
                  that.setData({
                    canvasWidth: maxWidth,
                    canvasHeight: Number(maxWidth / bili).toFixed(0),
                  });
                } else { // 高图
                  that.setData({
                    canvasWidth: Number(maxHeight * bili).toFixed(0),
                    canvasHeight: maxHeight,
                  });
                }
                console.log("canvasWidth", that.data.canvasWidth);
                console.log("canvasHeight", that.data.canvasHeight);
                var ctx = wx.createCanvasContext('attendCanvasId');
                ctx.drawImage(imgDetail.path, 0, 0, that.data.canvasWidth, that.data.canvasHeight);
                ctx.draw(false, () => {
                  setTimeout(() => {
                    wx.canvasToTempFilePath({
                      canvasId: 'attendCanvasId',
                      destWidth: that.data.canvasWidth,
                      destHeight: that.data.canvasHeight,
                      success(res) {
                        console.log(res, "success");
                        that.compressImg(res.tempFilePath) // 缩放成功后压缩
                      },
                      fail(res) {
                        console.log(res, "fail");
                        wx.showToast({ title: 'canvas缩放失败', icon: 'none' });
                      }
                    });
                  }, 200);
                });
              } else { // 无需进行缩放,直接掉起压缩方法
                that.data.canvasWidth = imgDetail.width
                that.data.canvasHeight = imgDetail.height
                that.compressImg(imgDetail.path)
              }
            }
          })
        },
      06-05
      回复
    • 发飙的蜗牛
      发飙的蜗牛
      06-05
      你需要等比缩放图片
      06-05
      回复
    • (-。-)
      (-。-)
      06-05回复发飙的蜗牛
      ctx.drawImage(imgDetail.path, 0, 0, that.data.canvasWidth, that.data.canvasHeight);
      调用这个方法,图片没有等比缩放,然后画在画布
      请求一下,等比缩放图片,这个api调用哪个?
      06-05
      回复
    • 社区技术运营专员-CJiang
      社区技术运营专员-CJiang
      06-05回复(-。-)
      你好,麻烦提供出现问题的能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
      06-05
      回复
  • Sven scum་ཅ་
    Sven scum་ཅ་
    06-05

    你没有设置画布大小哦

    这是画布的展示大小,建议用定位把它挪出显示文本流然后用图片展示

    这是这图片背景的大小如果是全屏就要改成上方设置的一样

    效果图就这样(隐私内容不给看)

    06-05
    有用
    回复 2
    • (-。-)
      (-。-)
      06-05
      谢谢回复,我在draw之前已经给canvas赋值了宽和高
       if (imgDetail.width > maxWidth || imgDetail.height > maxHeight) {
                if (imgDetail.width >= imgDetail.height) { // 长图或正方形
                  that.setData({
                    canvasWidth: maxWidth,
                    canvasHeight: Number(maxWidth / bili).toFixed(0),
                  });
                } else { // 高图
                  that.setData({
                    canvasWidth: Number(maxHeight * bili).toFixed(0),
                    canvasHeight: maxHeight,
                  });
                }
      06-05
      回复
    • Sven scum་ཅ་
      Sven scum་ཅ་
      06-05回复(-。-)
      因为画布大小超出的屏幕的大小所以看不到,要在绘制完成的时候转成图片在用图片的方式渲染出来
      06-05
      回复
登录 后发表内容
问题标签