Create image/svg synchronously

[dschreij]

Hi there, thanks for your great work on this library. I am trying to integrate rasterizeHTML into a program that doesn't play well with the asynchronous nature of promises. Is there a way of creating an image object with the data:svg+xml string and simply returning it (so do it in a synchronous fashion, allowing execution to stop until the image object is created and returned)?

I use easelJS/CreateJS to render everything to the canvas and now there is a race condition in which either EaselJS or rasterizeHTML draws to the canvas first. EaselJS furthermore allows to buffer drawing operations, while rasterizeHTML draws everything to the canvas straight away.

Ideally, I would like to be able to do something like this:

// Create an HTML img object
img = rasterizeHTML.createImage('<h1>Html text</h1>');
// Pass the HTML img object createjs Bitmap function
var bitmap = new createjs.Bitmap(img);
// Do some positioning
bitmap.x = 100
bitmap.y = 150
// Put the bitmap in the drawing cue which is processed when stage.update() is called
container.addChild(bitmap)

Basically you do this in the modules document2svg and svg2image, but these are not accessibly from the outside if I understand correctly. Thanks!

[cburgmer]

Can you have a look at #110? This seems like a similar problem, and maybe there's a few things in there that can help you dig around more.

Also have a look at the API, you can get hold of the image and decide for yourself when to draw it.

Happy to discuss though what other methods we could look at. As I mentioned in the issue above, this might be a tough thing though.

[dschreij]

Hey, thanks for your reply. I read through #110 and it appears to be largely similar to my issue.

I indeed tried to use the resultImage.image object, but since this is returned to a promise's .then() function, there is no way to use it outside of the promise. Therefore I can't put the image object in the drawing queue which my program implements. The current way rasterizeHTML is implemented only allows it to be used in asynchronous fashion (which is the better way in my opinion), but it doesn't really allow it to be used with libraries which have a more synchronous nature (such as CreateJS).

I solved my problem by manually doing what rasterizeHTML does (e.g. create an svg and embed the HTML contents), but I'll leave it up to you if you want to keep this issue open in case you think synchronous functionality is a worthwhile addition.

[cburgmer]

Let me have a look whether we can split out the final synchronous bits into a meaningful library. The current constellation does an awful lot, and some users might not need all of this. A smaller library could ship less code and possibly also solve the async issue. rasterizeHTML can stay the way it is, but delegate to the smaller lib if we decide to go that way.