#Canvas frame png code#
Once you know the length of each cycle in the list (in milliseconds, if I'm reading the code correctly), you can find the least common multiple of all of the cycle lengths, which would tell you the total length of the animation. That said, you'll need a different algorithm for each of the six possible values for cycle.reverse. I took a look at the code, and it seems like it should be possible with a little hacking.īy looking at the list of cycle objects in Palette.Cycles, you should be able to figure out the cycle length of each cycle with the cycle.high, cycle.low, and cycle.rate fields. I haven't written much PHP for a year or two so be sure to double check everything and so on. Since michael already posted a nice JS solution, I'll add the server side code if you wish to automate it: readimageblob(base64_decode($imageData)) Save the Imagick object to the file system as a GIF.Add these Imagick objects as frames to a new Imagick object.
Decode the base64 strings and convert them to Imagick objects.Grab the dataURL (base64 encoded string) for each frame with JS and send it to the server.When saving, force it to use the same delay for all frames so the animation is smooth. The resulting image will be large and possibly choppy, so open up GIMP and optimize for difference and GIF. Then run the other script (see below) and it will write the image to your web server. Copy them and save them into a text file and then upload it to your web server. It will write a bunch of base64 strings to the screen. Shots.push(img.replace("data:image/png base64,","")) Var grabLimit = 30 // Number of screenshots to take The client-side code is a modified version of Michael's code: var canvas = document.getElementById("mycanvas") Imagick generated a large image, so I went ahead and optimized with gimp. So its something, but not what you need.ĮDIT: Finally put that code to use, here's the result: I use some JS files directly but you should copy these locally if you're going to use it a lot. It uses some helpful code, pointers and JS files referenced in this blog post JavaScript to (Animated) GIF. Var imdata = context.getImageData(0,0,canvas.width,canvas.height) Var head = document.getElementsByTagName("head") ĮtRepeat(0) //0 -> loop forever, 1+ -> loop n times then stopĮtDelay(500) //go to next frame every n milliseconds same rules apply - copy and paste it into the Javascript Console of a browser (it lags in Firefox but Google Chrome its pretty fast. Not sure how/why, but maybe someone can take it from here and see what I've missed. It creates an animated GIF ( Yipee!) but its in various shades of green ( Boooo!). Second, this new code DOES NOT SOLVE the problem. Support for output as gif or jpg may not be in all browsers (should be most).įirst, I'm keeping the code above intact rather than updating it because both approaches could be helpful to others. To one of these: var img = canvas.toDataURL("image/gif") If for some reason you need to output as GIF of JPG instead of PNG just update, as needed, this: var img = canvas.toDataURL("image/png") It should take a few seconds to run so please be patient.Īfter that you should have all the necessary frames (any maybe more) to create an animated GIF via ImageMagick, this website, or other app.
Var grabLimit = 10 // Number of screenshots to take Paste in the following code into the Javascript Console: var canvas = document.getElementById("mycanvas") At that point you can save the individual images. Once it has the screen-grabs it outputs the images into the page. For the example you give, the canvas element ID is ' mycanvas'. Both these values are easily modified since you can tweak to find the number of iterations you'd like to get. It allows you to take 10 screen-grabs of the CANVAS element every 1/10th of a second. In case you're not, google it, or try to just right click anywhere on the page, choose " Inspect Element" and look for " Console". I have a solution but it is dependent on you being familiar with the Javascript Console in Firefox (install the Firebug plugin), Chrome or Safari.
0 kommentar(er)
