经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue 如何使用vue-cropper裁剪图片你知道吗
来源:jb51  时间:2021/11/24 19:10:33  对本文有异议

官网:

https://github.com/xyxiao001/vue-cropper

一、安装:

  1. npm install vue-cropper

或者

  1. yarn add vue-cropper

二、使用:

  1. import VueCropper from 'vue-cropper'

设置component

  1. export default {
  2. components: {
  3. VueCropper
  4. }
  5. }

template中插入:(外面需要套一个div,用于设置插件显示的大小)

  1. <vueCropper
  2. ref="cropper"
  3. :img="option.img"
  4. :outputSize="option.size"
  5. :outputType="option.outputType"
  6. ></vueCropper>
  7. data(){
  8. return{
  9. option:{
  10. img: 'imgUrl', // img的URL或者base64
  11. size: 1,
  12. outputType: 'png',
  13. }
  14. }
  15. }

三、内置方法:

名称 功能 默认值 可选值
img 裁剪图片的地址 url 地址 / base64 / blob
outputSize 裁剪生成图片的质量 1 0.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() 获取截图信息(得到截图的URL或者base64)

  1. // 获取截图的base64 数据
  2. this.$refs.cropper.getCropData((data) => {
  3. // do something
  4. console.log(data)
  5. })
  6. // 获取截图的blob数据
  7. this.$refs.cropper.getCropBlob((data) => {
  8. // do something
  9. console.log(data)
  10. })

