基于 Vue的图片裁剪插件

vue-crpopper

预览
项目地点

一些主意

网上看了看基于vue的图片裁剪的插件很少,刚刚好项目须要运用到图片裁剪,因而便有了这个插件的
降生。

完成的道理

经由过程canvas天生新的图片, 能够上传到背景保留。

效果图

《基于 Vue的图片裁剪插件》

装置 npm install vue-cropper

运用 import VueCropper from vue-cropper

称号功用默认值可选值
img裁剪图片的地点url 地点 || base64 || blob
outputSize裁剪天生图片的质量10.1 – 1
outputType裁剪天生图片的花样jpg (jpg 须要传入jpeg)jpeg || png || web

内置要领 经由过程this.$refs.cropper 挪用

this.$refs.cropper.startCrop() 最先截图
this.$refs.cropper.stopCrop() 住手截图
this.$refs.cropper.clearCrop() 消灭截图
this.$refs.cropper.getCropData() 猎取截图信息
    原文作者:好男孩啊
    原文地址: https://segmentfault.com/a/1190000009705227
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