Giter VIP home page Giter VIP logo

acccccccb / vue-img-cutter Goto Github PK

View Code? Open in Web Editor NEW
459.0 5.0 71.0 739 KB

简单易用的vue图片裁剪插件,支持移动图像,裁剪图片,放大缩小图片,上下左右移动,固定比例,固定尺寸,远程图片裁剪,只需要很少的代码就可以实现裁剪功能,也可以通过调整参数以适应你自己的业务需求。

Home Page: https://www.ihtmlcss.com/demo/dist/#/croptool

License: Apache License 2.0

JavaScript 4.26% HTML 0.67% Vue 95.07%
vue vue-img-cutter image copper

vue-img-cutter's Introduction

vue-img-cutter

A image crop plug-in for Vue,you can use it to rotate、zoom images and cut any size

GitHub stars GitHub forks npm npm

Features:


  • For IE9+,MSEdge,Chrome,Firefox
  • Your can config it in line or modal
  • rotate、zoom
  • Cut to scale
  • Crop original image
  • Crop remote pictures

Screenshot:


Screenshot

Demo:


https://www.ihtmlcss.com/demo/dist/#/croptool

Git:


Github:https://github.com/acccccccb/vue-img-cutter

码云:https://gitee.com/GLUESTICK/vue-img-cutter

If this project is helpful to you, please give me a star :)

Usage method:


  1. Install
npm install vue-img-cutter@2 --save-dev # for vue2
npm install vue-img-cutter@3 --save-dev # for vue3
  1. Import ImgCutter.vue:
import ImgCutter from 'vue-img-cutter'
export default {
        components:{
            ImgCutter
        },
...
}
  1. Write the code in template:
<ImgCutter v-on:cutDown="cutDown"></ImgCutter>
  1. Solt
<ImgCutter v-on:cutDown="cutDown">
    <template #open>
        <button>Choose image</button>
    </template>
</ImgCutter>
  1. This method to be compatible with IE9,it can also be used to crop cross domain images
  • Create an object(name,src,width and height are required).
  • this.$refs.imgCutterModal.handleOpen(The Object).
// The object like this.
let obj = {
    name: '1.jpg', //Image name
    src: 'http://url/1.jpg', // Image url
    //width:200,//Image width  remove in 2.1.9+
    //height:200,//Image height remove in 2.1.9+
};
ForIE9:function(){
	// First you need create object have name,src.
	// Then trigger handleOpen(obj) and deliver the obj.
	this.$refs.imgCutterModal.handleOpen({
        name:"image.jpg",
        src:"http://imageServ.com/image.jpg",
    });
}

Parameter description:


Attribute Effect Type Require Default
isModal Is modal Boolean No true
showChooseBtn Show select btn Boolean No true
lockScroll Lock scroll when modal is show Boolean No true
label Button text String No 选择图片
boxWidth Tool width Number No 800
boxHeight Tool height Number No 400
cutWidth Selection box width Number No 200
cutHeight Selection box height Number No 200
tool Show toolbar Boolean No true
toolBgc Toolbar background color String(eg: "#fff") No #fff
sizeChange Allow change size Boolean No true
moveAble Allow change position Boolean No true
originalGraph Crop original image Boolean No false
crossOrigin Is cross origin image Boolean No false
crossOriginHeader Set cross origin header String No ''
rate Aspect ratio String(eg: "4:3") No -
WatermarkText Watermark Text String No ''
WatermarkTextFont Watermark font size String No '12px Sans-serif'
WatermarkTextColor Watermark font color String No '#fff'
WatermarkTextX Watermark position x Number No 0.95
WatermarkTextY Watermark position y Number No 0.95
smallToUpload If choose image size less then defined Size,return file. sizeChange must be false Boolean No false
saveCutPosition Save last cut position and size Boolean No false
scaleAble Allow scale image Boolean No true
imgMove Allow move image Boolean No true
toolBoxOverflow Allow tool box out of picture range Boolean No true
index Return with result Any No null
previewMode Return results at any time,in case of performance problems, set this to false Boolean No true
fileType Return file type ( png / jpeg / webp) String No png
quality image quality Number No 1
accept accept file type String No 'image/gif, image/jpeg ,image/png'

Hook function:

Attribute Effect Type Require Return
cutDown Cut down image Function Yes Object
error Throw error Function No Error object
onChooseImg ChooseImg Function No Object
onPrintImg Print image to canvas Function No Object
onClearAll Clear all Function No null

Slot(You can use slot="slot name" to custom button):

Slot name Effect
open Choose btn
openImgCutter Choose btn
choose Choose btn(in tool)
cancel Cancel btn
confirm Confirm btn
ratio Toolbar ratio
scaleReset Toolbar reset scale
turnLeft Toolbar turn left
turnRight Toolbar turn right
reset Toolbar reset
flipHorizontal Toolbar flip horizontal
flipVertically Toolbar flip vertically

Return @cutDown:


Attribute Description
fileName File name
file File(Some versions of IE is not support)
blob Blob(Some versions of IE is not support)
dataURL dataURL

Development:

  • Original picture
  • Mirror

Donation:

微信 支付宝

Update log:

3.0.4

3.0.3

3.0.2

  • bugfix:#note_11139264

  • bugfix:#64

  • New prop( quality ) : A Number between 0 and 1 indicating the image quality

3.0.1

  • bugfix:#I4SDOE

  • bugfix: dialog-footer default height 40px

  • bugfix: width height x and y convert to int

3.0.0

  • chore:Build tool changed to vue3

2.2.6

2.2.5

  • Bugfix:remove this in template

2.2.4

  • New prop( toolBoxOverflow ): Allow tool box out of picture range, default: true

2.2.3

  • Bug fix: When you set rate,the control-box didn't reach the expected position #I3OXMW

2.2.2

  • New prop( imgMove ): Allow move img, default: true

2.2.1

  • New prop( fileType ):Return file type, default: png

2.2.0

  • New prop( index ):Return result with index.
  • New prop( previewMode ):Return results at any time,in case of performance problems, set this to false.
  • Fix Bug:Update style.

2.1.10

  • New features:
  • 1.saveCutPosition:Save last cut position and size
  • 2.scaleAble:Able/Disable scale image

2.1.9

  • Crop original image not need imageObj.width and imageObj.height

2.1.8

  • New features:smallToUpload, If choose image size less then defined Size,return file. sizeChange must be false. #20

2.1.7

  • Fix bug:#21 cropPicture() missed params

2.1.6

  • Add new hook function:onClearAll,onPrintImg,onChooseImg

2.1.5

  • Fix bug:Button add attrib type=button

2.1.4

  • Fix bug:Width display error

2.1.3

  • Fix bug:When no choose Image,you also can get an empty image,now you will get an error message in error callback
  • Fix bug:When rate < 0 the result image size error;

2.1.2

  • New features:flip horizontal,flip vertically,Watermark
  • Add slot:ratio,scaleReset,turnLeft,turnRight,reset,flipHorizontal,flipVertically

2.1.1

  • Add english documents

2.1.0

  • Add new attribute:originalGraph,originalGraph
  • Fix bug: Inline mode can not scale image.

2.0.30

  • Fix bug: Constituency overflow.

2.0.29

  • UI optimization.

2.0.28

  • Show version
  • New slot:choose/cancel/confirm
  • New attribute:toolBgc
  • Fix bug: Constituency overflow.

2.0.27

  • Fix bug:Remote image in the wrong place.
  • Fix bug:An error occurred when click cancel btn in IE.
  • Fix bug:Error loading remote picture will be correctly handle.

2.0.26

  • Fix bug:An error occurred when not choose any image.

2.0.25

  • Update readme.md

2.0.24

  • Update crop remote pictures method. eg:this.$refs['yourComponent'].handleOpen(imgObj),imgObj must include(name,src,width,height)
  • Fix bug: Inline mode can not scale image.
  • New attribute: crossOrigin,crossOriginHeader
  • New attribute: error,It can catch error.

