zhanziyang / vue-croppa Goto Github PK

Hello, i really love your module but i was wondering if you can explain to me the quality setting.

On 2 processing is quite long and gives a huge file size, above 3 and 4 it calculates for an insane amount of time and produces a file size that is enormous.

When i upload a 53k image i get back a 1 meg image no setting 2 and 8 megs on setting 5.

What am i doing wrong please?

@zhanziyang this code:
async imageConfirmed () { const blob = await myCroppa.promisedBlob('image/jpeg', 0.01) }
is returning a not compressed .png image.

But this is working as expected:
async imageConfirmed () { const blob = await myCroppa.promisedBlob('image/jpeg') }

It's a bug?

Was wondering if you could clarify what, exactly, the individual metadata components mean. I'm assuming the following.

• startX: The first/left x-coordinate of where your crop begins, multiplied by scale.
• startY: The first/top y-coordinate of where your crop begins, multiplied by scale.
• scale: The "zoom factor", or "multiplier", revealing how far you've zoomed in from your initial-image.
• orientation: The rotation of the image? Not sure on this, as it isn't applicable for my project.
  I'm mostly curious about the scale functionality. My Croppa uses prevent-white-space so, as I understand it, scale should never be lower than 1, as you can't zoom out beyond the original/filled ratio.

I must be confused on how scale works...could you shed some light on that, and maybe explain the other components too? Trying to utilize these pieces to apply transformations with Intervention's Image on the back-end. Thanks!

The documentation is not clear on where myCroppa is defined and how it should be instanciated.

Hi could anyone give me some help regarding to stickers.
I have a logo that can be aligned to the right or left corner with a select input. But when a try to 'remove' the sticker with clearRect the area becomes gray and I don't know how to make it transparent.

I have this code inside onDraw event:

ctx.drawImage(
  document.querySelector(`.${sticker.class}`),
  left * this.quality,
  top * this.quality,
  sticker.width * this.quality,
  sticker.height * this.quality
 );

Thank you

Is it possible to get a new $emit for when a new image is loaded onto the canvas?

The issue i am having is the 'new-image' event gets fired before the file is read so i am unable to get the blob of the image on a new image load manually as i wish to save the image in its original input state on adding to the canvas.

Is that possible to do not delete image when you changing background color? Would be great to have this option. Or for this better to work directly with canvas?

When trying to install w/ NPM, getting a "Cannot read property '0' of undefined" error. Here's the log:

999 info lifecycle undefined~uninstall: undefined 1000 verbose unlock done using ....\_locks\staging-29c759a10f8835f9.lock for D:\xampp\htdocs\one\node_modules\.staging 1001 verbose stack TypeError: Cannot read property '0' of undefined 1001 verbose stack at rmStuff (....\npm\lib\unbuild.js:61:24) 1001 verbose stack at tryCatcher (....\npm\node_modules\bluebird\js\release\util.js:16:23) 1001 verbose stack at ret (eval at makeNodePromisifiedEval (....\npm\node_modules\bluebird\js\release\promisify.js:184:12), <anonymous>:13:39) 1001 verbose stack at lifecycle.then.then (....\npm\lib\install\action\unbuild.js:12:12) 1001 verbose stack at tryCatcher (....\npm\node_modules\bluebird\js\release\util.js:16:23) 1001 verbose stack at Promise._settlePromiseFromHandler (....\npm\node_modules\bluebird\js\release\promise.js:512:31) 1001 verbose stack at Promise._settlePromise (....\npm\node_modules\bluebird\js\release\promise.js:569:18) 1001 verbose stack at Promise._settlePromise0 (....\npm\node_modules\bluebird\js\release\promise.js:614:10) 1001 verbose stack at Promise._settlePromises (....\npm\node_modules\bluebird\js\release\promise.js:693:18) 1001 verbose stack at Async._drainQueue (....\npm\node_modules\bluebird\js\release\async.js:133:16) 1001 verbose stack at Async._drainQueues (....\npm\node_modules\bluebird\js\release\async.js:143:10) 1001 verbose stack at Immediate.Async.drainQueues (....\npm\node_modules\bluebird\js\release\async.js:17:14) 1001 verbose stack at runCallback (timers.js:651:20) 1001 verbose stack at tryOnImmediate (timers.js:624:5) 1001 verbose stack at processImmediate [as _immediateCallback] (timers.js:596:5)