四、使用:

  1. <template>
  2. <div>
  3. <el-dialog title="图片剪裁" :visible.sync="show" append-to-body width="950px" center>
  4. <div class="cropper-content">
  5. <div class="cropper-box">
  6. <div class="cropper">
  7. <vue-cropper ref="cropper" :img="option.img" :outputSize="option.outputSize" :outputType="option.outputType" :info="option.info" :canScale="option.canScale" :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight" :fixed="option.fixed" :fixedNumber="option.fixedNumber" :full="option.full" :fixedBox="option.fixedBox" :canMove="option.canMove" :canMoveBox="option.canMoveBox" :original="option.original" :centerBox="option.centerBox" :height="option.height" :infoTrue="option.infoTrue" :maxImgSize="option.maxImgSize" :enlarge="option.enlarge" :mode="option.mode" @realTime="realTime" @imgLoad="imgLoad">
  8. </vue-cropper>
  9. </div>
  10. <!--底部操作工具按钮-->
  11. <div class="footer-btn">
  12. <div class="scope-btn">
  13. <label class="btn" for="uploads">选择图片</label>
  14. <input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="selectImg($event)">
  15. <el-button size="mini" type="danger" plain icon="el-icon-zoom-in" @click="changeScale(1)">放大</el-button>
  16. <el-button size="mini" type="danger" plain icon="el-icon-zoom-out" @click="changeScale(-1)">缩小</el-button>
  17. <el-button size="mini" type="danger" plain @click="rotateLeft">? 左旋转</el-button>
  18. <el-button size="mini" type="danger" plain @click="rotateRight">? 右旋转</el-button>
  19. </div>
  20. <div class="upload-btn">
  21. <el-button size="mini" type="success" @click="uploadImg('blob')">上传图片 <i class="el-icon-upload"></i></el-button>
  22. </div>
  23. </div>
  24. </div>
  25. <!--预览效果图-->
  26. <div class="show-preview">
  27. <div :style="previews.div" class="preview">
  28. <img :src="previews.url" :style="previews.img">
  29. </div>
  30. </div>
  31. </div>
  32. </el-dialog>
  33. </div>
  34. </template>
  35. <script>
  36. import { VueCropper } from 'vue-cropper'
  37. export default {
  38. name: "CropperImage",
  39. components: {
  40. VueCropper
  41. },
  42. data () {
  43. return {
  44. show: this.visible,
  45. name: this.Name,
  46. previews: {},
  47. option: {
  48. img: '', //裁剪图片的地址
  49. outputSize: 1, //裁剪生成图片的质量(可选0.1 - 1)
  50. outputType: 'jpeg', //裁剪生成图片的格式(jpeg || png || webp)
  51. info: true, //裁剪框的大小信息,图片大小信息
  52. canScale: true, //图片是否允许滚轮缩放
  53. autoCrop: true, //是否默认生成截图框
  54. autoCropWidth: 300, //默认生成截图框宽度
  55. autoCropHeight: 200, //默认生成截图框高度
  56. fixed: true, //是否开启截图框宽高固定比例
  57. fixedNumber: [1.5, 1], //截图框的宽高比例
  58. full: true, //false按原比例裁切图片,不失真
  59. fixedBox: true, //固定截图框大小,不允许改变
  60. canMove: false, //上传图片是否可以移动
  61. canMoveBox: true, //截图框能否拖动
  62. original: false, //上传图片按照原始比例渲染
  63. centerBox: false, //截图框是否被限制在图片里面
  64. height: true, //是否按照设备的dpr 输出等比例图片
  65. infoTrue: false, //true为展示真实输出图片宽高,false展示看到的截图框宽高
  66. maxImgSize: 3000, //限制图片最大宽度和高度
  67. enlarge: 1, //图片根据截图框输出比例倍数
  68. mode: '230px 150px' //图片默认渲染方式
  69. }
  70. };
  71. },
  72. props: {
  73. visible: {
  74. type: Boolean,
  75. default: false
  76. },
  77. Name: {
  78. type: String,
  79. default: ''
  80. }
  81. },
  82. watch: {
  83. visible () {
  84. this.show = this.visible
  85. }
  86. },
  87. methods: {
  88. //初始化函数
  89. imgLoad (msg) {
  90. },
  91. //图片缩放
  92. changeScale (num) {
  93. num = num || 1
  94. this.$refs.cropper.changeScale(num)
  95. },
  96. //向左旋转
  97. rotateLeft () {
  98. this.$refs.cropper.rotateLeft()
  99. },
  100. //向右旋转
  101. rotateRight () {
  102. this.$refs.cropper.rotateRight()
  103. },
  104. //实时预览函数
  105. realTime (data) {
  106. this.previews = data
  107. },
  108. //选择图片
  109. selectImg (e) {
  110. let file = e.target.files[0]
  111. if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(e.target.value)) {
  112. this.$message({
  113. message: '图片类型要求:jpeg、jpg、png',
  114. type: "error"
  115. });
  116. return false
  117. }
  118. //转化为blob
  119. let reader = new FileReader()
  120. reader.onload = (e) => {
  121. let data
  122. if (typeof e.target.result === 'object') {
  123. data = window.URL.createObjectURL(new Blob([e.target.result]))
  124. } else {
  125. data = e.target.result
  126. }
  127. this.option.img = data
  128. }
  129. //转化为base64
  130. reader.readAsDataURL(file)
  131. },
  132. //上传图片
  133. uploadImg (type) {
  134. let _this = this
  135. if (type === 'blob') {
  136. // 获取截图的blob数据
  137. this.$refs.cropper.getCropBlob(async (data) => {
  138. let formData = new FormData();
  139. formData.append('file', data, new Date().getTime() + '.png')
  140. // 调用axios上传
  141. let { data: res } = await _this.$http.post(`${msBaseUrl}common-tools-web/file/upload/image`, formData)
  142. if (res.code === 200) {
  143. _this.$message({
  144. message: res.desc,
  145. type: "success"
  146. });
  147. let data = res.result
  148. let imgInfo = {
  149. name: data.name,
  150. id: data.id,
  151. url: data.url
  152. };
  153. _this.$emit('uploadImgSuccess', imgInfo);
  154. } else {
  155. _this.$message({
  156. message: '文件服务异常,请联系管理员!',
  157. type: "error"
  158. })
  159. }
  160. })
  161. }
  162. }
  163. }
  164. }
  165. </script>
  166. <style scoped lang="less">
  167. .cropper-content {
  168. display: flex;
  169. display: -webkit-flex;
  170. justify-content: flex-end;
  171. .cropper-box {
  172. flex: 1;
  173. width: 100%;
  174. .cropper {
  175. width: auto;
  176. height: 300px;
  177. }
  178. }
  179. .show-preview {
  180. flex: 1;
  181. -webkit-flex: 1;
  182. display: flex;
  183. display: -webkit-flex;
  184. justify-content: center;
  185. .preview {
  186. overflow: hidden;
  187. border: 1px solid #67c23a;
  188. background: #cccccc;
  189. }
  190. }
  191. }
  192. .footer-btn {
  193. margin-top: 30px;
  194. display: flex;
  195. display: -webkit-flex;
  196. justify-content: flex-end;
  197. .scope-btn {
  198. display: flex;
  199. display: -webkit-flex;
  200. justify-content: space-between;
  201. padding-right: 10px;
  202. }
  203. .upload-btn {
  204. flex: 1;
  205. -webkit-flex: 1;
  206. display: flex;
  207. display: -webkit-flex;
  208. justify-content: center;
  209. }
  210. .btn {
  211. outline: none;
  212. display: inline-block;
  213. line-height: 1;
  214. white-space: nowrap;
  215. cursor: pointer;
  216. -webkit-appearance: none;
  217. text-align: center;
  218. -webkit-box-sizing: border-box;
  219. box-sizing: border-box;
  220. outline: 0;
  221. -webkit-transition: 0.1s;
  222. transition: 0.1s;
  223. font-weight: 500;
  224. padding: 8px 15px;
  225. font-size: 12px;
  226. border-radius: 3px;
  227. color: #fff;
  228. background-color: #409eff;
  229. border-color: #409eff;
  230. margin-right: 10px;
  231. }
  232. }
  233. </style>

效果:

在这里插入图片描述

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注w3xue的更多内容!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号