2.0.23

  • New attribute:isModal/showChooseBtn/lockScroll

2.0.22

  • For IE9+,MSEdge,chrome,firefox
  • UI optimization.

2.0.21

  • For IE8+,MSEdge,chrome,firefox
  • New attribute:moveAble,sizeChange
  • Fix bug:File is not return.

2.0.20

  • For IE11+,MSEdge,Chrome,Firefox

2.0.19

  • Result add file.

2.0.18

  • Fix bug:Reload pages when first click select image btn.

2.0.17

  • UI optimization.

2.0.16

  • UI optimization.

2.0.15

  • UI optimization.

vue-img-cutter's People

Contributors

acccccccb avatar dependabot[bot] avatar tabzhang001 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

vue-img-cutter's Issues

确认提交,按钮type错误,会导致form表单触发默认提交事件

bug描述
确认裁剪图片时,按钮type为primary,这是element按钮type,会导致button按钮触发默认事件。应该是在组件传递参数的时候没有把type放入props内部,导致$attrs直接赋值在了button的原生type上,导致type默认为submit事件,如果裁剪框在form表单内部就会导致提交默认事件,页面会被刷新。
因为没有给出能够监听选中图片到裁剪框的钩子,所以使用“插槽”替换掉按钮之后没办法改变按钮颜色,只能用默认颜色。不能像原代码那样从白色变为蓝色。
版本号
2.1.3
浏览器版本
IE/Edge/Firefox/Chrome

固定裁剪框位置时图片拖动优化建议

在项目中使用时,若固定裁剪框位置,当鼠标置于裁剪框区域内时,无法拖拽图片

建议在固定裁剪框位置时,给裁剪框容器增加:pointer-events: none 以便于拖拽图片

能否开发适配i18n的版本呢

您好作者,首先感谢您的辛苦开发,我最近遇到一个需要国际化的网站要用到您的作品,能否开发一个支持i18n或者中英甚至多语言的版本呢?谢谢啦。

I have a problem in dynamically change a cutwidth and cutheight. pls help to solve, and where is demo code?

I have a problem in dynamically change a cut width and cut height. pls help to solve, and where is the demo code?

I have used Vue js

<ImgCutter
      ref="imgCutterModal"
      class="ImgCutterBox"
      :label="$t('system.selectIMG')"
      :crossOrigin="true"
      crossOriginHeader="*"
      rate=""
      :tool="true"
      toolBgc="none"
      :cutWidth="cutWidth"
      :cutHeight="cutHeight"
      :sizeChange="false"
      :originalGraph="false"
      :boxWidth="modelWidth"
      :boxHeight="boxHeight"
      :isModal="false"
      :showChooseBtn="true"
      :moveAble="true"
      @cutDown="cutDown"
      @onClearAll="onClearAll"
      @onChooseImg="onChooseImg">
          <span class="btn btn-primary" slot="cancel" style="margin-right:10px;">
              <el-button>{{$t('system.cancel')}}</el-button>
          </span>
          <span class="btn btn-primary" slot="confirm">
              <el-button type="primary">{{$t('system.confirm')}}</el-button>
          </span>
</ImgCutter>

in props, I have received cut width and cut height. it will dynamically change.

兼容IE9

你好,我想问一下这个兼容IE9嘛?

裁剪选择框位置

bug描述
不是bug,我想问下 我想记录用户最后拖动裁剪框的位置,下次裁剪会记录下来,但是我总找不到x 和 y的公用值,要么就是裁剪框位置变化了 但是截取的图像位置没有变化
版本号
此bug出现在哪个版本
最新版本

初始化项目报loaders错误

bug描述
项目初始化的时候,运行起来报调用组件的loader问题

ERROR in ./node_modules/vue-img-cutter/src/components/ImgCutter.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

|


| <div @click="handleOpen" v-if="showChooseBtn === true && isModal === true">

版本号
3.0.0
浏览器版本
Chrome

2.1.6版本基本裁剪功能失效

