投稿

Vue.js 图片裁切组件Vue-ImgCutter

Vedu • • 程序开发 • 阅读 2983

今天给小伙伴们分享一个超棒的Vue图片任意裁剪插件VueImgCutter。

超好用 Vue.js 图片裁切组件Vue-ImgCutter

vue-img-cutter 基于 vue2.x 构建的轻量级剪切图片组件。支持移动图像、放大缩小图片、任意移动图片、固定比例/尺寸、远程图片裁剪等功能。

超好用 Vue.js 图片裁切组件Vue-ImgCutter

功能特色

  • 兼容IE9 ，MSEdge，Chrome，Firefox
  • 两种展现形式，行内或弹窗
  • 可旋转、缩放图片
  • 任意比例、大小裁剪
  • 固定比例、大小裁剪
  • 支持远程图片裁剪、跨域设置
超好用 Vue.js 图片裁切组件Vue-ImgCutter

安装

$ npm i vue-img-cutter -S
超好用 Vue.js 图片裁切组件Vue-ImgCutter

使用插件

<template>
  <div id="app">
    <ImgCutter
      label="选择图片"
      :isModal="false"
      :boxWidth="800"
      :boxHeight="500"
      :cutWidth="300"
      :cutHeight="300"
      :sizeChange="true"
      :moveAble="true"
      WatermarkText="水印文字"
      v-on:cutDown="cutDown"
    >
      <div class="btn btn-primary" slot="open">选择本地图片div>
    ImgCutter>
  div>
template>
<script>
import ImgCutter from \'vue-img-cutter\'
export default {
  components: { ImgCutter },
  data() {
    return {}
  },
  methods: {
    cutDown(res) {
      let imgSrc = res.dataURL;
      console.log(imgSrc);//输出为base64数据
    }
  }
}
script>

设置模态弹框模式

:isModal="true">

超好用 Vue.js 图片裁切组件Vue-ImgCutter

模态框模式

超好用 Vue.js 图片裁切组件Vue-ImgCutter
超好用 Vue.js 图片裁切组件Vue-ImgCutter

参数配置

超好用 Vue.js 图片裁切组件Vue-ImgCutter

插槽Slot

<ImgCutter v-on:cutDown="cutDown">
  <button slot="open">选择图片button>
ImgCutter>
超好用 Vue.js 图片裁切组件Vue-ImgCutter

返回值

超好用 Vue.js 图片裁切组件Vue-ImgCutter

最后附上示例及项目地址

# 演示地址
https://ihtmlcss.com/demo/dist/#/croptool
# 仓库地址
https://github.com/acccccccb/vue-img-cutter

ok，就介绍到这里。希望对你有帮助！感兴趣的同学可以去了解下哈~

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/procedure/9686.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
VeduVedu
0 0
上一篇 2020-08-19 11:16
下一篇 2020-08-19 11:19

相关推荐

发表评论

登录后才能评论