mattketmo / darkroomjs Goto Github PK

Ability to zoom on the photo

@MattKetmo when do think starting to tag versions of DarkroomJS? Would be great to have versioning other than master :)

Require a slider (UI).

How can I make the "Save" button overwrite the original image? Is that possible?

If I build this project with grunt on Windows (setting engine: 'node' in the webfont options), then I wind up with an interface that has itty-bitty icons:

They're nearly invisible!

Currently, if the src of the image is changed again, the bound onload call will be called again, which results in an error because replaceChild won't work after already being destroyed.

This is the fix I implemented, not sure if there's a more ideal way.

image.onload = function() {
  container.parentNode.replaceChild(image, container);
  this.onload = null;
}

Can I hide the save button? I don't have a use for it, and would like to not show it as it could be confusing, if it's there but does nothing.

The link "a few lines" to https://github.com/MattKetmo/darkroomjs/blob/master/src/plugins/darkroom.save.js on http://mattketmo.github.io/darkroomjs/ is broken... a beautiful 404 github page shows.

Any chance to get this fixed?

Cheers :)

Please, add support for AMD modules.

If before init new Darkroom() tag <img> has any html attributes (id, alt, etc.)
Then after Darkroom's "save button" tag <img> has only src attribute.

P.S.
Thanks for a great plugin!

Would it be possible to ship a minified CSS and JS version right with the darkroomjs project? This would allow to test quickly and hence to accelerate the usage of the lib!

Currently we are only able to set up save event to true or false - save: { }

We need to run/make JS callback after clicking on Save icon.

Is it possible to add this function?

I'm not a JS developer and I have been fiddling with JS, Node and grunt but I cant get it to build. Now I am stuck on an error with webfont again.

Could you please add a release so people don't need to build themselves?

Hi Matthieu,
i would like to set the maxWidth for the viewport(container div) only, not the canvas. Let me explain with example: There is an image which I want to crop: 1000x1000px; The browsers width is e.g. 500px; So now I want canvas itself to remain 1000x1000px, but the canvas element set for 500x500px.
As for now, when I set maxWidth:500, then it shows me as desired: 500x500px, but it also scales the canvas itself to 500x500px, it means the original image is also scaled. So when I crop some region of e.g. 50%, I have then the image 250x250px, but it should be 500x500px, as original image is 1000x1000px.

I can set max-width and max-height of the darkroom-image-container for 500x500px, and it works great : canvas remains 1000x1000px; but then there are problems with cropping plugin, as it paints cropping area not correctly.

I will dig deeper into this, but also created an issue in case you have some solution for this, or some tips?

Hopefully my explanation was not so bad)

Cheers, Alex

Can you add the supported browsers ?

I'm aware of Canvas but is it the same for the entire plugin ? :-)

I am using fabric.js to create images in canvas.My canvas can have many images. I want to implement darkroomjs for cropping,redo and undo. How to do?

I would like to save images (big ones, scaled down with CSS to be darkroomed) while maintaining original dimensions. Looks like the img > canvas conversion reduces the dimension of the image to those on the screen, and not the naturalWidth/naturalHeight of the initial image.

Any idea how to remedy this?

#14 seems to address the same issue.

Hi Matt and Company,

I've been playing with Darkroom and like the functionality and design. However, one of the requirements for my website is to allow a user to load a image locally into the browswer, and use Darkroom to change the image. And of course, send the results to the webserver.

It's not a slam dunk... Darkroom doesn't provide this functionality, so I had to develop some pretty ugly routines to reset the contents of the Darkroom.canvas and Darkroom.image.

I think that with a few changes, Darkroom could support this very easily.

The cropping area is now limited to a rect, it would be nice if we could make it to have different kind of shapes based on a path instead of rect.

Right from the official example page itself

Though the edges get clipped off when saving the image, it does become an issue if the save plugin is turned off.

