[Request]Nw.js write image file

0 favourites
From the Asset Store
Game with complete Source-Code (Construct 3 / .c3p) + HTML5 Exported.
  • Okay so I tried many different plugins and solutions already, but nothing really seems to be doing that at the moment

    I need to save those images (0 to 100+) on the user disk, to load them back the next time they use the app

    Been using base64 loaded from txt files so far, but now I realize this slows down boot times immensely with many pictures...

    So the nw.js action "write file" can write text or a base64 string, but I believe it can also save image as binary files?

    Anyway that's what those guys seems to be doing? Let me know if someone can make sense of this into a plugin

    I need "automatic" save in a custom folder, without user dialog, just like "write file" does, but for actual image data

    http://stackoverflow.com/questions/6926 ... ge-to-disk

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Does Pode 's filesaver plugin work?

  • That's one of the plugins I tried yeah, but nope it opens a "save as" dialog on nw.js, so not really manageable for automating 100+

  • The performance dropped might come from 2 reasons.

    1. as you mention the image is saved in a text string , not a binary file. (In your given URL, it saved image in base64 string too, not a binary)

    2. file saving in official nw.js plugin is synchronous, events will be held until one file saved, then saves next file. An asynchronous file writing action might improve performance a lot, imo.

  • Yeah I can confirm #1, I tried yesterday to load jpg versions of the same text files, and it was much faster

    Not to mention the filesizes, as one of the pic was only 100kb in jpg, and goes above 1mb in it's base64 equivalent :p

    I'm mostly concerned about loading times, as saving happens once, only each time there's a new entry

    While loading happens every time the app launches, for each of the entries

    But yeah to be able to load fast I need to save those in jpg first through the code

    And could be interesting to see the difference in saving times for synchronous events indeed

    Are you sure they're saving in base64 in the link I posted? <img src="{SMILIES_PATH}/icon_e_sad.gif" alt=":(" title="Sad">

    I can't fully understand the code, but what about the "binaryData", and correct "png" extension there?

    require("fs").writeFile("out.png", binaryData, "binary", function(err)[/code:104tt3eb]
    Ok maybe the first answer looks base64, but how about the second answer "full solution" on that page?
    I posted that link coz the docs only have a "utf8" encoding exemple, so it's hard to tell what's possible or not
    [url=https://nodejs.org/api/fs.html#fs_fs_writefile_file_data_options_callback]https://nodejs.org/api/fs.html#fs_fs_wr ... s_callback[/url]
  • Okay how about this example? Looks very binary to me

    http://stackoverflow.com/questions/7329 ... ng-node-js

    Maybe Ashley would be interested otherwise to add "Write Image File" in the official Nw.js plugin if it's possible?

    It could work with the base64 plugin we can use already, or any base64 input (like CanvasSnapshot)

    So basically Sprite > Load image from url > Extracct base64 > Write image file

  • I found this nice plugin to decode base64 inside C2

    Combined with the other extract sprite to base 64 would that work?

    How about an ExecJS with atob()

    I seem to get some kind of "binary" data written, but it says the image is corrupted when I try to open it

    Can someone have a look at the NWautosave.capx, where I'm trying all that? with no success whatsoever

  • Now, I'm trying to modify Pode original plugin to extract the sprite directly as a "blob" instead of a base64 string

    Luckily the HTMLCanvasElement.toBlob() is supported form Chrome 50+, which just made it into nw.js 14.0 ten days ago!

    Would that work to write that image "blob" with nw.js "write file" as a PNG on disk?

    But yeah I have no idea about javascript or how to write a plugin, so the modified plugin below doesn't work

    How do I return the "blob" out of that child function back into the "ret"?

    	// the example expression
    	exps.currentImage = function (ret)	// 'ret' must always be the first parameter - always return the expression's result through it!
    	{
    		this.canvasSprite.width = this.inst.cur_animation.frames[this.inst.cur_frame].texture_img.width;
    		this.canvasSprite.height = this.inst.cur_animation.frames[this.inst.cur_frame].texture_img.height;
    		this.ctxSprite.drawImage(this.inst.cur_animation.frames[this.inst.cur_frame].texture_img, 0, 0);
    		this.canvasSprite.toBlob(function(blob) {
    			ret.set_string(blob);
    		});
    	};[/code:2f17co95]
  • Perhaps you could zip them first.

  • newt

    The library is different for each user and each image has to be fetched one by one through an API

    (it's a movie app with film posters from IMDb)

  • I mean zipping them rather than making a blob.

    There should be libs for doing that.

    Just so you know.

    I have saved multiple images from Chrome from a web app.

    So it's doable that way, but you have to change a few settings in Chrome.

  • I dunno, that's sounds like a lot more complicated approach to me than storing each image directly

    Even if there's a lib, someone would still need to make a plugin to use it

    And I doubt adding an extra step for unzipping will help my loading times

  • HURRAY

    NW.JS Write File > Browser.ExecJS("atob("""&tokenat(Sprite.ExtractImage.currentImage,1,",")&""")")

    This finally works, and saves a PNG file representation of the Sprite in the specified folder automatically

    I mentioned ExecJs + atob() a few posts above, and couldn't get the quotes right, then I dug out this post

    The link to the video tutorial that James linked is gone, I found it again

    Subscribe to Construct videos now

    thanks to the title

    For general screenshots on disk: Browser.ExecJS("atob(""" & tokenat(CanvasSnapshot, 1, ",") & """)")

    Now this method doesn't work (anymore?), and produces the same corrupted image I had in other tests

    I also had to edit the original NW.JS plugin, and exchange the Write File encoding from "utf8" to "binary"

    This now works, and here's the change below, with a UI mockup to hopefully have it for the official plugin

    Runtime.js

    	Acts.prototype.WriteFile = function (path_, contents_)
    	{
    		if (!isNWjs)
    			return;
    		
    		try {
    			fs["writeFileSync"](path_, contents_, {"encoding": "binary"});
    		}
    		catch (e)
    		{}
    	};[/code:1y0o2ik8]
    
    Suggestion
    [img="http://i.imgur.com/LiJ3EH3.png"]
    
    Also while I'm at it I added another suggested option to choose between Synchronous/Asynchronous
    Like rexrainbow [url=https://www.scirra.com/forum/request-nw-js-write-image-file_p1029199?#p1029199]mentioned[/url], it would be worth having to maybe improve performance in some cases
    Anyway, I think it's important to have a way to save live screenshots or batch of image on desktop apps
    
    @Ashley can you have a look at this suggestion for the nwjs plugin?
  • +1 to request support for this simple addition to the only method of exporting to all desktops.

  • For screenshot:

    Browser.ExecJS("var fs = require('fs');fs['writeFileSync']('" &replace(NodeWebkit.UserFolder & "screenshot" & ".png","\","\\")& "','" &CanvasSnapshot& "'.split(',')[1], {'encoding': 'base64'});")
    [/code:32e9xfyt]
Jump to:
Active Users
There are 3 visitors browsing this topic (0 users and 3 guests)