bug描述
组件选择图片以后,点击确认按钮,无任何效果:
仔细查看源代码以后,您采用“doNotReset”字段作为判断是cutDown还是onPrintImg事件,但是这个字段在确定按钮代码部分未传值。导致产生bug。

 <span @click="cropPicture">
         <slot name="confirm">
             <button type="button" class="btn btn-primary" style="margin-left:15px;" :disabled="!drawImg.img">确定 </button>
          </slot
</span>

版本号
2.1.6
浏览器版本
IE/Edge/Firefox/Chrome

工具栏度数宽度不够

bug描述
详细描述bug是在什么操作下出现的,最好带上截图,如果可以线上预览,请附上链接
版本号
此bug出现在哪个版本
浏览器版本
IE/Edge/Firefox/Chrome
image

移动端无法移动

bug描述
详细描述bug是在什么操作下出现的,最好带上截图,如果可以线上预览,请附上链接
版本号
此bug出现在哪个版本
浏览器版本
IE/Edge/Firefox/Chrome

关于<template>中this的问题

image
image
你好,源码在template中使用props中的值时某些前面加了this(截图只是一个变量,还有其它的一些),使用时运行不了,去掉就可以运行,麻烦看一下可以吗?谢谢

水印文字去不掉,设置为空也不行

bug描述
详细描述bug是在什么操作下出现的,最好带上截图,如果可以线上预览,请附上链接
版本号
此bug出现在哪个版本
浏览器版本
IE/Edge/Firefox/Chrome

[feature]建议增加配置,当上传图片宽高度小于设定的不可调整裁剪宽高度时,直接执行上传不再执行裁剪

首先感谢提供这么好用的插件。
标题情况大多数情况下用在头像上传的时候。
我自己改的。参数名什么的随便加的。就不提pr了。

smallToUpload: {
  // 选择的图片宽高均小于裁剪宽高度时候直接上传原图
  type: Boolean,
  default: false,
  required: false,
},
if (reader.readyState == 2) {
  if ( !_this.sizeChange && _this.smallToUpload && img.width <= _this.cutWidth && img.height <= _this.cutHeight) {
    _this.handleClose()
    _this.$emit('cutDown', {
        filename: file.name,
        file: file,
    })
    return;
  }
  _this.putToolBox(); // 挪进来或许更好一些
  //......
}

顺便说个别的事情,确认按钮的事件建议加上执行括号来做兼容

<span @click="cropPicture">
<!-- 更换为 -->
<span @click="cropPicture()">

该方法会因为传递了$event做第一个参数判断时隐形转为true从而不触发cutDown事件

cropPicture: function (doNotReset) {
}

如果没有选取图片直接点击确定,也能触发裁剪函数

bug描述
完成截图:cutDown 回调,能够加入是否上传并且裁剪判断,我测试发现一个问题就是我没有上传图片直接可以点击确定按钮,并且在回调函数能取到值,只是没有fileName参数,我没有上传就不应该触发裁剪功能。这里我通过判断fileName能够阻止他的上传。但是有种情况就是我上传图片但是取消本次裁剪,因为浏览器的机制原因,input的files队列没有被清空,我再次打开裁剪,并且不上传图片,我点击裁剪的确定按钮过后获取的对象就会有fileName,这里我就没办反判断是否上传本次结果了,因为我没有办法监听input的change事件,所以我的图片裁剪我是没办法是否判断是否是有效裁剪。如果出现我上述问题就会出现一张空白图片.
版本号
最新版
浏览器版本
IE/Edge/Firefox/Chrome

弹窗模式下选择图片按钮隐藏不了

bug描述
详细描述bug是在什么操作下出现的,最好带上截图,如果可以线上预览,请附上链接
版本号
此bug出现�弹窗模式下选择图片按钮隐藏不了在哪个版本
浏览器版本
IE/Edge/Firefox/Chrome

原图裁剪?

你好,我在代码中发现了这些内容:
组件有originalGraphcuttingOriginal两个属性但是cuttingOriginal并没有被使用,请问是冗余字段还是我个人理解偏差?
然后想了解下originalGraph的具体内涵是什么?为什么会有裁剪原图的选项?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.