agontuk/vue-cropperjs

A Vue wrapper component for cropperjs https://github.com/fengyuanchen/cropperjs

vue-cropperjs

A Vue wrapper component for cropperjs.

Demo

Checkout here agontuk.github.io/vue-cropperjs

Installation

npm install --save vue-cropperjs

or

yarn add vue-cropperjs

You will also need css & style loader for webpack

Compatibility

Vue Version	Package Version
3.x.x	>=5.0.0
2.x.x	4.2.0
1.x.x	1.0.3

Usage

// Global
import Vue from 'vue';
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';
Vue.component(VueCropper);

// Local
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';
export default {
  components: { VueCropper}
}

...
<vue-cropper
  ref="cropper"
  :src="imgSrc"
  alt="Source Image"
  @ready="..."
  @cropstart="..."
  @cropmove="..."
  @cropend="..."
  @crop="..."
  @zoom="..."
>
</vue-cropper>
...

this.$refs.cropper.rotate(45);

See the example files & cropperjs documentation

Options

Name	Type	Required	Description
src	string	--	Image source
containerStyle	object	--	Styling for the image container
imgStyle	object	--	Styling for the image
alt	string	--	Alternate text for the image

Crop related options

See cropperjs documentation for all posible options & methods.

Renamed Methods

• relativeZoom from zoom
• initCrop from crop

License

MIT

vue-cropperjs's Issues

no babel for vue 1+ @1.0.3

template: `
    <div :style="style">
        <img
            v-el:img
            :src="src"
            :alt="[ alt === undefined ? 'image': alt ]"
            style="max-width: 100%;"
            :style="imgStyle"
        />
    </div>
`,

Es6 template strings，as above, cant be compiled correctly in @1.0.3

How to download cropped image

It is blocked, why?

XMLHttpRequest with responseType set to "arraybuffer" 报错问题

当我打包到生产环境运行时 浏览器提示我原因XMLHttpRequest在同步请求下 responseType不允许被设置，报错
解决办法 dist/croppper.js
注释掉 // xhr.responseType = 'arraybuffer';
xhr.withCredentials = element.crossOrigin === 'use-credentials';
xhr.send();
然后再这个方法里加上 stringToArrayBuffer方法
xhr.onload = function () {
_this.read(stringToArrayBuffer(xhr.response));
};

function stringToArrayBuffer(str) {
var buf = new ArrayBuffer(str.length);
var bufView = new Uint8Array(buf);

for (var i=0, strLen=str.length; i<strLen; i++) {
    bufView[i] = str.charCodeAt(i);
}

return buf;

}

Wrong type for prop 'preview'

First of all, thank you for the nice component which saved my time.
Please, fix type of property preview.
According to cropperjs docs preview can be

Element, Array (elements), NodeList or String (selector)

I'm passing ref, and it's works but with warning in console.

this is using a very old version of cropperjs ?

Just checked the dependency in package.json

    "cropperjs": "~0.8.x"

And checked npm info | grep cropper and indeed only the 0.8.1 is installed

That version came out more than 1 year ago. They are up to a stable 1.1.3 now

Any chance you can update this package to work with the 1.x branch?

Thanks!

init Modal

Hey,
Im getting img url from server and after I open modal and doesnt work cropper .js my code like this can you help me ?

<vue-cropper
v-show="imgSrc!=null"
ref='cropper'
:guides="true"
:view-mode="0"
drag-mode="move"
:auto-crop-area=".5"
:aspect-ratio="1"
:highlight="true"
:min-crop-box-width="120"
:min-crop-box-height="120"
:min-container-height="300"
:min-container-width="320"

              :background="true"
              :crop-box-resizable="true"
              :rotatable="true"
              :src="imgSrc"
              :cropmove='cropImage'
            >
            </vue-cropper>
            <div class="upload-button">
              <input type="file" name="image" id="inputImage" accept="image/jpeg,image/png" @change='setImage' ref="image" /></div>
            </div>

updatePhoto(ref){ //open modal function
this.$refs.image.value=''
this.imgSrc= this.contactInputFields.photoUrl !='' ? this.contactInputFields.photoUrl : null;
getChildRef(this,ref); // open modal this
let $t=this;
setTimeout(function () {
debugger
$t.$refs.cropper;

    },2000)
   },

