Discussion on Slim Image Cropper, Responsive Uploading and Ratio Cropping Plugin

pqina

pqina supports this item

Supported

This author's response time can be up to 1 business day.

235 comments found.

How can I add a class attribute to the hidden input that is generated on ajax upload?

No problem! :-)

<!-- basic slim setup -->
<div class="slim" data-did-init="handleSlimInit" />

<!-- callback handler -->
<script>
function handleSlimInit() {
    this.element.querySelector('input[type=hidden]').classList.add('my-class');
}
</script>

Something like that should work.

Ah yes perfect. Thanks so much!

Thank you for purchasing, and thanks for the rating! Truly appreciate it. :-)

Great plugin. Is it possible to display the predicted image size as you are cropping?

Thanks! And thank you for purchasing :-)

This is currently not a default functionality. I’ll add it to my future feature list, as I see it might be useful. :)

Thanks. I think it would be a worthwhile enhancement

Hi. Your product is truly awesome. Would you consider adding an image picker for all already uploaded images? Or creating a separate script?

Thanks! Glad you like it :-)

This is currently on the todo list for a future version. However it’s still a couple months away.

Hi, so I got everything working with submitting a post on WordPress on the front end. I do have an issue with editing a post, however. On submit pos,t the cropper is set to (push) and the same with edit post. On the edit screen, I set it to bring up the WordPress featured image. However, on save it clears the featured image. I’m trying to figure out a way to keep the featured image the same(if it isn’t edited) rather than re-uploading the same photo and creating another image attachment. Any suggestions?

I think you’d have to check if the value has been changed, if not, retain the original image. I think the value will be empty by default. Maybe setting data-save-initial-image to true will work in this situation? I’m sorry, it’s difficult to tell from your comment how the code is setup exactly so hard to give sound advice.

Hi, I am using the vue.js component, when an initial image is set or an image is uploaded, no remove icon is displayed.

My question is how can I get the remove icon to be displayed, secondly, is there a method that’s called which I can then handle the deleting of the image from the file system.

Many thanks.

also transparent image have a black background, can this be changed? again using the vuejs plugin

Bind the following function to the didTransform callback and adjust depending on the background color you want:

function fill(data, ready) {

    // get the drawing context and size of the output image
    var ctx = data.output.image.getContext('2d');
    var width = data.output.width;
    var height = data.output.height;

    // draw behind current image
    ctx.globalCompositeOperation = 'destination-over';
    ctx.fillStyle = '#fff'; // use white background color
    ctx.fillRect(0, 0, width, height);

    // restore to default composite operation (is draw over current image)
    ctx.globalCompositeOperation = 'source-over';

    // continue saving the data
    ready(data);

}

For the remove image part, add a didRemove callback and bind this method:

function handleImageRemoval(data) {

    // can't continue without server file name
    if (!data.server) { return; }

    // setup request and send
    var name = data.server.file;
    var url = './async-remove.php';
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url + (url.indexOf('?')===-1?'?':':') + 'name=' + name, true);
    xhr.send();

}
devgm

devgm Purchased

Hello, just want a simple way after crop in ajax to send the file name to my php script I have. The documentation wasn’t clear and it was returning this json that I had to literally strip the slashes from and send from input[name=”slim[]”] .. :’(

amazing plugin though by the way :) !

Hi! Glad you like it :-)

I guess you’re using the async.php file and then need the final filename for when the form is actually submitted.

Slim basically stores the server response in the hidden input field. So, I think in this case it’s best to adjust the async.php file output.

Replacing the last line with echo $response['file']; should do the trick.

Is it possible you could provide a node/express API similar to how you’ve provided the PHP API? I am using node/express with multer but cannot get it to work.

Hi! Thanks so much for purchasing Slim! :-)

If your uploading async (with data-service) I think the file should be accessible using Multer. If you’re posting a form (sync form post) the data is sent as a JSON string containing a base64 formatted output file. In that case Multer is not going to receive the file, it’ll be available as a value of a text field. Hope that helps clear things up. Let me know if you have any further questions.

I’m working on a new version of Slim, it’s totally new rewrite, this version will include a NodeJS backend. But, it is still months away from release. So unfortunately I don’t have anything on hand at the moment.

I think I got it working. Thanks for the response.

Very glad to hear that! :-)

Hello, I have a new feature request / help. We would like to chose for each image the proportion of the preview image. We need this only for layout purposes. We don’t want to change the proportions of the image saved. Can someone help? Thanks

Hi, you can change the width and height of the slim cropper with max-width and max-height styles, does that solve the issue?

Tortschi

Tortschi Purchased

Is it possible to view and save the images automatically?

Hi, I think if the input is a jpeg (jpeg does not support transparency) the transparant parts will become black. You’ll have to force output to type png. Setting the data-force-type to "png" should do the trick.

Tortschi

Tortschi Purchased

My Fail. Sorry. Thanks for helping again :)

No problem, just glad to hear it’s working! :-)

tmhamala

tmhamala Purchased

Hi! I like Slim Image Cropper a lot. Thanks for a great tool!

