当前位置: 首页 > Web前端 > vue.js

基于Vue的图片裁剪和背景色去除插件

时间:2023-04-01 11:53:32 vue.js

vue-image-handler是一款插件github地址,支持图片自定义裁剪和去除背景色(感谢star)在线预览安装npminstallvue-image-handler#或者yarnaddvue项目中使用的vue-image-handler//main.js//对于全局安装,使用importVueImageHandlerfrom'vue-image-handler'Vue.use(VueImageHandler)//对于页面导入,使用importVueImageHandlerfrom'vue-image-handler'//...省略其他代码组件:{VueImageHandler}属性name函数默认值type可选值canvas-width画布宽度380pxStringcanvas-height画布高度252pxStringimg-文件图片资源Blob/File/Stringwipe-color待移除背景色Stringwhite/blackcolor-diff去除背景色容差值20Number1-100option其他配置(具体配置参数见下表)essed图片格式pngStringjpeg/png/webpcanMoveimageOKMovetrueBooleantrue/falsefixedBoxtofixscreenshotboxsizefalseBooleantrue/falsecropWidthscreenshotboxwidth380Number/String380cropHeightscreenshotboxheight252Number/String252Events(callbythis.$refs[yourrefname].[method])方法名描述参数旋转90°downloaddownload处理后的图片getImageUrl获取处理后的图片Base64clear清除画布并预览刷新刷新画布快速启动更新日志1.2.8支持在页面中单独引用:`importVueImageHandlerfrom'vue-image-handler'即将更新1.download和getImageUrl支持自定义图片格式输出