网站首页 > 技术文章 正文
简介:
vue-img-cutter,是简单易用的vue图片裁剪插件,支持旋转、缩放、平移、固定尺寸、固定比例、远程图片裁剪等等。只需要很少的代码就可以完成,当然也是可以更加调整具体的参数,去适合自己的业务需求。
软件截图效果:
使用方法:
- 安装 npm install vue-img-cutter --save-dev 或者 yarn add vue-img-cutter;
- 将ImgCutter引入到项目中,自定义一个index.vue文件,编写代码如下
<template>
<div class="img_cutter_main">
<!-- 文档 https://gitee.com/GLUESTICK/vue-img-cutter -->
<ImgCutter
:cross-origin="true"
:tool-bgc="none"
:is-modal="true"
:show-choose-btn="true"
:lock-scroll="true"
:box-width="600"
:box-height="400"
:cut-width="200"
:cut-height="200"
:size-change="true"
:move-able="true"
@cutDown="xztpCutDown"
>
<button slot="open">选择图片</button>
</ImgCutter>
</div>
</template>
<script>
import ImgCutter from 'vue-img-cutter'
export default {
name: "ImgCutterMain",
components: {
ImgCutter
},
methods: {
xztpCutDown(fileName) {
// let that = this
console.log(fileName, fileName.dataURL, '确定裁剪后的base64')
var imgGs = fileName.dataURL.split(';')[0].split('/')[1]
var file = this.dataURLtoBlob(fileName.dataURL, '裁剪图片.' + imgGs)
console.log(file, 'file')//裁剪后file文件
var formData = new FormData()
formData.append('file', file)
// 上传接口调用
// ----------
},
//将base64转换为file
dataURLtoBlob: function(dataurl, name) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], name, { type: mime })
}
}
}
</script>
<style scoped>
</style>
以上代码只是用到了部分的参数,详细参数说明,可以访问https://gitee.com/GLUESTICK/vue-img-cutter,去查看~~
这里只是为了展示出基本的功能,上面也有写了两个方法:
1、xztpCutDown(),是获取裁剪后的文件内容,包括base64 和 转换为file文件的方法,以及可以在方法内去调用上传文件的方法。
2、dataUrlToBlob(),顾名思义,这里是为了转换file文件Blob格式
编译,选择文件后界面的效果如下:
裁剪后,打印出的数据见下图:
也可以把fileName全打印出来,如下:
插槽的使用:
以上只是用的slot=“open”,其他的大家可以一一去试,这里就不做详细地说明了,(任务来了~~得搬砖去了,嘿嘿)
写到这里,就告一段落了,可以自己yarn add ... 去试一下,感觉还挺有那么回事的。。搬砖了~~~~
猜你喜欢
- 2024-11-23 VC.NET全屏截屏或鼠标拖动出区域,截图效果「附源码」
- 2024-11-23 Star 17.3k!给它一张屏幕截图,即可一键克隆网页!
- 2024-11-23 一个好的前端年薪会有多少钱?
- 2024-11-23 57挑战之53,python实现客户端+服务端
- 2024-11-23 6个月转行成功WEB前端工程师的秘诀在这里
- 2024-11-23 分享 12 个超级实用的前端工具,可能就是你一直在寻找的!
- 2024-11-23 超级实用的截图工具分享—Snipaste
- 2024-11-23 前端革命时刻:前端代码是怎样智能生成的-图像分离篇
- 2024-11-23 推荐给前端开发的 5 款 Chrome 扩展
- 2024-11-23 这4个神器,帮你自动美化生成好看的网页截图
你 发表评论:
欢迎- 07-10Oracle 与 Google Cloud 携手大幅扩展多云服务
- 07-10分享收藏的 oracle 11.2.0.4各平台的下载地址
- 07-10Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- 07-10Oracle Database@Azure 推进到南美等新区域并增加了新服务
- 07-10Oracle宣布推出 Oracle Database@AWS 的有限预览版
- 07-10Oracle与Nextcloud合作,推出主权云上的安全协作平台
- 07-10NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 07-10对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 601℃几个Oracle空值处理函数 oracle处理null值的函数
- 593℃Oracle分析函数之Lag和Lead()使用
- 581℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 578℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 573℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 566℃【数据统计分析】详解Oracle分组函数之CUBE
- 553℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 547℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
-
- Oracle 与 Google Cloud 携手大幅扩展多云服务
- 分享收藏的 oracle 11.2.0.4各平台的下载地址
- Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- Oracle Database@Azure 推进到南美等新区域并增加了新服务
- Oracle宣布推出 Oracle Database@AWS 的有限预览版
- Oracle与Nextcloud合作,推出主权云上的安全协作平台
- NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 解读丨《归档文件整理规则》— 电子文件元数据存储
- Data Guard跳归档恢复的实践(dataguard failover)
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端获取当前时间 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)