Lately I have been using Slim with Angular 2 wrapper. It works great (with TypeScript compiler) until I try to deploy my application. Angular compiler (ngc) always raises an error “RangeError: Maximum call stack size exceeded” when I try to do AOT compile and Slim is imported to the application module.

Do you know any workaround for this issue?

Angular-cli version is latest 1.2.4 Angular version is latest 4.3.1

Hi, that’s super odd, have you downloaded the latest version of Slim?

tmhamala

tmhamala Purchased

Yes, I downloded the latest version of Slim. I think I found out what was the problem after analyzing slim.angular2.ts file. It imports ngModule and when I import slim in my main module there will be an import loop what causes stack overflow. I removed ngModule import and now it compiles just fine. Still Rollup tree shaking cannot be done due to ‘require’. I’m sure I’ll find solution for that, but If you’ll have extra time someday it would be cool to have general ‘how to do angular aot deploy with slim’ instructions.

I’ve had earlier questions about angular-cli, I think you run into these errors/warnings for any kind of third party library :-)

Anyhow I’ve made the following changes to my angular-cli test project to get it to work correctly.

//add to /tconfig.js

"allowJs": true,
"allowUnreachableCode": true,

// add to src/typings.d.ts

declare var require: any;

// add to /.angular-cli.json "styles" array

"app/slim/slim.css"
g-thib

g-thib Purchased

Hello, Some parameters of the jquery method seems bugged, for example:

$ (Selector) .slim (‘ratio’, ‘3: 2’); Works and returns an object while:

$ (Selector) .slim (‘crop’, {x: 0, y: 0, width: 100, height: 100} // crop done! });

Returns an error: TypeError: t is undefined in the files slim.jquery.min.js: 6: 277

Is there a solution to this problem?

g-thib

g-thib Purchased

Hello and Thank you for your responsiveness Actually it solved the problem but I am confronted with another problem, when I change the values x y width and height dynamically, Only values of width and height are taken into account but the x and y values do not change (data.actions.crop.x and data.actions.crop.y)

$('#idButton').click(function () {
var vx = $('#x').val();
                 var vy = $('#y').val();
         var vw = $('#w').val();
                 var vh = $('#h').val();
var result = $('#cropper').slim('crop', { x:vx, y:vy, width:vw, height:vh }, function(result) {
  console.log(result); // Data.actions.crop.x and data.actions.crop.y does not move
});
});

Hi, Just tested, it’s because you are passing strings instead of numbers. Please add parseInt around your values.

var vx = parseInt( $('#x').val() ,10);

Please keep in mind that you’ll have to test if the field contains a value at all before calling parseInt() to prevent NaN values.

g-thib

g-thib Purchased

Effectively. Thanks

ArkSai

ArkSai Purchased

Hi, i’m hosting my images on AWS S3 and encountering CORS error, would you know a best way to fix this?

The Access-Control-Allow headers are indeed present. Just tested on my localhost and the image load correctly, see screenshots here: http://imgur.com/a/JQNwN

Could be that your browser cached the old resource (without the CORS settings). Clearing cache could solve the issue.

ArkSai

ArkSai Purchased

thank you, it very frequent to happen on my google chrome, it loads then after awhile it shows cors error

Does clearing your cache resolve the issue? Or does it still happen? If so, do you have a publicly accessible test case?

g3org3

g3org3 Purchased

Hi! great plugin! I have a little problem, I have been using the plugin on a project still in development, but the client whant to change the aspect ratio from 16:9 to 4:3, i changed the attribute as the documentation says, but my output doesn’t refresh. I changed data-ratio and data-size to 4:3 and 1024,768 without seeing any changes on the interface. Is there anything else I have to do so this behavior changes as required? Thanks in advance!!

Hm, that should have done the trick, this is a very core functionality of Slim, I’m not sure what could cause this. Do you have a public test case, happy to take a look.

Tortschi

Tortschi Purchased

Hello, we use this Command for Avatar: . We found a Problem with Quality. The Avatar have not a really good Quality now. Have you a trick or Tipp for us?

Hi, the code seems to be missing. Can you please use the support tab and send me links to the input image and the output image, I’ll run some tests.

Tortschi

Tortschi Purchased

You get Email :)

Hi! I replied a couple hours ago, might be stuck in a spam filter :-)

It seems that there is a bug when loading photos taken with the camera on chrome for ios (v60). The page fully crashes after confirming the picture edit.

I had a small one in there, but just made it longer (1 second). It pulls up the edit window, however the crashing happens after I hit confirm.

I’m going to continue toying with it to see if i can isolate any other issue that may be effecting it.

But in either case, I still think it would be a beneficial feature to add a third option to instantEdit: [true, false, user]; where the “user” option opens up the edit window directly after a file is loaded from the user, but does not open it up if an image is programatically loaded into the slim wrapper. Would this be possible?

thanks.

update: Was getting very inconsistent results after trying things like closing all tabs, clearing cache, exiting chrome.

What seems to resolved it for now was restarting the phone. So who knows what kind of issue it may have been. thanks for the help (and especially for such a useful product!!)

pqina

pqina Author

Glad to hear it’s resolved :-) And, no problem, always happy to help out.

Should you require assistance in the future, it’s best to use the form on the support tab, simply quicker to reply on emails :-)

by
by
by
by
by
by