HTML5 combine multiple canvas and update in realtime - javascript

I am trying to combine canvas that change colour in response to consumer's choice. I have placed PNG's onto multiple canvas with transparent backgrounds. I need to combine them and save a png of the final image to pass to the basket and post to my server. Can anyone help? You can see the page and code at http://www.ewe.potberrys.com/colour_image_3.php. Please excuse the quality of the code. I am new :) Thanks

I would suggest do not save the PNG. Just save the colors with your order (you have to do it anyways) and render the helmet in the basket with the same approach you do in the selector tool.
It would probably be possible (but I am not 100% sure) to generate an image on the client side in Chrome and post it via a hidden form, but the stack is so experimental, that it is not ready for production.
A little easier, one can do it with ImageMagic and PHP on the server side. I am not a PHP expert, but you can easily google an example code - there is plenty.
My advice: do not bother. Just have tidy up your JavaScript that renders a helmet to be usable in multiple places with multiple dimensions.

Related

How to create an online drawing application

I've tried to ask this question before, but I failed completely there. After useful input, I decided to leave that one, and to try again.
I'm looking to create a web-based application where users can draw images built from a set of pre-defined icons. There is a need to be able to save the final image (encoded jpg/png), and also save a "current setup" that can be re-loaded later for further editing (a "settings" file?).
My question : What would be the best approach for this matter? Flash+AS3? HTML5+JS? Something else?
For better understanding of what I want to create, here are 2 screenshots that illustrate in what direction I'm thinking:
The drawing application (made in Flash): http://imgur.com/U4GNKJF
The final created picture: http://imgur.com/aCtxwo1
Thanks in advance, and I really hope I've made my question more clear this time.
Since you need advice...
Draw your icons in some art software (even online) and save as transparent PNG's
Look-up HTML5 Drag & drop tutorials that involve "Canvas". You'll want to meaure the positions of objects dragged (mouse position on Canvas) and their order. The drag function could update a JSON String (this hold entries of items, type, position, etc)
Look-up How to save JSON as text file, also how to parse text file as JSON. This becomes the "settings file".
To save images best use PHP language code. PHP must be installed on the server (most have, or is installable or else get a better host). There are tutorials on how to save an image with content from "snapshot of Canvas"
flash is unsupported on IOS and android mobile browsers and google is giving a lower index to websites using it.
I would use javascript with HTML5 canvas with PIXI.JS ,CreateJS or PANDA.JS.
These libraries make it easier to create the canvas elements you need (draggable objects, buttons ) from sprites and adding event listeners to them.
And drawing graphics on the canvas (lines, shapes).
Since you have a lot of sprites you can pack them in a spritesheet with TexturePacker for faster loading ( and PIXI works great with spritesheets).
You can package this web page to android/ios with phonegap,ionic,crosswalk, cocoonjs etc ( i recommend ionic + crosswalk webview it gives great performance)
for saving i would also use a json file to save the setting . You can use PHP to load and save it.

Creating a color halftone effect for images using JavaScript

