Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
2.6k views
in Technique[技术] by (71.8m points)

小程序canvas画的这张图片比例不对怎么回事?

一张图片宽高是571*799 想把这张图片画到白色背景上 宽度550 高度自适应 高度计算的也没错 可是为什么画出来的这张图片比例不对呢

<image class="canvas3" style="width: 550rpx;height:{{height}}rpx" src='{{prurl}}'></image>
wx.getImageInfo({
      src: 'http://www.11-bian.com/tmpImg/ca48124988dcd8cf539887f452b0ea1e.jpeg', 
      success: function (res) {
        that.setData({
          canvasCover: res.path
        })
      }
})
    const canvasCtx = wx.createCanvasContext('shareCanvas');
    let percent = 799/571
    let height = parseInt(percent*550)+278
    that.setData({
      height: height
    })
    canvasCtx.fillStyle = 'white';
    canvasCtx.fillRect(0,0,550,height)//绘制白色背景
    canvasCtx.drawImage(that.data.canvasCover, 0, 0, 550, parseInt(550*percent)) //绘制图片
    canvasCtx.draw();
    setTimeout(function() {
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: 550,
        height: height,
        canvasId: 'shareCanvas',
        success:res=>{
          that.setData({
            prurl: res.tempFilePath,
            hidden: false
          });
          
          wx.hideLoading();
        },
        fail: function(res) {
          console.log(res);
          wx.hideLoading();
        }
      });
    }, 2000);

image


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

你<canvas/>的宽高怎么设的


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

1.4m articles

1.4m replys

5 comments

57.0k users

...