收藏
回答

canvasContext.drawImage 画图会缩放的问题

框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 Bug canvasContext.drawImage 客户端 Android 6.7.0 2.2.1

用 canvasContext.drawImage 的 drawImage(sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 这种方式画图片时,如果图片的宽度是高度的2倍以上,或者高度是宽度的2倍以上,比如这种图片 




会有问题,画出来的大小不是 dWidth 和 dHeight 这么大,但是在微信开发者工具里是正常的,手机上显示不正常。


代码

js


Page({

data: {

maxWidth: 315,

},

oneImg: function(e) {

var that = this;

var maxWidth = that.data.maxWidth;

var ctx = wx.createCanvasContext('myCanvas')


// 获取点击时 x 轴的值

var x = e.changedTouches[0].x;

// 获取点击时 y 轴的值

var y = e.changedTouches[0].y;


// 选择图片

wx.chooseImage({

success: function(res) {

var fileUrl = res.tempFilePaths[0];

wx.getImageInfo({

src: res.tempFilePaths[0],

success: function(res) {

var width = res.width;

var height = res.height;

//  取短边为正方形 canvas的宽

var sWidth = width > height ? height : width;

ctx.drawImage(fileUrl, 0, 0, sWidth, sWidth, 0, 0, maxWidth, maxWidth);

ctx.draw(true)

}

})

}

})

},

})



wxss


page {

background: #93E0FE;

}


.container {

width: 315px;

height: 315px;

margin: 20rpx auto;

background: #fff;

}



wxml


<canvas class='container' bindtouchend="oneImg" canvas-id="myCanvas"></canvas>

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

4 个回答

  • Tummy
    Tummy
    2018-08-03

    已知问题,下个版本修复.

    2018-08-03
    有用
    回复
  • 白开水
    白开水
    2018-08-03

    这是 Android 上的一个 BUG,Android 上 drawImage 传入的尺寸一律都按物理像素计算,目前要规避这个 BUG,可以将尺寸和位置乘以 pixelRatio。

    let { pixelRatio } = wx.getSystemInfoSync()
    console.log(pixelRatio)
    ctx.drawImage(fileUrl, 0, 0, sWidth*pixelRatio, sWidth*pixelRatio, 0, 0, maxWidth*pixelRatio, maxWidth*pixelRatio);


    2018-08-03
    有用
    回复 4
    • 星空
      星空
      2018-08-03

      也就是说对于 宽高比 大于2的图片,需要和其他图片分开处理是吗?

      2018-08-03
      回复
    • 白开水
      白开水
      2018-08-03回复星空

      这个问题已经在正在灰度的 Android 6.7.2 上修复,请关注新版本下的表现。

      2018-08-03
      回复
    • Sxx
      Sxx
      2018-09-08回复白开水

      6.7.2 版本还是有问题

      这些机型在渲染图片时都还是会有缩小的问题。

      而且一些机型 drawImage 会在 sy + sHeight >= imageHeight 或 sx < 0 的时候 偶现渲染空白,测试会复现的机器包括 iPhone X,Smartisan T2

      2018-09-08
      回复
    • alphaair
      alphaair
      2018-09-30回复白开水

      6.7.2还是会以pixelRatio放大,机型:MIX 2S  MIUI10 Android 9。

      2018-09-30
      回复
  • 星空
    星空
    2018-07-30

    代码片段:wechatide://minicode/Seeoeimp7IeJ

    机型:小米5

    微信版本:6.7.0

    2018-07-30
    有用
    回复
  • 灵芝
    灵芝
    2018-07-30

    你好,请提供出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2018-07-30
    有用
    回复 1
    • 星空
      星空
      2018-08-01

      代码片段:wechatide://minicode/Seeoeimp7IeJ

      机型:小米5

      微信版本:6.7.0


      2018-08-01
      回复
登录 后发表内容