Thanks for reading this question :)
Goal:
I am using Fabric.js as a base for image editor (crop and resize features for now mostly).
My goal is to load some high-quality image (like photos) rotate or crop it and then export as DataURL (in original quality or near to it).
Solution:
To add such a big photo on canvas and be able to export it bad with the same quality - I set width and height of canvas equal to image's width and height (2560 × 1600px) and then compress it using css to 640x400px (editor size). (I used https://stackoverflow.com/a/17035046 as a base)
In this case I still can export image in big dimension using canvas.toDataURL() - it will be about 2560x1600 (this is my goal).
How it works: http://jsfiddle.net/handmade/Lqsb0kwv/4/
Problem description:
I've got a problem after adding zoom feature (canvas.zoomToPoint(...)) to my editor and it is related to css width and height limitation of canvas.
Try to change size of image using controls in jsfiddle above and you will see an issue.
Works fine if...
...if I don't use css limitation: http://jsfiddle.net/handmade/Lqsb0kwv/5/
Questions:
I've read 90% of Fabric.js docs, examples, tutorials, questions here on Stack Overflow, but I didn't find a solution for my issue.
I am not sure that using css to limit canvas is a good practice.
I am not sure that my way of getting back changed image in big dimension is a good way.
Does anybody know better way to export image in good dimension?
Does anybody know if issue with scaling/rotating image after zoom (+limited by css) is a bug in Fabric.js?
Thank you for any answer!
Related
First, I know this is a terrible workflow; it's being enforced on me by my employer's SDL Tridion Docs content management system, which seems to specialize in showing complete contempt for its users.
I need to open a raster image in Gimp, paste in a new image, resize the canvas, save and close. This works fine when the pasted-in image is smaller than the original image, but when the pasted-in image is larger I cannot for the life of me find a function to detect the size of the pasted-in image and expand the canvas to fit; all of the functionality seems to assume that the new image will be smaller. I'm looking for the equivalent of the "resize document to selection" command found in Inkscape.
If you do this manually, see Image>Fit canvas to layers.
If you do it in a script, pdb.gimp_image_resize_to_layers(image) in python, something similar in Script-fu.
I am really stressed out with this, i have built an entire designer with Fabricjs, gone through some right hoops with the text to make it work how it's needed. The problem is now when the data from the canvas is sent to the server for a full resolution render with NodeJs (fabricjs in node) the fonts are coming out looking different to they do in the browser.
All the fonts are installed on the server, and the correct font does render, it just seems to have different spacing between the characters even though the fabric version is the same and all the extension code is the same on browser and server side, all the TTF fonts are the same etc etc
Here is the browser version:
And here is the node js version:
As you can see the font is correct on the node one compared to the browser one, but it's being rendered slightly differently.
Is there a solution anyone knows of to fix this?
I don't believe that there is any way to solve this problem when using fabric.js
Text in fabric.js can be scaled arbitrarily, but then it is rasterized and displayed as a canvas object like any other image.
You can see in the fabric.js demos that the text will stretch like an image until your input is complete, then it re-renders to a new image at that scale.
Knowing that this is how fabric.js handles text, it is possible to select two scales that produce quite different results:
In the image above you can see that the two fonts are pretty much the same size, but the one on the right (slightly larger) has been rasterized such that it appears to have a bolder appearance. It's the best example I could reproduce with limited time.
This is why rendering the fabric.js objects in your browser at a smaller resolution than the server will lead to the font appearing slightly different.
If you try rendering the browser version at the same size as the server you are likely going to get the same results.
I was trying to use a coloured texture (PNG 24/RGB) for a POI (bicycle_parking) and it was not being rendered. It was added properly as a texture, it just won't be rendered on the POI.
After some testing I came to believe that POIs only accept grayscale textures that can later be filled up with a color. Is this right?
I also found out that the icon needs to be of a specific size (I got it working only at 32x32 pixels and 512x512, but the scaling did not make it look good). Is there any information regarding this?
Now I have a grayscale icon (mostly white) but the fill color does not change the white as expected. This is as far as I got..
Here's a set of icons similar to the ones I need to render into POIs
How could I achieve adding this type of icons as the texture of a POI? Workarounds/hacks are welcome as well :)
Thanks!
The texture of the Poi must have a size that is a power of 2 and goes from 32x32 up until 512x512. Also make sure that the colour code of that image is RGB anything else wont work. For the best visual result you have to create 3 sets of pngs for different screen densities, for example see heatmap_legend.png then look at heatmap_legend#2x.png and heatmap_legend#3x.png, you can find them in the "common" folder.
So turns out that the color wasn't a problem after all. It was quite tricky to get one image working, but once I had the image working, adding color to it and saving the PNG worked just fine.
The problem with the image size I experienced is still happening. You need to export it in 32x32, 64x64 or 96x96 in order to StyleEditor not to crash when opening the file.
ive used an online srpite service http://spritegen.website-performance.org/ but i want to know how to make them by myself.
How can i save an image that it should be so small but when used on my web site it comes out normal size?
Sprites aren't about making the image itself small, it's about decreasing filesize by packing several images into one.
Take a look at Yahoo's icon sprite. Notice that they have all their section icons stacked vertically in one large image. They then use CSS to position the background to only show a small window of the sprite image, thus giving you just the icon.
In the end, it's up to you how you arrange your sprite. Check out the bottom of Amazon's sprite.
Either way, hopefully that helps gives you a better idea of the concept of sprites.
From the very site you link:
CSS sprites are a way to reduce the
number of HTTP requests made for image
resources referenced by your site.
Images are combined into one larger
image at defined X and Y coorindates.
Having assigned this generated image
to relevant page elements the
background-position CSS property can
then be used to shift the visible area
to the required component image.
So there is nothing magical involved: you simply need to pack all your pictures into a single giant image with your favourite graphics tool and insert them as CSS background. Just look at this CSS sprite by Google:
When the width of the brower is changed, the image's width or height is also changed dynamically, anyone knows how to do it?
And I found the image's max height of each rows is not the same.
Thank you very much.
I am sure Google's image application is a little more complicated than can be written in a single post, but you could mimic some of the effect with some clever use of jQuery. Here's a quick tutorial on a resizeable image grid using a slider -
Image resize tutorial
You would need to change the trigger from a slider to the resize event, but this has the basics you need.