Would anyone be able to tell me if there is a way to apply a color halftone effect to an image using JavaScript and without using WebGL. I need to create it so it can be used across multiple devices and browsers. I have found this but its using WebGL: http://evanw.github.com/webgl-filter/
Would I be able to use three.js or processing.js to achieve it?
Any help would be very appreciated.
Create yourself a canvas element and put the image inside (see link from #Diodeus).
Get the image data from the canvas - now you can iterate over all pixels.
Apply the halftone filter on the image data. see: Algorithm to make halftone images?
Update image data
BTW: I don't recomment to do this on the client machine. Image Processing requires some processing power which may not be available on the client (e.g. Smartphone). Better do it ONCE on the server with e.g. ImageMagick.

Drawing arbitary pictures on a webpage

I need to display a runtime-generated image (mostly consisting of nice-looking boxes, lines and text) on a webpage. We're currently using ASP.NET MVC3.
The problem is, I haven't really done web development before, and I have no idea how to go about drawing an arbitary diagram on a webpage. Do I use some sort of javascript? How, and what do I use? Do I generate the image on the server somehow and simply display it? Something else?
I have no idea where to even start, let alone solve the actual problem...
It depends on the target browser.
If you target the most modern browsers, you can use an HTML5 Canvas and draw on it using JavaScript (see http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/).
If you're targeting other browsers (as well), the easiest is probably to generate an image on the server side (GIF/JPG/PNG). Your HTML page then contains an IMG tag with the SRC parameter set to the page that generates and returns the image. You can find an example at this page: http://www.sitepoint.com/generating-asp-net-images-fly/ (this uses ASP.NET to generate the image).
Roy Dictus fairly well described the overall approach you'll want to take. If you decide to target modern browsers and use javascript, I'd suggest you look at Processing.js. It's a javascript port of a popular Java library, and the web page has some code samples to show how you can create both static drawings and animations with some simple code.

Would Like Multiple Checkboxes to Update World PNG Image Using Mogrify to FloodFill Countries With Color

I'm seeing in another forum if the best way to do this is with Javascript or Ajax but I'm wondering if there is an even easier simpler way. I'm trying to create a web service where users can check which countries they have visited from a list of 175 or so and a World map image would then instantly update with a filled color.
There are other similar services, but I'm envisioning mine to be both updating from checks in checkboxes and by clicking on the target country in the displayed image say with an imagemap. Additionally other solutions display all the visited countries in the same color. I would like different colors for different countries or at least for those countries that touch. Eventually I would like to include a feature that enables the choice of which colors to assign countries.
I found a Sourceforge project called pwmfccd. It's simply an open source image of the world and the coordinates on the PNG image for all the countries. You can use mogrify from ImageMagick and floodfill to fill the countries with color. I have done this successfully, locally with batch files.
My ISP has told me where mogrify is located, basically "/usr/bin/mogrify". I now have a horrendously complicated cgi script which if it worked is set to redraw the world map image with each checkbox. It's here. It also redraws the whole web page with each check. The web page starts here. Of course this is not at all efficient, and I think probably the real way to go is Ajax or Javascript, so that maybe just the image gets changed and redrawn, not the whole web page. Sorry I don't even know the difference between Javascript and Ajax and their relative merits at this point.
I suppose you could make just one part of the image update with each check or click on the image instead of even just the image redrawing, but I have never even heard of a hint at being able to do that for irregularly shaped image elements like countries. So I guess an Image map and sister checkbox entries tied to mogrify events redrawing the user's personal copy of the image with an image refresh would be the only way to go.
So how do you do this with something other than Javascript or Ajax or is that definitely the way to go and if so, how would you do it? Or can you after all cut up a web based image into irregular puzzle shaped piece which you can redraw individually at will.
Thanks in advance for reading and considering answering this post.
Well, it looks like maybe my hosting company only supports using PHP with ImageMagick. At least I know better what to try create. I'm completely new to PHP, but I guess that is alright

Flash based cropper like this, but with source or customizable?

I am looking for a Flash based image uploader with resize and possibly rotate function.
I have checked many possibilities, and the very best in simplicity and unser experience I found is Kroppr at a very affordable €29/license.
The downside is, it comes with encrypted PHP code to bind the product to a subdomain. That is understandable, but while I'm perfectly happy to pay money for a tool as great as that, and ready to sign all sorts of legal agreements to protect the license, I am not ready to use encrypted PHP code, especially not from an outlet that doesn't even have a postal address on its web site.
Does anybody know an Open Source or commercial solution that comes close to Kroppr and ships with source, or allow for full customization and free definition of the server-side backend?
The features in detail:
Rectangular selection to crop image, slider or similar to zoom
Optionally: Rotating
"Accept" and "Reset" buttons, "accept" triggers a call to the server and submits the image
Full visual customizability (at least background and text colours)
Possibility to rename all controls
The server side technology would preferably be PHP.
http://deepliquid.com/content/Jcrop.html i love this one, every easy to use and tons of features. i know your searching a flash cropper but this question is tagged with js too so....
I found these three image utilities during my search:
Flex Image Cropping Component
HOW TO CROP AND RESIZE AN IMAGE USED AS BACKGROUND FOR CANVAS
Building an image-viewing widget with ActionScript 3.0
The first one is an open source flex component using an MIT license. The second one is a how to,with full source available. It doesn't have a sizable box, but it seems ok otherwise. The last one is also a how to article from adobe.com with source available.
Here is a list of good javascript based croppers:
Yahoo! UI ImageCropper
Jcrop
MooCrop
UvumiTools
PHP & jQuery Image Upload and Crop
Here is a list of action script based croppers:
Flex Image Cropping Component
Image Crop
http://www.adylevy.com/index.php/2009/07/22/multiple-files-uploader-with-preview-on-client-side/
OR
http://www.resize-before-upload.com/
...took a bit of searching =)
I would take a look at the free pixlr editor and their developers API : http://pixlr.com/wiki/developer
I've used RadActive's I-Load component before, with great success. The UI customisation options are a little limited, but as far as functionality goes, I'm pretty sure it meets all your requirements.
EDIT: You don't specify what server-side technology you're using (if any). I'm pretty sure I-Load is designed for ASP.NET - this may or may not be an issue for you.
This is also a nice once and its only $10.
http://www.shift8creative.com/projects/agile-uploader/index.html
Still doesn't have image rotation/cropping. I most definitely do plan to add that, but after checking out all the things I could find I still wasn't happy. I researched out all the particulars and just ended up building my own. You're welcome to use it if you like and haven't found something else by now. Keep checking the link, I'll update it to include the rotation and crop feature along with multiple image uploads.
Something like this?
http://matrixoft.infunity.com/agents/calvin/tmp/forPekka.html
I'm perfectly happy to pay money for a tool as great as that
To carry out the responsibility of posting the answer for stackoverflow users, here is part of the crop image code:
var tNewImage:BitmapData=new BitmapData(mouseX-vCropX,mouseY-vCropY,true,0);
iImg.getChildAt(0).x = vSize/2 -vCropX;
iImg.getChildAt(0).y = vSize/2 -vCropY;
tNewImage.draw(iImg);
Where iImg is the movieclip containing the image with the image center positioned at (0,0) , vSize is the image dimension, vCropX and vCropY is the top left cropping coordinate. The tNewImage BitmapData is used for constructing the new Cropped Bitmap image

Categories