canvas图片压缩安卓卡退问题-html2canvas绘制图片导致页面卡顿

手机拍照后用canvas压缩页面闪退

拍照后打水印用到了canvas对图片进行等比例缩放和压缩 并且打水印(网上的打水印方法),但是canvas对象加载图片的时候(调用drawImage方法)如果图片过大会导致canvas对象内存溢出,溢出的结果就是app重启或闪退。

解决方法:在拍照或者从相册获取图片的时候就压缩图片,我这里就限制了长宽最大1500px(应该还能再大点)

1 是的,因为当画布卡顿或崩溃时,画布上的内容还没有保存,导致内容丢失。

2 可能是因为画布上的内容太多或者使用的浏览器或设备性能不足,导致画布卡顿或崩溃。

3 如果你想避免这种情况,可以定期保存画布上的内容,也可以尝试使用更高性能的设备或浏览器,以提高画布的稳定性和流畅性。

当canvas没有图片时,绘制线条是非常流畅的,当图片一张又一张的被渲染时,再画线条就会出现明显的卡顿,可以多点几次渲染图片再画线条测试。

在我们应用中场景比代码复杂很多,大部分手机都会出现卡顿的现象,应用场景是这样的:

程序里涉及文档功能,PC端会把文档上传到服务端,服务端转化把各个元素转化成图片,假如是一个word文档经过转化,背景图就是一张比较大面积的图片,我做过一些测试,在小程序中面积越大的图片会导致绘制线条越卡顿,还测试了在原生H5中同一张图片在同一台设备中反复的绘制图像也不会导致绘制线条卡顿