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

如果您使用canvas进行图片压缩并且发现图片“不见了”,有几种可能的原因。请参考以下解决方案:

1. 检查代码是否正确:请确保您的代码正确地实现了图像压缩,并且没有不必要的错误或逻辑问题。您可以在代码中添加调试语句,以便在运行时跟踪代码。

2. 检查图片路径:压缩后的图像是否保存在正确的位置?如果没有,则可能是文件路径设置不正确或图像文件名设置不正确。您可以检查路径并修改代码以确保正确保存图像。

3. 检查压缩质量:压缩质量设置可能会导致图像丢失。请确保压缩质量设置正确,并且不会导致图像质量明显下降。您可以尝试降低压缩质量并检查结果。

4. 检查浏览器版本:某些浏览器版本可能会对canvas进行优化,从而可能会导致图像丢失。请确保您使用最新的浏览器版本,并且清除浏览器缓存来确保加载正确的文件。

如果您仍然无法找到图像,请参考其他开发者社区中有关canvas图片丢失的解决方案。

微信小程序图片压缩有三种方法,一种是使用官方提供的接口 (Object object) ;一种是通过压缩图片的大小,利用canvas重绘来得到压缩图片;最后一种安装第三方图片压缩包。

由于第一种方法网上很多人说压缩不明显或者失效,所以选择使用canvas重绘来实现图片压缩。同时,该种方法可以控制图片的最大尺寸,保持上传图片大小尺寸相差不多。在我们的学生节晚会小程序中,屏幕显示图片会比较美观一致。

1. 通过 接口选择相机图片

2. 通过 接口获取图片信息(长宽,类型)

3. 计算压缩比例和最终图片的长宽

5. 通过 接口将画布内容导出为图片并获取图片路径

wxml 文件

在文件末尾插入 canvas 组件,通过设置left和top值确保图片不会显示在可视范围内。

一定要设置 canvas-id,这是canvas绘图和导出图片必备的属性。

js 文件

设置与页面绑定的数据:canvas的大小,也是压缩后图片的大小

1. 将画布内容导出为图片时,指定destWidth和destHeight为压缩后图片的大小。这里遇到过玄学bug,不指定的话,有时候图片不会压缩到规定的大小。

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

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

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