0 Favourites

[PLUGIN] c2i - canvas/base64/screenshot to image

  • Hi,

    this plugin saves the whole c2-canvas, a base64-string or a sprite via ajax(= a short php-script) to an image in png-format on a webserver.

    Because the images get saved on a webserver with php the plugin doesn't work in preview mode.

    • - - - - -

    History:

    1.1) Since version 1.1 it's possible to create PNG-files out of Base64-strings. Together with Pode's behavior "Extract Sprite to base64 string" it's possible to save sprites to images.

    1.2) Since version 1.2 customizable screenshots are possible.

    1.3) code cleaning

    1.4) supports WebGL

    1.5) works on Android via fallback-script

    • - - - - -
    • - - - Android bugfix release - - - -

    [Update5] c2i - v <font color="red">1.5</font>:

    [Add]Fallback for Android-Devices (ie 2.1,2.2,2.3,..?)

    The Plugin uses a fallback script when 'toDataURL()' has no native support from the browser - c2i2dataURL.js.

    <font size="1">On Android-devices only Opera works as expected and understands toDataURL() (-no fallbackscript used). The webkit-browsers on Android need the fallback-script.. </font>

    HowTo convince Android: Copy the file c2i2dataURL.js next to index.html

    Demo - canvas/sprite/screenshot + Plugin(v 1.5)-- demoproject (capx,exported project) + php-script + fallback bugfix-script

    <img src="http://dl.dropbox.com/u/31151399/Construct2/Plugins/joe7_c2i/howTo/1.5.png" border="0">

    ____________

    [Update4] c2i - v 1.4:

    Plugin is completely rewritten.

    [Changed] WebGL-support - It should work now with both renderers - currently on desktop browsers (+ on Android - only with Opera).

    [Changed] Plugin is now a "world-plugin". If you don't want to see a "black canvas" in C2, give it an image-texture - transparent image should be possible.

    Demo - canvas/sprite/screenshot + Plugin(v 1.4)+capx

    changed php-file (filename)

    __________________________________________

    Property:

    <img src="http://dl.dropbox.com/u/31151399/Construct2/Plugins/joe7_c2i/howTo/properties.png" border="0">

    Actions:

    <img src="http://dl.dropbox.com/u/31151399/Construct2/Plugins/joe7_c2i/howTo/action.png" border="0">

    Condition:

    <img src="http://dl.dropbox.com/u/31151399/Construct2/Plugins/joe7_c2i/howTo/condition.png" border="0">

    short overview how2use:

    <img src="http://dl.dropbox.com/u/31151399/Construct2/Plugins/joe7_c2i/howTo/overview.png" border="0">

    Have fun and all suggestions are welcome <img src="smileys/smiley17.gif" border="0" align="middle"> ,

    Joe7

  • Wow! This is amazing!

    Do you think you can add a way to crop the image (or the export area) between two coordinates so we can choose what part of the screen will be cropped?

    I'm gonna download it tonight and see how it works! :D

  • Construct 3

    Buy Construct 3

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

    Buy Now Construct 3 users don't see these ads
  • Really nice plugin, Joe7 !

    There's something I don't understand, though : what's the use of the php/Ajax part ?

  • Pode: The Ajax part is the saving - php creates from a base64 string an imagefile. Now I've seen your last behavior and I'll try to add another action to the plugin to save standalone sprites - should be possible now.

    On the webserver are the following files:

    <img src="http://dl.dropbox.com/u/31151399/Construct2/Plugins/joe7_c2i/howTo/webserver.png" border="0" />

  • Joe7: okaaay ! I didn't understood <img src="smileys/smiley2.gif" border="0" align="middle" />. For the plugin part (I suppose you are thinking about "Save File"), I need to add the "save binary" method to help you.

  • Pode: Now this plugin is usable with your Base64-behavior. <img src="smileys/smiley1.gif" border="0" align="middle" />

    gammabeam: done <img src="smileys/smiley1.gif" border="0" align="middle" />

  • Joe7 : great ! <img src="smileys/smiley1.gif" border="0" align="middle" />

  • AMAZING plugin!!!

  • Joe7 is the option suggested by GammaBeam (crop the image or the export area between two coordinates) implemented already?

  • If I?ve understood this correctly, then yes. <img src="smileys/smiley2.gif" border="0" align="middle" />

    The Action "Screenshot saving request" takes 4 number-parameters:

    from (leftTopCornerX,leftTopCornerY) to (rightBottomCornerX, rightBottomCornerY)

    --> a rectangle from leftTop to rightBottom gets saved

    In the demo the rect is adaptable - drag "1"(=leftTop) and drag "2"(=rightBottom) --> "save rect" to create the PNG-image on the server and then "show"

    <img src="http://dl.dropbox.com/u/31151399/Construct2/Plugins/joe7_c2i/howTo/rect.png" border="0" />

  • Very nice!!! Just what I needed!

  • for some reason this is not working when i upload this to my website.

    I have used the demo files & uploaded createImg.php

    It doesn't generate the image :(

    edit: fixed it, wordpress htaccess fucked it up :)

  • Its working now, although saving a screenshot only generates a blank png with the correct width and height.

  • Wishy: Strange - should not happen. I've exported the demo now with C2-r85 and it works with this actual release too. It seems that the data gets not properly saved. Can you try to save the sprite from the demo in a Textfile(debug-php-file). It should look like this.

    Do you have this problem on a local webserver too?

  • Everything seems to work as intended, except for the image showing.

    The test.txt is indeed showing the base64 string, but as empty image.

    If i go to your testpage and press 'save rect' and then show,

    i get http://www.liebhard.eu/c2/c2i/1.2/c2i.png which is an empty image with dimensions 208x160

    I'm using Chrome 18.0.1025.142 m

    edit: Mozilla Firefox 10.0.2 doesn't give this problem, everything working as expected on that.

    same for Firefox 11.0, working perfect

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)