setImage (e) {
debugger
const file = e.target.files[0];
if (!_.includes(['image/jpeg','image/png'],file.type)) {
this.error.text = this.errorText.isNotImage;
getChildRef(this, "error-modal");
return;
}
if (typeof FileReader === 'function') {
const reader = new FileReader();
reader.onload = (event) => {
this.imgSrc = event.target.result;
this.$refs.cropper.replace(event.target.result);
};
reader.readAsDataURL(file);
} else {
this.error.text = this.errorText.notSupport;
getChildRef(this, "error-modal");
return;
}
let $t=this;
setTimeout(function () {
$t.cropImage()
},10)
},
cropImage () {
this.cropImg = this.$refs.cropper.getCroppedCanvas({width: 170, height: 170}).toDataURL('image/jpeg');
},

Placing VueCropper inside Bootstrap Modal

In a parent component, I'm using Jquery to open a modal containing VueCropper. VueCropper is initialized before I open the modal, and so it doesn't fit the size of the modal properly.

  openCropModal(file) {
       this.image = file.url;
       $('.js-crop-modal').modal('show');
  },

  
  <crop-modal :image="image"></crop-modal>

To use Cropper.js inside a modal, it must be initialized after the modal has opened. Is there a way I can do this with VueCropper?

vue 2.1.10 npm run build err

webpack

ERROR in ./~/vue-cropperjs/VueCropper.js
Module not found: Error: Cannot resolve module 'lodash/omit' in /Users/busyhe/workspace/web/company_project/zhinengpingtai/node_modules/vue-cropperjs
 @ ./~/vue-cropperjs/VueCropper.js 4:11-33

[fix]: i don't see any Events Support

h('img', {
      ref: 'img',
      attrs: {
        src: this.src,
        alt: this.alt || 'image',
        style: 'max-width: 100%'
      },
    nativeOn: {  // missing this
      ready: this.ready,
      cropstart: this.cropstart, // ...
    },
      style: this.imgStyle
    })]

These events are provided with props but not on Cropper Element

Cropper ignores parent dimensions

Thank-you for porting cropper.js over to Vue!

When using the vue component, I notice it ignores the parent dimensions, and forcefully overflows. Example below:

As you can see it's disappearing below the image where overflow: hidden is active. If i disable this style rule, then I can see the cropping container and cropping image falling outside of its 'boundaries'.

What would you suggest? I'm essentially looking for a way to force the cropping container to sit within the viewport.

Thank-you for your help!

How can i send cropped image to server ??

How can i send cropped image to server ??

formData logs empty .

here is code :

<VueCropper ref="cropper" :src="image" :guides="true" alt="Source Image"></VueCropper>

this.$refs.cropper.getCroppedCanvas().toBlob(function (blob) {
          let formData = new FormData()
          // Add name for our image
          formData.append("name", "image-name-" + new Date().getTime())
          // Append image file
          console.log(formData.append("file", blob));
          console.log(formData);
        })

blob return undefined

vue2.0 build error

