小程序的drawImage方法,不支持安卓
发布于 5 年前 作者 xiuyingchang 19371 次浏览 来自 问答

小程序,调用 canvas 的 drawImage(sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 方法,发现在 ios 显示没问题,在安卓就显示出错。

wxml:

<canvas style=“width: 300px;height:300px;border: 1px solid;” disable-scroll=“true” canvas-id=“myCanvas” />

js:

const ctx = wx.createCanvasContext(‘myCanvas’);

wx.chooseImage({

    success: (res) => {

        ctx.drawImage(res.tempFilePaths[0], 50, 50, 100, 100, 0, 0, 150, 100)

        ctx.draw()

    }

})

最终显示的结果如下:

ios显示正确:

安卓显示错误:

注:我上传的图片是同一张。

希望官方尽快解释一下,谢谢啊!~~

10 回复

我也遇到这个问题了 ,在电脑调试是可以的  安卓上面就不行  图片截取区域变小了 版本是2.2.0

希望官方赶紧给个回复啊!~~~

官方能不能来个看得懂问题的,出来给个答案呢。。

有问题么    图片来源  //www.baidu.com/img/bd_logo1.png  

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

同遇到这个问题,希望官方尽快解决!

android 上是有这个问题。

 - -||     我说的是 drawImage 的这个用法:drawImage(imgPath, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) ,不是说 drawImage 这个方法的其他用法有问题。。。


麻烦直接用这段代码来测试吧,记得用安卓机,扫码开发者工具的 “预览“二维码,谢谢了!


wxml:

<canvas style="width: 300px;height:300px;border: 1px solid;" disable-scroll="true" canvas-id="myCanvas" />


js:

onLoad: function (opt) {

    const ctx = wx.createCanvasContext('myCanvas');

    wx.chooseImage({

        success: (res) => {

            ctx.drawImage(res.tempFilePaths[0], 505010010000150100)

            ctx.draw()

        }

    });

}

额。。。建议您先去试一下用用小程序的 drawImage(sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) ,图片用网络图片或者 chooseImage 方法选择的图片,来绘制到 canvas。然后分别用 苹果和安卓手机真机测试一下。否则,建议您不要胡乱猜测,谢谢。

现在小程序的 drawImage(sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 用法,只有绘制打包在代码包里面的图片,才能对安卓机起效,对于网络图片,或者用户上传的图片都是不行的。

回到顶部