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

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

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

功能特色

兼容IE9+，MSEdge，Chrome，Firefox
两种展现形式，行内或弹窗
可旋转、缩放图片
任意比例、大小裁剪
固定比例、大小裁剪
支持远程图片裁剪、跨域设置

安装

$ npm i vue-img-cutter -S

使用插件

<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>

设置模态弹框模式

<ImgCutter :isModal="true"></ImgCutter>

模态框模式

参数配置

插槽Slot

<ImgCutter v-on:cutDown="cutDown">
  <button slot="open">选择图片</button>
</ImgCutter>

返回值

最后附上示例及项目地址

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

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

文章首发挑战赛#

简介

Vue Cropper 是一款实用的 JavaScript 图片裁剪插件，基于 Vue.js 实现了在 web 上对图片的放大缩小、旋转、拖选区域裁剪、图片压缩上传等功能，API 也很简单，使用很方便。

特性

基于 Vue 开发，支持最新的 Vue 3.x，兼容 Vue 2.x
支持 Vite 和 TypeScript
无论是输入和输出图片，图片数据类型都支持 base 64 和 blob，对图片输入和导出上传处理很友好
支持压缩图片大小，输出主流的 JPG / PNG / WebP 图片格式
除了可以在 web 端使用，也支持在服务端使用

ackground-clip 属性

规定背景的绘制区域：

border-box 背景被裁剪到边框盒。

padding-box 背景被裁剪到内边距框。

content-box 背景被裁剪到内容框。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 300px;
    height: 300px;
    margin: 50px auto;
    padding: 50px;
    border: 50px solid rgba(255,0,0,0.5);

    background-image: url(img/yangmi.jpg);

    /*规定背景的绘制区域：*/
    /*background-clip: border-box;*//*背景会填充到边框*/

    /*background-clip: padding-box;*/

    background-clip: content-box;

}
</style>
</head>
<body>
<div>我是文字啊啊啊啊</div>
</body>
</html>

background-size 属性

background-size: length|percentage|cover|contain;

length 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

percentage 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

在线咨询

上一篇：中秋节网页设计，传统文化中秋节网页，中秋节网页设计作业
下一篇：三分钟教你玩转HTML

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

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

简介

特性

您的项目需求