Hi MattKetmo, great job you've done, thanks a lot, but I have a question for you:
while editing a image, there're options about max height and width, the image is displayed in this size, what ever resolution it is, when saving it, it using the max height and width as the output image size, but I need the image in a higher definition, can I do this ?

Thank you for the help

Hello @MattKetmo !
Thank you for this project!
Do you have any plans for integration your library with react jsx?
I Added d.ts for using your libs with typescript DefinitelyTyped/DefinitelyTyped#5784.
may be you want add any comments/ tests?
Thank you!

Is there a way to dynamically hide the toolbar after user clicks on right tick. I am creating canvas like this:

new Darkroom('#target', {
// Canvas initialization size
minWidth: 100,
minHeight: 100,
maxWidth: 500,
maxHeight: 500,

// Plugins options
plugins: {
crop: true,
save: true
}
});

Beautiful product!

I have one thing I need to do: draw a simple rectangle shape. User clicks mouse, drags it to size preferred, solid shape is overlayed on image. Is this natively possible?

I am setting up bower to pull in the dependency for darkroom, but there is no specific version number so it has to match by the *.

Doing a "bower install darkroomjs -S" appends to my bower.json:
"darkroomjs": "*"

However it doesn't have a version number. I believe this is because the versioning on the branches doesn't match the expected bower format: (http://stackoverflow.com/questions/26571739/bower-install-no-versions-available).

I don't know how to fix this but could have a go as if master updates it will update in our codebase whenever we do an update.

Thanks

Hi,

Sorry - I'm sure its a dumb question - but Google searches on this excellent cropper tool produce very few results...

How do I actually hook into the Save Event?

(I just need to trigger some javascript to save my new nicely cropped image)... and can't seem to figure it.

Many thanks,

Peter

I would like to trigger stuff on my side once the user hits save, how can I do this? I could bind an action to Darkroom's save button on my side, but this does not seem right. Any suggestion regarding how to get this elegantly done?

Using the bower, I tried to point to the fabric.js downloaded but the cut image does not work right.
The 1.3.x tag on github only goes to 7, where they managed to do is 1.3.12 of the vendor folder?

I noticed that the JavaScript file doesn't have a license header. This seems to be a common practice amongst JavaScript libraries.
Would it be possible to add the information to the file so users can easily adhere to the project's license?
Something like:
Licensed under the MIT License
Thanks.

Hi, can i use <canvas> instead of <img>?

I have used glfx.js plugin too.

I'm having a problem with adding event listeners to the element. At the start of my code, I'd like to add it like so:

var darkroom = window.darkroom = new Darkroom('.my-element', {});
darkroom.addEventListener('image:change', function() {});

The problem is that the image hasn't loaded yet. I don't see a way for me to do this properly. Currently I'm using a setTimeout, but it's too unreliable. Is there another way to do this?

Perhaps darkroom.canvas can be instantiated before the image is done loading?

How does one get the final product of editing in say in a URI or base64 image?

I was guessing that the 'save' parameter took a function and the final image would be passed to that function. Seams like save just turns off editing?

I can hack my own save function to snapshot the final product, but I'm guessing there's a better way.

Add styles and option to change toolbar position (top, bottom, left, right)

I've noticed sometimes when I draw a crop area, it appears to the left of the area where I'm creating it and also the handles dont work, but when you move the mouse over to the right roughly the same distance that the crop area is displaced, you'll find it shows the crop handle.

very strange, but I've found it consistently with one image I've got, but I'm trying to narrow down why it would happen

With simple code I get blurred image when use darkroom, but with pure FabricJS all ok:

<img src="testimg2.png" id="orig" width="600px">
<img src="testimg2.png" id="target">
<canvas id="c" width="600px" height="210px">
<script src="js/fabric.dr.js"></script>
<script src="js/darkroom.js"></script>
<script>
    var canvas = new fabric.Canvas('c');
    canvas.add(new fabric.Image(document.getElementById('target')).scaleToWidth(600));
    new Darkroom('#target', {
        maxWidth: 600
    });
</script>

example: http://sweb.artemiev.info/darkroomjsissue/
result:

How can I fix it?

There seems to be some conflicting when there is more than 1 instance of darkroomjs setup on the same page. Is this a known issue or is there a workaround for this? I have tried setting the return value from "new Darkroom" to different variables but that does not seem to solve the problem. Thanks in advance.

The image will not appear to the user as they desired, and the Base64 image will be even more wrong.

Is there a way we can disable save until the user accepts or denies crop mode?

Matt,
It's awesome and the only one of it's kind. I was so afraid I'd have to build this functionality myself.

One question, why not offer this totally client side code as a simple download (without having to build)?
I couldn't get Grunt working so I just downloaded your example site using wget and I'm modifying it from there. Seams to work fine. Am I missing something?

Thanks! Helped me a LOT!

Since Fontforge has been updated some weeks ago, the grunt-webfont plugin doesn't work anymore with the current icons:

Running "webfont:icons" (webfont) task
Warning: Something went wrong when running fontforge. Probably one of your SVGs is too complicated for fontforge.

1. Try to use “node” engine instead of “fontforge”. (See “engine” option in the Readme.)

2. To find “bad” icon try to remove SVGs one by one until error disappears. Then try to simplify this SVG in Sketch, Illustrator, etc.

Possible solutions:

• clean the SVG icons (I don't know exactly which part breaks)
• use the node engine in the grunt-webfont config (but it currently doesn't display the icons correctly)

When you want to allow the user to select an image and use darkroomjs on it, it'll create a button bar with a lot of buttons inside.

if that form has required validation elements, clicking any button in the button bar will trigger validation events, those events may ruin the user experience because it'll navigate to that element and show the failed validation message.

however the button will still work correctly

the reason for this is by default "button" html elements are of type "submit" and this means any clicking will trigger a validation pre submit event, which then triggers any validation warnings, blocking the submit event from happening.

attempting to catch the "invalid" event won't work since even if you do catch it, you can't accurately know it was the darkroomjs button which caused it since the invalid event can't be delegated, you need to trap it directly on the node which caused the validation error, meaning you can't know which button caused the invalid event to trigger

the only solution I've been able to find is to change the button type from "submit" to "button"

in the javascript of darkroom.js, line 124, where the button is created, you can add the following line, it'll fix the errro

button.type = "button";

I've already tried this and it was working just fine and everything is happening exactly as I expect it to.

Hi, I was wondering if it's possible to add a callback to the crop/accept button

See Android photo editor.

Hi, I'm switching from jCrop to Darkroom.js. I need to set the cropping area on init so that the user finds the cropping grid already placed on the image on load. In jCrop i used setSelect : [0, 0, x, y]. What is the Darkroom.js equivalent?

Thanks!

Good tool and framework. can you have the following features that are very needed for web page publishing.

1. drag and drop a new image file
2. scaledown high resolution image automatically to save network bandwidth
3. resize the image to different height or width. also support resize one input to multiple predefined size (e.g. thumbnail view)
4. add watermark with provided text

I need support for images to work w/ darkroom via url's. Fabric already has this built in and I hacked together a poor solution over the current release branch using fabric.Image.fromURL. Can you get this added as an option to v2 where it determines if it should load the image via url or new fabric.Image to avoid any CORS issues when trying to upload images to darkroom that are not local images

Would it be possible to define an ordering for toolbar buttons somehow ?
Could be added as an option for plugins.

Hello, I have installed all the components that the project needs to work but when I open the index.html on Chrome just the back and forward buttons appear. the crop and rotate buttons are not showed. If I open the file with Firefox all buttons are showed Do you have any tips to solve my problem? Thanks in advance.

Bower error on install

bower EMALFORMED Failed to read /tmp/daniel/bower/darkroomjs-8784-TGlera/bower.json

Additional error details:
Unexpected token }

Seems like something is wrong in bower file. Maybe the last comma in bower.json?

At the moment, the background color is hard coded in the lib

It would be really nice to be able to change this value from the options (for transparent PNGs for example).