收藏
回答

canvas导出的图片有部分没了

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug canvas 工具 6.7.2 2.1.0
wx.getImageInfo({
        src: "https://dewordapi.tongjideyu.com/share.png",
        success: res => {
          this.backgroundImagePath = res.path;
          const ctx = wx.createCanvasContext("myCanvas");
          let info = wx.getSystemInfoSync();
          console.log(info)
          ctx.drawImage(res.path, 0, 0, 750, 1206);
          ctx.setGlobalAlpha(1);
          ctx.setFontSize(95);
          ctx.setFillStyle("#AD89FF");
          ctx.setTextAlign("left");
          ctx.fillText("100", 297, 195);
          ctx.setFontSize(45);
          ctx.setTextAlign("center");
          ctx.fillText("122", 200, 423, 81);
          ctx.setFillStyle("#AD89FF");
          ctx.setTextAlign("center");
          ctx.setFontSize(45);
          ctx.fillText("99", 587, 423, 144);
          ctx.setFontSize(28);
          ctx.setFillStyle("white");
          let text =
            "Zollbeamtin,Flughafen,Chinese,Koffer,Moment,sprechen,Geschwister,chinesisch,Maschinenbau,wen(A),wen(A),Gemüse,Samstag,Rindfleisch,Augenblick,Lebensmittel";
          let metrics = ctx.measureText(text);
          // ctx.fillText("Zollbeamtin", 100, 295.5);
          ctx.setTextAlign("left");
          var startX = 104;
          var startY = 567;
          var lineWidth = 0;
          var lastSubStrIndex = 0;
          var linecount = 1
          for (var i = 0; i < text.length; i++) {
            lineWidth += ctx.measureText(text[i]).width;
            if (lineWidth > 571) {
              ctx.fillText(text.substring(lastSubStrIndex, i), startX, startY);
              lineWidth = 0;
              lastSubStrIndex = i;
              startY += 70;
            }
          }
          console.log('start to draw..')
          var pointer = this
          ctx.draw(true, function (res) {
            console.log('done...')
            wx.canvasToTempFilePath({
              canvasId: 'myCanvas',
              width: 750,
              height: 1206,
              destWidth: 750,
              destHeight: 1206,
              success: (res) => {
                let tempPath = res.tempFilePath
                pointer.imgSrc = tempPath
                wx.saveImageToPhotosAlbum({
                  filePath: tempPath,
                  success: (res) => {
                    console.log(res)
                    pointer.showMask = true
                  },
                  fail: (err) => {
                    console.log(err)
                  },
                })
              }
            })
          });
        }
      });

在canvas上画图,然后导出到相册,但是导出到相册的时候有一部分没了。

在iPhone 5上会出现这个问题,iPhone 6以及其它页面不会。



最后一次编辑于  2018-08-23
回答关注问题邀请回答
收藏

2 个回答

  • 卢霄霄
    卢霄霄
    2018-08-23

    iphone5屏幕宽度不足 750px?

    2018-08-23
    有用 1
    回复 13
    • 哆啦C梦
      哆啦C梦
      2018-08-23

      和屏幕的宽高是有关系的嘛?

      2018-08-23
      回复
    • 卢霄霄
      卢霄霄
      2018-08-23回复哆啦C梦

      比如,你canvas本来的宽高都是100%,假设手机屏幕的宽度只有700px。那你照着750px画的话,就有部分在画布外?我猜的~

      2018-08-23
      1
      回复
    • 卢霄霄
      卢霄霄
      2018-08-23回复哆啦C梦

      看了下 iphone5的宽度是 640px,我从你下面的图截640px的宽度,结果是


      由此推断,我说的可能是对的

      2018-08-23
      回复
    • 哆啦C梦
      哆啦C梦
      2018-08-23回复卢霄霄

      😁

      2018-08-23
      回复
    • 哆啦C梦
      哆啦C梦
      2018-08-23回复卢霄霄

      我在想是不是忽略这个机型了呢?

      2018-08-23
      回复
    查看更多(8)
  • 🚗🚕🚙🚌🚎🚒🚐🚚
    🚗🚕🚙🚌🚎🚒🚐🚚
    2018-08-24

    还有种方法,canvas隐藏,只显示生成的图片,canvas再大,都不会显示出来,而生成的img大小自己控制


    2018-08-24
    有用
    回复 9
    • 哆啦C梦
      哆啦C梦
      2018-08-24

      我也是试过这种思路的, 你的canvas隐藏是

      visibility:hidden;

      吗?我试过这样,但是图片上是空白。

      2018-08-24
      回复
    • 🚗🚕🚙🚌🚎🚒🚐🚚
      🚗🚕🚙🚌🚎🚒🚐🚚
      2018-08-24回复哆啦C梦

      不是,是overflow:hidden,我的canvas在保存图片按钮下面,让 『图片 + 按钮』的高度100vh,把canvas挤出去就行

      2018-08-24
      回复
    • 哆啦C梦
      哆啦C梦
      2018-08-24回复🚗🚕🚙🚌🚎🚒🚐🚚

      我目前是这么做的,overflow:hidden。

      我现在的这个canvas生成的图片,除了数字还有德语字母是动态的,其余的是我事先做好的一个图片,空白图片,所以事先就已经固定了大小。


      2018-08-24
      回复
    • 卢霄霄
      卢霄霄
      2018-08-24回复🚗🚕🚙🚌🚎🚒🚐🚚

      举手抢答!也可以绝对布局,把canvas放z-index在很底下~ 或者直接放到屏幕外面去,比如 left:800rpx

      2018-08-24
      回复
    • 🚗🚕🚙🚌🚎🚒🚐🚚
      🚗🚕🚙🚌🚎🚒🚐🚚
      2018-08-24回复卢霄霄

      canvas对z-index不太友好,left倒是可以

      2018-08-24
      回复
    查看更多(4)
登录 后发表内容