agontuk/vue-cropperjs

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

vue-cropperjs's Issues

Upload remote image

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

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"
   },

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.

How to download cropped image

It is blocked, why?

How to use toDataUrl method ?

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

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

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 )

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

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

初始化的时候，不想有默认图片占位，如何处理？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

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.

: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

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?

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

Crash on mobile chrome

Uploaded a 2.8MB image. Chrome suddenly crashed after cropping

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

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.

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 ?

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

Missing lodash dependency

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

Crop method missing

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

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?

Crash on Android

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

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.

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.

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!

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 !

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');
},

cropper doesn't dragging on iOS 13

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

reload img after img-url update

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

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.

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?

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;

}

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

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!

CSS Loader Laravel Elixir

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

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!

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?

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]

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

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

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.

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

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

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?

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

Crashing on iOS 11.1.2

When cropping, website crashes.

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?