ERROR in ../static/js/vendor.d4090d62fe572c3ca742.js from UglifyJs
SyntaxError: Unexpected token punc «(», expected punc «:» [./~/vue-cropperjs/VueCropper.js:140,0]

reload img after img-url update

After the ":src" attribute changes, the background image for the cropper does not reload / update.

Crash on Android

Hard to move cropper, and after that my android browser crash,
I think u need using newest cropperjs

Laravel Elixir CSS Loader

Hi,

I'm getting this error when I try to build my vue files.

{ [Error: ./~/vue-cropperjs/~/cropperjs/dist/cropper.css
Module parse failed: \node_modules\vue-cropperjs\node_modules\cropperjs\dist\cropper.css Unexpected token (11:0)
You may need an appropriate loader to handle this file type.
|  */
|
| .cropper-container {
|   font-size: 0;
|   line-height: 0;
 @ ./~/vue-cropperjs/dist/VueCropper.js 19:0-37

vue-cropperjs won't install with Vue 2.1.0 because of rigid peer dependency

 :~$ npm install --save vue-cropperjs
 /home/myName
 ├── UNMET PEER DEPENDENCY vue@>=2.0.0
 └─┬ [email protected] 
   └── [email protected] 
 
 npm WARN [email protected] requires a peer of vue@>=2.0.0 but none was installed.

I have Vue 2.1.0 installed:

"raw": "vue@^2.1.0",

In your package.json can you change this:

   "peerDependencies": {
     "vue": ">=2.0.0"
   },

to this:

   "peerDependencies": {
     "vue": ">=^2.0.0"
   },

How to use toDataUrl method ?

• Cropped image size is getting bigger than the original Image any solution for this?

Unable to clear the selected image

Hi,

I can't get this working, once I select the image, I'm trying reset the image whenever modal is closed. Is there any way to reset the cropper to initial state without image src?

I tried to set src to null, but it is not working.

Problem using library with Quasar framework.

When trying to use the Quasar Framework http://quasar-framework.org/ and trying to include the library I get the following error: VueCropper.js?f133:8 Uncaught TypeError: Vue.extend is not a function

I used your library before and then "it just worked".

I attached a zip with a standard quasar project and the cropperjs lib included. Once i added the
import VueCropper from 'vue-cropperjs' line in the index.vue file the error happens.

bugSar.zip

Should you want to reproduce I think you would need

npm install -g quasar-cli to install the quasar framework cli
quasar dev to get the project running. offcourse after all the npm dependencies are installed.

cropper doesn't dragging on iOS 13 beta ( Safari 13 beta )

Describe the bug
Doesn't dragging on iOS 13 beta & Safari 13 beta & cropperjs >= 1.5.0
( it used to work on cropperjs <= 1.4.3 )

To Reproduce
Steps to reproduce the behavior:

Install iOS 13 Developer Beta 8 (Lastest beta version)
Try dragging in crop area
Smartphone (please complete the following information):

Device: iPhone XR
OS: iOS 13 beta 8 (17A5572a)
Browser: Safari 13 beta
Version: cropperjs 1.5.5 ( >= 1.5.0)

FIXED IN CROPPERJS : fengyuanchen/cropperjs#571

Event handler doc is wrong, please update it.

Now is wrong:

<vue-cropper
  ref="cropper"
  :src="imgSrc"
  alt="Source Image"
  @ready="..."
  @cropstart="..."
  @cropmove="..."
  @cropend="..."
  @crop="..."
  @zoom="..."
>
</vue-cropper>

Because your src code is:

props:{
    ...
    // callbacks
    ready: Function,
    cropstart: Function,
    cropmove: Function,
    cropend: Function,
    crop: Function,
    zoom: Function
    ...
}

The correct way is:

<vue-cropper
  ref="cropper"
  :src="imgSrc"
  alt="Source Image"
  :ready="..."
  :cropstart="..."
  :cropmove="..."
  :cropend="..."
  :crop="..."
  :zoom="..."
>
</vue-cropper>

The current way doesn't work, the correct way works fine in my project.

Please update it, thank you.

Performance

Hello, thank you for component.

I'm new in vue world. But when I comparing Vanilla Cropper, then your version is much more laggy (selecting, zooming, moving). It is Vue wrapping problem? Vue always slow down vanilla this way or this is something with your code?

Thanks!

Fixed crop area movable image

Hi,

I can't get this working:

The crop area to be fixed and the image movable.

Tried this:

<vue-cropper
        v-if="image_path"
        ref="cropper"
        :src="image_path"
        :aspect-ratio="640 / 320"
        :auto-crop-area="0.6"
        drag-mode="crop"
        :dashed="false"
        :movable="false"
        :crop-box-resizable="false"
        :cropMove="form.image_cropped_data"
        alt="Profiel afbeelding"
>
</vue-cropper>

It must be possible because I can see a demo here.

see example (Cropper with fixed dragger)

But it won't work. The crop area is still movable and the image not.

Any idea?

Crop method missing

The crop() method is missing. This is a useful method for resetting the crop box for instance when using cropper.clear().

初始化不使用默认图片占位

初始化的时候，不想有默认图片占位，如何处理？example里，把imgSrc去掉后，就变成白的了

SyntaxError Unexpected token .

Not sure if it supports Nuxtjs, but I am getting SyntaxError Unexpected token . when I try to load a page,
I have built a very simple repo for this error.

https://github.com/sotisoti/cssloader_test

Crashing on iOS 11.1.2

When cropping, website crashes.

Pinch zoom not working on mobile

Hi Agontuk,

This plugin is working very nice so far, thanks for that. Yet, we are a bit worried about a problem with pinch zoom on mobile devices.
The problem is that the image is not zooming at all when pinching on a mobile device. In devtools mobile simulation it works fine, but on real devices not. This also occurs with your demo, while the demo of the original cropperjs from fengyuanchen is working totally fine.

Could you please help to solve this?

Update version on package.json and on npmjs.com

Good afternoon.
Please upgrade your library so that npmjs.com can update it on our own and we get the update.

#56

:zoom Event not attaching correctly

I have a cropper in a component like so:

<vue-cropper :ref="'cropper'" :src="imgSrc" :zoom="testMethod" :view-mode="3" :guides="false" :background="false" :drag-mode="'move'" :auto-crop-area="1" :crop-box-movable="false" :crop-box-resizable="false"></vue-cropper>

And then a test method I'm using which is as follows:

testMethod() {
            console.log('Working');
            var currentWidth = this.$refs.cropper.getCanvasData().width;
            console.log(currentWidth);
        }  

If I use any of the cropmove, start or end methods the function fires and I get the logged output, however when I use zoom I get nothing.

I'm using Chrome version 59.0.3071.115 (Official Build) (64-bit) on a Macbook Pro running Sierra. I've tested zooming with both the mouse wheel and the trackpad

cropper doesn't dragging on iOS 13

on ios13, cropper can't dragging, without any error or warning

How to set fixed width and height?

I have my component like this:

<vue-cropper ref='cropper' :guides="cropOptions.guides" :view-mode="cropOptions.viewMode" :drag-mode="cropOptions.dragMode" :auto-crop-area="cropOptions.autoCropArea" :min-container-width="cropOptions.minContainerWidth" :min-container-height="cropOptions.minContainerHeight" :min-crop-box-width="cropOptions.minCropBoxWidth" :min-crop-box-height="cropOptions.minCropBoxHeight" :background="cropOptions.background" :movable="cropOptions.movable" :crop-box-movable="cropOptions.cropBoxMovable" :crop-box-resizable="cropOptions.cropBoxResizable" :src="imgSrc" alt="Source Image" :imgStyle="cropOptions.imgStyle"/> </vue-cropper>

I have tried something like this:

this.$refs.cropper.setCropBoxData({width: '20', height: '50', top: '0', left: '0'})

but it's not working...

Any help?

Props call Style is a reserved attribute and cannot be used as a prop component

This is the warn that Vue Version 2.2.6 when we call the component the warning message appears .

Message
console.js?93a0:26 [Vue warn]: "style" is a reserved attribute and cannot be used as component prop.

Vue CropperJS throws error in IE11 when uploading .gif or .png

When uploading a .png or .gif in IE11 a console error is thrown and the cropper will not appear.

Vue CropperJS error example in IE11

This appears to happen after cropperjs released 1.5.0 as 1.4.3 still works with vue-cropperjs.

Vue CropperJS 1.4.3 example in IE11

The following repo example can be used to test in IE11 where it still works - https://github.com/06b/vue-cropperjs/tree/cropperjs-1.4.3

I've attempted to recreate the issue in cropperjs only and was unable to recreate the issue.

Upload remote image

I have this picture of URL, but can not be used with cropper? Help

CSS Loader Laravel Elixir

Example project does not run, dependencies broken?

npm ERR! missing script: start

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/home/.npm/_logs/2019-06-17T17_31_44_073Z-debug.log

this is the package.json after npm install

 13   "scripts": {
 14     "build": "babel -d dist VueCropper.js --no-comments"
 15   },

after adding the original script in the example project's package.json, it throws this:

npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] start: `webpack-dev-server --open --inline --hot`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/home/.npm/_logs/2019-06-17T17_34_05_760Z-debug.log

i checked out the original package.json and tried npm install again and it throws this:

> vue-cropperjs-example@ start /Users/home/Projects/vue-cropperjs
> webpack-dev-server --open --inline --hot

/Users/home/Projects/vue-cropperjs/node_modules/webpack/lib/NormalModuleFactory.js:72
			var elements = request.replace(/^-?!+/, "").replace(/!!+/g, "!").split("!");
			                       ^

TypeError: Cannot read property 'replace' of undefined
    at /Users/home/Projects/vue-cropperjs/node_modules/webpack/lib/NormalModuleFactory.js:72:27
    at /Users/home/Projects/vue-cropperjs/node_modules/webpack/lib/NormalModuleFactory.js:28:4
    at /Users/home/Projects/vue-cropperjs/node_modules/webpack/lib/NormalModuleFactory.js:159:3
    at NormalModuleFactory.applyPluginsAsyncWaterfall (/Users/home/Projects/vue-cropperjs/node_modules/tapable/lib/Tapable.js:75:69)
    at NormalModuleFactory.create (/Users/home/Projects/vue-cropperjs/node_modules/webpack/lib/NormalModuleFactory.js:144:8)
    at /Users/home/Projects/vue-cropperjs/node_modules/webpack/lib/Compilation.js:214:11
    at /Users/home/Projects/vue-cropperjs/node_modules/webpack/node_modules/async/lib/async.js:181:20
    at Object.async.forEachOf.async.eachOf (/Users/home/Projects/vue-cropperjs/node_modules/webpack/node_modules/async/lib/async.js:233:13)
    at Object.async.forEach.async.each (/Users/home/Projects/vue-cropperjs/node_modules/webpack/node_modules/async/lib/async.js:209:22)
    at Compilation.addModuleDependencies (/Users/home/Projects/vue-cropperjs/node_modules/webpack/lib/Compilation.js:185:8)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-cropperjs-example@ start: `webpack-dev-server --open --inline --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue-cropperjs-example@ start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/home/.npm/_logs/2019-06-17T17_35_46_359Z-debug.log

this.$refs is empty

Hi,

I wanted to use your lib but when i implement it like in examaple this.$refs is empty so I can't use this.$refs.cropper.getCanvasData().

I'm using Vue >2.0

'$attrs is readonly' and '$listeners is readonly'

I think it's a problem with Vue 2.4.4
check this issue - looks the same
apertureless/vue-chartjs#151

this.$refs.cropper.zoom is not defined

console.log(this.$refs.cropper);
I see the 'zoom' is undefined, I want to use button to trigger zoom, can you add this methods

Example donesn't work with App.vue

Hi, I have cloned the example and run it, it goes well. But when I change to use App.vue, I have configed vue-loader and vue compiler, below errors are throwed.

Here the webpack.config.js

var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
loaders: [
{
test: /.js$/,
loader: 'babel',
exclude: /node_modules/
},
{
test: /.css$/,
loader: 'style-loader!css-loader'
},
{
test: /.(png|jpg|gif|svg)$/,
loader: 'file'
},
{
test: /.vue$/,
loader: 'vue-loader'
}
]
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
devtool: '#eval-source-map',
plugins: [
new HtmlWebpackPlugin({
template: 'index.html'
})
]
}

if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
])
}

====
Could you tell me how to resolve this problem?

Cropping dagger dimension

When i'm cropping the image its give me correct width & height but when zoom in and zoom out its
does not gives me correct dimensions

how to remove google analytics

Hi according to GDPR law we are not allowed to use / call google analytics before the user opts in for cookies. However this library injects is straight away. is there a way to remove / delay it?

Kind regards

Andries

Crash on mobile chrome

Uploaded a 2.8MB image. Chrome suddenly crashed after cropping

Image tag is treating base64 as url

I am selecting an image file. Then reading the file as data url through FileReader's onload event.
sending this to cropper which is base64 string. So in init function base64 string is treated as url by img tag. this gives error in load functions xhr call.

1. select image from local drive
2. set to cropper using cropper.replace(<image_base64_string>)
3. image get applied/set to cropper
4. Observed cropper making http get call to <image_base64_string> (need to avoid this behaviour )

how to save original before cropping

Hi
i wish to know if it possible to save original photo before crop ?
and is it possible to compress quality on the fly ?

No 'Access-Control-Allow-Origin' header is present on the requested resource.

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://10.5.21.14:8080' is therefore not allowed access.

warning prop "style"

Hello :)

since vuejs v2.3 https://github.com/vuejs/vue/releases/tag/v2.3.0, the following warning occored.

[Vue warn]: "style" is a reserved attribute and cannot be used as component prop.

found in

---> <VueCropper>

Is there a way to fix it?

vendors.app.js:formatted: Uncaught ReferenceError: exports is not defined

The error is triggered at vendorsapp.js
line content:
Object.defineProperty(exports, "__esModule", {
value: true
});

---

// /nuxt.config.js
module.exports = {
plugins: [
{ src: '~/plugins/vue-cropper', ssr: false }
],
build: {
transpile: [
'vue-cropperjs'
],
}
}

// plugins/vue-cropper.js
import Vue from 'vue';
import VueCropper from 'vue-cropperjs';
Vue.use(VueCropper);

I also got:
WARN in ./plugins/vue-cropper.js friendly-errors 14:51:25

"export 'default' (imported as 'VueCropper') was not found in 'vue-cropperjs'

using Nuxt ver 2.8.x

Thanks !

Missing lodash dependency

lodash is missing from v1.02 and v2.02 packages