vue+apiclound + cropper.js 完成上传+裁剪+压缩图片

直接上代码,很多都有注释

思路:用apiclound 先拉起相机和相册 ,然后获取图片后,根据宽度(targetWidth 这个参数)进行压缩 ,使用cropper.js进行裁剪压缩后的图片。
最后获取裁剪的图片上传的服务器,拿到服务器返回的地址,在回显到本地预览。
可以把代码直接复制到本地,以一个组件的形式测试。
`






`

注意:我在测试的时候,没有弄清除targetWidth 他的压缩规则,看别人的帖子说值在800-1000比较正常,值越大越清晰。所以质量也会大一点,我设置到1000压缩效果还是很好的,基本大小控制在原图的四分之一左右,看着也不算模糊

你可能感兴趣的:(vue.js,apiclound,cropper.js,上传图片,javascript)