This worked in version 0.3.2 but does not work in version 1.0.3.

When the canvas-color="transparent" is added to the component and when you click to remove the image, it stays as the background.

Reproducible Fiddle https://jsfiddle.net/jdcvpvty/3/

Thanks for project though :)

I'm trying to get the image that I edited with vue-croppa. I can get Base64 but can't set it to "<input type='file'" input so that I can get it at backend which is Laravel.

I can successfully get dataUrl yet I couldn't find a way to get the edited image as a file input. Is there a way to do it with Vue-Croppa?

The problem happens on both Safari and Google Chrome.

The initial image gets displayed however.

Is there a way to load a placeholder image from another origin without being blocked by the security browser policy.
Indeed, it blocks the usage of exporting canvas method like toBlob() by tainting the canvas.

:initial-image is not the expected behavior here as it really loads the image and isn't the best thing for user experience.

I guess it's a request enhancement?

Thanks!

Why is chrome asking to record audio? Is there any way to stop it?

I would like the ability to get the X/Y position and zoom that resulted in the cropped image when saving to the server so that if the user wants to edit the image again I can preload the original image (which I save) as the initial image with those same values so they can pan and zoom again without having to upload the original again.

Hi, could you clarify the license of Vue-Croppa, please?
Maybe add a LICENSE.md file in the repo?

Internally it's calling generateBlob, but that just returns null if there is no image. The callback which should eventually resolve the promise is never called in that case.

