Load image from JSON made in 1.7 into 2.0 not the same #4235
Comments
blobinabottle
changed the title
|
good point. for me now is a mess going in the json, could you eliminate what is not image from your json fiddle? Also do you think you can explain me why / how you ended up modifying the image width/height? |
|
Cleaner version of json here: |
|
i think anyway flagging the new json of fabricjs as version 2 must be done. In your case is just needed to reset image width/height reading from element and apply a scale factor. let me study the thing better but i think is fairly simple. |
|
I encountered the same thing. In my application it is very important that all objects have exactly the same strokeWidth and shadowOffset. Because those are influenced by the scale of the object, i initially made a simple function that kept the scaleX and scaleY at 1 and changed the dimensions instead doing something like: object.width = object.width * object.scaleX;
object.height = object.height * object.scaleY;
object.scaleX = 1;
object.scaleY = 1;This kept the objects nice and uniform, but since version 2, the images were not displayed correctly. I fixed that using another function that reapplies scale to images, and uses it to scale the strokeWidth and shadowOffset accordingly. To do this i used the image's natural dimensions. Something like: object.width = imageNaturalWidth;
object.height = imageNaturalHeight;
object.scaleX = object.width / imageNaturalWidth;
object.scaleY = object.height / imageNaturalHeight;
object.shadow.offsetX = object.shadow.offsetX / object.scaleX;
object.shadow.offsetY = object.shadow.offsetY / object.scaleY;
object.strokeWidth = object.strokeWidth / object.scaleX;
// strokeWidth needs improvement, maybe scaleX != scaleYI am doing this for every image now, i was still contemplating how to use some kind of indicator that this is not necessary. A version flag in the json would be perfect for this |
|
A json version is necessary. For stroke purposes you can get a better effect if you scale the canvas before stroking. Changing the way images uses width/height is the only way to introduce cropping. I could have introduced cropWidth and cropHeight, but sincerly i do not like that you can scale an image with both width/height and scaleX/scaleY, is just confusing. |
|
I agree, this is the most logical way to scale and crop. Thanks for the advice on the stroke! |
|
just to say that i ll try to push the version in json later today and post a snippet to convert the image json so that you are not blocked to move on. |
|
Awesome. I agree too, this new way is logical to me. And we'll be able to crop! that's insanely cool :D |
|
missed the timeline. did not find 20 minutes, maybe tomorrow after travelling! |
|
I m undecided if to ouput the version for each object ( since someone may be storing individual objects and not full canvases for any reason ) or output just in canvas and then modify ( a lot ) the reload process to pass down the version property. Suggestions? |
|
By object is a good idea. Much more flexible. I see in my workflow I work a lot by outputting the object in console. It's a detail but it could help spot bugs quicker I think :) |
|
so i opened #4251 and added here a snippet that could convert the old designs: http://jsfiddle.net/fmgXt/852/ i still have to solve the positioning problem, will do asap. |
|
Could you try if this solve all the loading of all designs? fabric.Image.fromObject = function(object, callback) {
fabric.util.loadImage(object.src, function(img, error) {
if (error) {
callback && callback(null, error);
return;
}
fabric.Image.prototype._initFilters.call(object, object.filters, function(filters) {
object.filters = filters || [];
fabric.Image.prototype._initFilters.call(object, [object.resizeFilter], function(resizeFilters) {
object.resizeFilter = resizeFilters[0];
if (typeof object.version === 'undefined') {
var elWidth = img.naturalWidth || img.width;
var elHeight = img.naturalHeight || img.height;
var scaleX = (object.scaleX || 1) * object.width / elWidth;
var scaleY = (object.scaleY || 1) * object.height / elHeight;
object.width = elWidth;
object.height = elHeight;
object.scaleX = scaleX;
object.scaleY = scaleY;
}
var image = new fabric.Image(img, object);
callback(image);
});
});
}, null, object.crossOrigin);
}; |
|
Did someone tried the above code? |
|
On my end this is working! Thank you! Will you add this to Breaking change page? Do you think it could be useful to add these functions that help migrate from 1.7 to 2.0 into fabric.utils? |
|
i asked on purpose, i added it but with no internet from home is hard to publish things now. |
|
@blobinabottle do you made extensive use of filters? i think some parameters changed in filters. |
|
No we just used Tint until now. But I'll check if it's working with Brightness and some others. |
|
Doesn't seems to work: |
|
As you said it's because of the 0-1 0-100 (or more, here contrast is 136 in Fabric 1.7) |
|
so i ll prepare a file that keep all the translations of values. Webgl has an higher precision in filtering, so it makes no sense to give it -100 + 100, -1 to +1 with any step is fine. When getting back on the canvas everything is translated to 0 - 255 so most of this precision get lost. |
|
I wonder where things stand on this. I'm now testing with 2.0.0b7 and find that I cannot load canvas from JSON if its an older JSON (I have a large number of projects, etc. which were composed under earlier versions). Currently I load using: When I call this it errors: TypeError: undefined is not an object (evaluating 'klass.fromObject') - fabric.js line 902 |
|
Do you have custom classes? |
|
No custom classes. Would it help to give an example JSON? This is one that was created in and loads fine in 1.7.17 and 1.7.19 but fails to load on 2.0.0b7. If there's something I can do to help it translate it would be fantastic:
|
|
Any pathgroup? pathgroup needs a special import that is in the docs on fabricjs.com |
|
That makes sense. At least some of the objects I'm trying to reimport contained one or more SVGs which had been added to the canvas, then serialized. I'm having trouble finding there the special import is in the documents. loadFromJson worked fine prior to v2.0.0, but I'm hoping to make the jump to 2.0.0 asap because the handling of newly imported SVGs is fantastic. Can you point me in the right direction? |
|
if you click the second link |
|
Sweet, that did. Thank you so much for the help! |
|
I think there are two distinct issues discussed here, I will be referencing the original issue. So your issue is following: the image you are adding on canvas is larger than the fabric.Image dimensions, thus image is cropped. I had the same issue, my source image was 100x100, but when I created the fabric.Image as 200x200, the image would not be scaled up. I traced it back to this line, which I fixed in my branch ( @asturur is more than welcome to include it in the master, I think it should be in master) Here is the same fiddle with fabric 2 build of my fork: |
|
i lost this comment. they can actually reduce the image viewable are but will not stretch the image if the viewable area is bigger than the image. I should write an example like for pathGroups on how to load old design in the new code. |
|
Added conversion pattern for filters |
|
Hi, I'm having the same issue going from v1.7.3 to v.2.4.6, canvas.loadFromJSON, images are not showing at all. Is there a migration path or documentation to help resolve this issue? |
|
http://fabricjs.com/changes-introduction follow those links. It depends what you had on the canvas. |
|
@asturur I follow the changes to remove alignX, alignY, meetOrSlice, but the images between text still aren't showing except for the logo which is still not scaling properly.
Here is the example json. |
|
Hi @asturur any idea why the images aren't showing up? |
Version
2.0b6
Test Case
http://jsfiddle.net/fmgXt/849/ Fabric 2.0
http://jsfiddle.net/fmgXt/848/ Fabric 1.7.15
Steps to reproduce
load a JSON made in Fabric 1.7 in Fabric 2.0
Expected Behavior
Images should load the same way.
I guess it's because of the change in width/height behavior?
Actual Behavior
The image in Fabric 2.0 is cropped and bigger. Can figure out a way to make it similar to Fabric 1.7.15
The text was updated successfully, but these errors were encountered: