vue图片裁剪组件,
本文主要为大家介绍前端vue-cropperjs图像裁剪方案。有需要的朋友可以借鉴一下，希望能有所帮助。祝大家进步很大，早日升职加薪。
目录
介绍图片剪辑图片剪辑过程vue-cropperjs的代码实现效果v-viewer的代码实现效果最后
引言
实现了图像的裁剪和预览功能。前端图像的大部分裁剪方案都是用cropperjs封装的。npm上有vue-cropperjs，可以直接用。viewerjs用于预览图像。这里直接使用v-viewer。
可以点击当前地址体验一下。
Git仓库地址和在线演示地址
图片裁剪
图片裁剪的流程
首先，使用el-upload组件呈现现有的或裁剪的图片，然后单击要上传的文件。选择要裁剪的图片，弹出一个弹出框。在弹出框中使用vue-cropperjs对图片进行裁剪和整理后，将处理后的图片文件(Blob格式)上传到服务器或者通过回调函数在本地预览裁剪后的图片列表，通过v-viewer(辅助功能)实现全屏预览。
vue-cropperjs的使用
代码实现
首先，注册组件后，VueCropper组件可以直接使用组件来设置这个。通过vue-cropper标签设置纵横比(1)。之后图片就只能按照一定比例裁剪了。如果想随意裁剪，不需要通过这样的API来设置。$ refs.cropper.relative zoom，this.onRotateDegreeChange，this。$refs.cropper .移动，这个。$refs.cropper.scaleX等。您可以平移、缩放、翻转、旋转等。由此可以得到处理后的图像。$ refs.cropper.getcroppedcavas()。到Blob()。Blob格式文件处理成文件格式后，上传到服务器。//导入组件并注册。
导入“cropper js/dist/cropper . CSS”；
从“vue-cropperjs”导入VueCropper
//直接使用组件
武埃-克罗珀
溢出-隐藏
“庄稼”
:src=src
预览=。预览
:minContainerHeight=500
背景
:ready=onReady
/
//图片的宽高比可以在onReady方法中设置。
这个。$ refs . cropper . setaspectatio(this . aspectativalue)；
//缩放图片
这个。$refs.cropper.relativeZoom(百分比)；
//图像旋转角度
this . onrotatedegreechange(this . rotated gree)；
//图片平移
这个。$refs.cropper.move(offsetX，offsetY)；
//图像翻转
这个。$ refs . cropper . scalex(scale)；
这个。$ refs . cropper . scaley(scale)；
//重置
这个。$ refs . cropper . reset()；
//获取修改后图片的数据
这个。$refs.cropper。getCroppedCanvas({
//限制画布大小和生成图片的体积
maxWidth: 2056，
maxHeight: 2056，
})。toBlob(
(blob)={
//调用确定的回调函数将blob上传到服务器或者在本地预览。
这个。$emit(confirm ，blob)；
},
//如果旋转角度不是直角，图片上会有空白区域。默认情况下，空白区域是透明的，使用png格式。
//this . rotated gree % 90===0？this.file.type : image/png ，
this.file.type，
//质量
这个.质量
);
//将文件上传到服务器
函数onCropperConfirm(blob) {
let file=new File([blob]，filename，{ type: blob.type，})；
const formData=new formData()；
formData.append(file ，file)；
//.
axios.post(/upload ，formData)。然后((res)={
//.
})
}
实现效果
v-viewer的使用
代码实现
V-viewer主要实现图片全屏预览，基于viewerjs包。
首先介绍css，在main.js中注册v-viewer插件，可以直接调用这个。$viewerApi，并传入图像路径数组和相应的索引以全屏预览图像。//首先介绍main.js中的组件。
导入“viewer js/dist/viewer . CSS”；
从“v-viewer”导入VueViewer
vue . use(VueViewer)；
//在组件中使用
这个。$viewerApi({
选项：{
工具栏：真的，
initialViewIndex: 1，
},
图像：[
https://placem.at/people？random=1txt=0w=500h=500 ，
https://placem.at/people？ random=1txt=0w=1000h=500
],
});
实现效果
参考数据
www.npmjs.com/package/v-v…
www.npmjs.com/package/vue…
Js前端推荐预览wordexcelpdfpptmp4图文等文件。
最后
如果用插件实现图像裁剪，只能说CV工程师不要太舒服，要想搞懂原理还是要花很多时间去研究；更多关于前端vue-cropperjs图像裁剪的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。