I'm not sure whether this is something that is possible in Javascript, I'm fairly sure it will be.
I have a client that sells canvas prints online. They need a solution that will enable customers to firstly select an image, then a color, then a size, and for it all to appear on a 'mock' canvas all on the same page.
This will then proceed to a paypal cart checkout.
Does anybody know of a way to do this, or could point me in the direction of a website that I can walk through this with?
Thanks!
Jonna
This is almost exactly what Fabric.js, as JavaScript canvas library, was originally made for (well, for shirts): http://fabricjs.com
There are a multitude of other libraries that do similar, but the bottom line is that it is very possible. Have a look at Fabric.js, Kinetic.js, easel.js, and start learning!
Related
I am curious as to where to start to make something similar to HERE as I cannot find any information about it. It may be fairly simple and im sorry if it is.
What I am hoping to replicate is the colour grid that generates based on the colours and size of the lines. I am looking to replicate the functionality of the application whereby when the user selects a line and changes the width of that line and it will then calculate the image. I have been looking around but cannot find information about how to replicate it. I may be searching for the wrong thing as javascript is not my strongest language.
I know of a roundabout way to do it with svg but where would I start for javascript/jquery?
I know of a way to do it with svg but where would I start for javascript/jquery?
Well, SVG would involve javascript as well, wouldn't it? You're just looking for different ways to display an image. None is native the javascript, that is just a programming language, you'd have to consider which API to use:
There's nothing wrong with SVG! It even seems to be the easiest solution, maybe wrapping DOM code in some nice drawing library.
It has been demonstrated that such is possible with CSS3 background patterns, although I would consider this rather unusable
Use the <canvas> element! This would be the most genuine HTML5 approach, and even though the api is rather simple there exist mighty libraries.
Hi I'm looking for a way to create a panorama view with a 360 degrees photo. I need a solution to do create something like QTVR. There is a lot flash based software out there (I'm trying to avoid that) and also some javascript/prototype/jquery solutions. But none of the solutions I've found have the behaviour I'm looking for. I want to eanable users to look around (just horizontal). Furniture objects on the pictures should react on mouseover, so that I might have multiple "layers" to distort. Is there a way to manipulate images in pure javascript or with jquery so, that it looks like they where bent cylindrical? Or does anyone know good libraries that support that kind of image manipulation? Might webgl be a good solution? I don't really know how to start. Is there anyone who could give me a hint. I'm just looking for a direction. google didn't bring me usable results.
Check out three.js
http://mrdoob.github.com/three.js/examples/webgl_panorama_equirectangular.html
Also, you could possibly do some of the image manipulation via canvas.
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
It might be easier (with canvas) to just have a fully processed panoramic image, and figure out which pixels represent your interactive object. Then listen for mouseovers on those pixels.
try out http://panorado.com/en/PanoradoJs.php
There you'll find an excellent HTML5/JS based Viewer.
There are lots of tool to do that. Have you tried www.vtility.net ? Im not sure if it had mouse over layering. But it was the only SEO friendly that I have found.
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
I need to create a flip book/page application. I have seen flash created flip page, can it be done in any other languages, e.g. jquery or javascript? And also, what are some concepts that I am required to have in mind/knowledge on for creating a flip book?
Thanks.
Not quite sure what you mean by "flip book", can you elaborate on this?
If you mean just a digital book, that you can turn the pages of, then I would surgest looking into this AS3 page-flip engine. And here is a list of good (mostly commercial) examples
EDIT* - Not to sure why you would want to create this from scratch, as there are a ton of well made Page-flip libraries out there that are really nicely build, and are either free, or really cheep. Most of the time they are customizable too.
That said, I think they are probably all using a combination of the following:
Preloaded pages - movieclip with either an image or
other graphics preloaded into it
Gradients - to give the illusion of a 3d page that is "turning"
Trigonometry - for dragging effect. To angle the page towards mouse
Masks - to get the page folding effect, when the user start to drag the page, the next page is loaded over the top. Both these page have been masked off based on the users mouse position.
Also the Page-flip engine I linked to above (MegaZine), is open-source. So if you where really keen, then you could dive into there source code and take a look for yourself.
Hope that helps somewhat.
If you need something simple, and don't want to delve into codes, try out pressmo: http://pressmo.com/example3/1
It works faster on slower computers than most of other similar services and what's important you keep your flipbook on your own computer/web server (as online flash or offline executable).
To create a flip page you have to upload your content as a PDF file (which can be easily obtained from Word or Open Office).
Usually a good solution for flipbooks is to keep the number of your pages even, otherside the user will not have the possibility to turn the last site. All pages should be similar size also.
You can use Flex Application
Like this right: Sample Book
Code is here: Source Code
I'm looking for a way to create an interactive bullet graph, which will allow the user to click anywhere in the graph and set a marker, then calculate some simple values based on where this marker is at. For example, I'd like it to look similar to this:
http://www.usrecordings.com/test-lab/bullet-graph.htm
Yet, allow the user to click inside it and have it calculate values. I don't want the user limited to the axis values either, it should be able to figure out what the value is between them. Has this been done anywhere before or do I need to start something from scratch?
Flot may be able to do what you need.
Check out some of the examples, particularly the interactive one. It's open source, so you can add any functionality you need to it. This should be a good starting point.
HTML canvas is a great place to start. A brief google search showed there may not be many interactive charts available. These are a couple HTML canvas examples, the first being math, the second the w3c spec: Polynomials, HTML Canvas w3c. I've found that searching for HTML canvas game examples produce many more tutorials than straight HTML canvas examples. I don't know what your programming abilities are, so I'm giving you these links with the assumption you have javascript experience.
Have fun.
Oh and thanks for asking if it's been done before.