基于vue的图片裁剪插件vue-cropper

我在网上找了很多关于vue裁剪图片的文章,demo都太长了,实在是太长了。有些还都看不懂,最后还是用了个大佬的demo,但是项目实践过程中还是有问题没解决。先介绍吧。效果是下面这样的,

基于vue的图片裁剪插件vue-cropper_第1张图片

我这里采用了4:3的固定比例进行裁剪,裁剪后的效果

基于vue的图片裁剪插件vue-cropper_第2张图片

但是裁剪后的图片路径是base64,超级长的路径,最终还是需要处理地址传给后端的,项目用oss处理图片,最终获得一个类似于aad68a8fd577464dbcdead2e9b20084d这个的后缀传给后端,base64的路径有几万几十万个字符,传给后端会炸的吧。

后来我通过oss进行处理,把base64的路径地址变成通过oss解析过的地址,但是!解析过的地址让我下载,下载的文件不是图片格式,记事本打开文件里面还是base64的路径,复制粘贴,没错,是裁剪之后的图片,这个问题暂时还没有解决,解决之后进行再回来修改。先附上代码吧。这里代码是比较全的,图片地址解析那一部分可以不用。

以上问题以解决,base64转成blob格式就可以处理了,oss上传需要使用new Blob格式(2019/6/22更新)

另外附上文档   https://github.com/xyxiao001/vue-cropper

裁剪的vue文件:(已更新)

先下载npm install vue-cropper --save






 

 

你可能感兴趣的:(Vue,vue2.0进阶笔记)