I used croppa in component

	import Croppa from 'vue-croppa';
	import 'vue-croppa/dist/vue-croppa.css';

	export default {
		components: {
			croppa: Croppa.component
		},

There is a warning.

[Vue warn]: Method "_init" conflicts with an existing Vue instance method.

手机上点击choose打不开相册

any recommendation on how to go regarding dynamic sizes?
Current case:
I have croppa inside a for loop, images (remotely hosted) that are placed as initial-image can be of various dimensions.
<v-flex v-for="(item, key, index) in item.imgfields" :key="key"> <croppa v-model="croppa[key]" :width=this.imgSize.w :height=this.imgSize.h :quality="2" :file-size-limit="5502400" :prevent-white-space="true" accept="image/*" @file-type-mismatch="onFileTypeMismatch" @file-size-exceed="onFileSizeExceed" placeholder="Drag & Drop Image here" :placeholder-font-size="14" :initial-image="item.image" ></croppa> </v-flex>

So I wrote a small method that loads the image and returns the dimensions:

getMeta(url){ var that = this; var img = new Image(); img.addEventListener("load", function(){ that.imgSize.w = this.naturalWidth; that.imgSize.h = this.naturalHeight; }); img.src = url; }

Now how can I apply the imgSize to the alredy created / rendered croppa instance?

Many thanks for your input.

Initially asked in the comment of #40 .

The feature will be added in the next release (v1.1).

When changing the initial image to another and calling refresh() doesn't reset the zoom level. I have to manually zoom out to have the full sized image (according to prevent-white-space).

Anyways, keep this awesome work up!

Really great component, thanks. But here is not possible to load component asynchronously.

Vue.component('croppa ', resolve => {
    require.ensure([], function() {
        require('vue-croppa/dist/vue-croppa.css');
        resolve(require('vue-croppa'));
    });
}); 

I need a construction like that. But Vue.component already in it. Can you provide some methods to get exactly component? Like require('vue-croppa').component. Because here is nothing extraordinary in install script. Looking forward. Thanks

There must be a meta-data in the image file which specifies the orientation.

trying to access to a image in a different server gets

Access to Image at from origin 'http://localhost:4500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4500' is therefore not allowed access.

I am using vue-croppa in Nuxt.js project which runs webpack to resolve images.

I am trying to setup initial image but it doesn't work for me. I tried:

<croppa initial-image="~/assets/img/profiles/1.png"></croppa>
<croppa initial-image="@/assets/img/profiles/1.png"></croppa>
<croppa initial-image="./assets/img/profiles/1.png"></croppa>
<croppa :initial-image="'./assets/img/profiles/1.png'"></croppa>

Any help is appreciated. Thanks.

After using the tag to set an initial image, how do you change it? Say, the User did some action on a form which then required a different image to be displayed?

@zhanziyang I'm having trouble with the big base64 strings. It's slowing my entire website after sending the data to vuex store, so I think blob is a better solution for me. Can you write an example using promisedBlob, showing how to read the blob string generated, in a <img> tag? It would be interesting to put in the docs.

When the initial image is loaded, the request to get its content does not contain the authentication information that my server needs. It may be due to the way the img element is created.

A simple solution may be to have the img element in the Vue template.

你好！
我自己使用和Demo页选择图片都是，点击后，要等好一会才弹出来文件夹选择，用的是Chrome

Using the very basic

import Vue from 'vue';
import Croppa from 'vue-croppa';
Vue.use(Croppa);

I'm seeing the following stack trace upon booting the app. Is HTMLImageElement a native object type of Vue or is that something in your library specifically. I can't find much on it and it looks like the only place you use it is the initial-image option. Seems like a great library, would love to get this working.

Call Stack: ReferenceError: HTMLImageElement is not defined
    at .../node_modules/vue-croppa/dist/vue-croppa.js:389:26
    at commonjsGlobal (.../node_modules/vue-croppa/dist/vue-croppa.js:10:82)
    at Object. (.../node_modules/vue-croppa/dist/vue-croppa.js:13:2)
    at Module._compile (module.js:624:30)
    at Object.Module._extensions.(anonymous function) [as .js] (.../node_modules/node-hook/index.js:73:14)
    at Module.load (module.js:545:32)

Why is this present:

For me it makes no sense to have it in here.

This is reproducible using the demo.

Hello,

I noticed that nothing happen when i tap on the area, or when i click the button
<button @click="myCroppa.chooseFile()">CHOOSE FILE...

I read that the way the input is hidden matters for Android phones
http://jianjye.com/how-to-fix-the-trigger-click-file-upload-input-android-4-2-2-stock-browser-problem/

tested on Samsung S5mini
Android 6.0.1

@zhanziyang I'm using a vuex plugin that persists the session state, but the blob output doesn't persist after page refresh. It becomes an empty object. (it's the only one with this behavior). Do you know why?

Do you have plans to add support for drag and drop an image?

First of all, thank you for this plugin! It's a great solution our needs. Your hard work is appreciated.

I'm trying to figure out if there's a way to use a range slider input for setting the zoom/scaleRatio .

It would have to bind to the scaleRatio property, but not sure if croppa supports this right now, or if there's possibly a hacky way to do it via the zoomIn() & zoomOut() methods.

I noticed that if you use vue-croppa on a PNG file with transparency, that you lose the transparency and the background is the same grey used for the background of the vue-croppa control. If the canvas color is being set to the grey color, could this become the background color for the image.

I was wondering how would you handle multiple croppa instances.
My case: I have 3-4 croppa instances each nested in a tab component, when in the final step, I would like to crop & upload all images from the single tabs.

btw.. I love croppa!! :-)

var app = new Vue({
el: '#app',
data: {
croppa: {}
},
methods: {
upload() {
if (!this.croppa.hasImage()) {
alert('no image to upload')
return
}
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
this.croppa.generateBlob((blob) => {
var fd = new FormData()
fd.append('file', blob)
$.ajax({
url: '/test',
data: fd,
type: 'POST',
processData: false,
contentType: false,
success: function(data) {
console.log(data)
}
})
});
}
}
});

I have method:

public function postImage(Request $request) {
$data = Input::get('file');
$base64_str = substr($data, strpos($data, ",")+1);
$image = base64_decode($base64_str);
$imagename = uniqid('przyrzad_').'.jpg';
file_put_contents(storage_path().'/app/public/'.$imagename, $image);
}

Why save me emty file with correct imagename?

If you want to keep a "dirty" flag, which gets set to true when the User does a Zoom or Move this is easily accomplished. But, if the User closes the image with (X) then there is no signal emitted to know the image is gone.

Is there a support for node env to allow server side rendering with vue-croppa?

The 2-fingers gesture could also be used for rotating the image on the canvas.

Failed to mount component: template or render function not defined.

Initially asked in #51 by @PrimozRome.