用 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回答
提交回答
  • 至过去的我

    2044人对此回答表示赞同

    我是未来的你,你现在是不是在年找寻小程序答案。你不要感觉诧异,给你来信原因,就是让你不在后悔。今天去学习如何推广小程序,相信......点击查看更多>
    发布于
  • 酥油茶

    18人对此回答表示赞同

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

    展开
    18
    0回复
    发布于 6年前

    评论(0)

    收起评论

  • Frederick富坚

    13人对此回答表示赞同

    王宇萧风代码片段:wechatide://minicode/Seeoeimp7IeJ

    展开
    13
    0回复
    发布于 6年前

    评论(0)

    收起评论

  • 北冥有鱼

    8人对此回答表示赞同

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

    展开
    8
    0回复
    发布于 6年前

    评论(0)

    收起评论

  • Axl木子

    6人对此回答表示赞同

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

    展开
    6
    3回复
    发布于 6年前

    评论(3)

    收起评论

    • Julia 2019-02-13 14:17

      6.7.2版本还是有问题

      回复
    • 左鹏 2019-02-15 09:55

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

      回复
    • Evan3 2019-02-17 23:14

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

      回复
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
咨询热线

13312967497

扫码添加业务即可随时咨询 还可领取小程序推广攻略

业务咨询: 13312967497
扫码咨询

扫码咨询套餐

回到顶部