I am working on an ecommerce website for Glasses. Where I want to put a feature to try the glasses on your face or on some sample faces. The perfect example for this is one this site
http://www.glasses2you.co.uk/prescription-glasses/gender/mens-glasses
See the Try in Mirror option on this website.
I can see it has been built using Flash Actionscript.
Any suggestion how can I build this using Javascript through jQuery or such related tools?
Thanks in advance.
Simply position the image of the glasses on top of the photo.
You can do this with CSS, which can be set with JavaScript. Use the CSS position property.
For your source images of glasses, use PNG so that you can have a proper alpha channel. You will probably want to specify offsets for each image individually.
Related
I know we can generate a custom image using this link.
But the point is, I want a custom image that does not have any borders. With the link provided you can generate a custom image or .patt file with a black border around that image. It is applied to every image that is uploaded. The thing is, I want to use that image the way I want without the border as is shown. So my question is, is this possible in AFrame?
If not, please suggest me any other library or any other process that I can use to achieve this, if this is possible at all.
Update: Please look at #kalwalt's answer below. It is possible now.
currently it is not possible to use markers without border using jsartoolkit. There has been work to enable this. You can have a look here: https://github.com/artoolkitx/jsartoolkit5/tree/nft
However, that only performs on desktop not mobile.
Another way could be using OpenCV.js template matching: https://docs.opencv.org/3.4/d8/dd1/tutorial_js_template_matching.html
cheers
The NFT feature that Thor_Bux mentioned is merged on the master branch of artoolkitx/jsartooolkit5 and also in the new AR.js repository.
You can find the Ar.js documentation at:
https://ar-js-org.github.io/AR.js-Docs/
Image Tracking (NFT):
https://ar-js-org.github.io/AR.js-Docs/image-tracking/
Note that Ar.js is under a new github organization and any collaboration is very welcome.
I would like to know the best web technology/js library to achieve this functionality. I need to change the colors of specific objects inside an image. I need to develop a tool where they can choose a color and the objects inside the image will turn into that color.
This is a very close example of what I need. I've been reading about canvas but I haven't been able to find anything close.
www.msistone.com/virtual-kitchen-designer
Thanks in advance!
There are no magic or elaborated algorithm on it. They simply are using some PNG images and then they put the style tiles images before, so it looks like a texture changed or like if they uses a filter. You can realize of how it works watching the source code
The simplest way to target specific objects ( wall tiles, tables, floors, etc. ) within an image is in post production with an image editing application such as Photoshop, Artweaver, Paint.net, Inkscape, etc. and switch out images upon user selection using CSS or JavaScript. You replace the entire image this way and the minor changes show through when the image is switched.
If you don't want to do this manually there is no easy programmatic approach. For more information on coding applications to recognize objects look into machine learning and shape recognition algorithms but I suspect that is beyond the scope of a simple web app.
I am trying to figure out how does CamScanner app autodetect a card or paper in an Image and produces a scan like copy of it ?? Can it be implemented in JavaScript using HTML5 Canvas ??
My main concern is to extract that detected card or paper from the image for further processing, according to the need of my project.
Thanks in advance..
Any solution in JavaScript will be highly appreciated...
This solution works well in most cases. It is in Python, but you can easily adapt it to JavaScript since it is OpenCV. There is the tutorial to use it and if you use node I recommend opencv4nodejs.
The main idea is find edges with Canny detector. After that you use the function to findContours from OpenCV and you need to search the largest contour with 4 edges (we expect that papers have a rectangular shape). The main issues usually are if there is noise in the background and to find contours white on white. Some filters before the Canny detector and changing the parameters can help in your solution.
I am reconstructing a massive collection of medical modules that were created in Flash. All of the modules are being redesigned for cross platform enjoyment (js and HTML5). I have been searching for a library or plugin that will add arrows(with rollover capabilities) and text above an image when the user clicks a button. I have had little luck.
The closest package I have found is Zoomify, but it's still not what I am looking for. They are asking for too much money for maximum development capabilities. I was really hoping to find a JQuery plugin or javascript library that would allow me to fully customize the interface. Here is a screenshot of an OLD FLASH module:
The red arrow corresponds to the link selected on the left. The new design is much more appealing but the underlying idea is the same, click buttons point to the objects.
If there is no such library or plugin should I create a simple javascript image viewer and store overlay coordinates in a database? Or is that overkill? I have hunderds of these things to do... maybe thousands :( Any help/direction would be greatly appreciated.
What you are asking for is provided by CSS, which enables one to place text directly on top of an image or other rendered HTML. The key CSS properties to investigate are:
position set to 'absolute'
values for at least two of top, right, bottom or left
use z-index to specifying layering/order
Lightbox is a good option "Lightbox is a simple, unobtrusive script used to overlay images on top of the current page. It's a snap to setup and works on all modern browsers."
The new layout of YouTube added a background random-noise which I like very much, having seen almost exactely the same effect on other sites, so I plan to use the same technique in my webpage prototypes, or at least have this "trick" in my toolbox for future use.
The image is like this (taken from http://g.raphaeljs.com/barchart.html):
Now Youtube accomplishes the (embarrassingly identical) same effect by embedding the image in source code:
(on Youtube main page, right click background to display it, then right click the image and "display image properties" [ffox]):
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJUAAACVCAAAAAB0....lotsofdata
I tried to discover where this line of code is in the source code, but due to the dynamic creation, I couldn't.
So, my question is:
"Is there a way to apply a tiled background to a page, using a png image generated algorithmically CLIENT-SIDE?" (preferrably with javascript)
I am very beginner in webdev and javascript, but I like to base my learning around defined problems to be solved, so this would be a nice way to learn something
Thanks for reading!
UPDATE:
For anyone interested in tile texture generation using javascript, I found this, which seems very interesting:
http://somethinghitme.com/projects/canvasterrain/
http://somethinghitme.com/projects/canvasterrain/js/canvasTerrain.js
To generate image client-side, I suggest you to have a look to HTML5 canvas element.
You can draw on a canvas with Javascript (even if the canvas element is hidden), and so generate anything you want (including a simple noise tile).
Resource to learn Canvas drawing : https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas
After that, you can export your canvas as URL with the method toDataURL (a string like "data:image/png;base64....") which is interpreted by browsers like a traditionnal url for an image, so you can set it as css background for your body element.
Warning 1 : Canvas is supported by all modern browsers and you can emulate it on IE with ExplorerCanvas - but I don't know if ExplorerCanvas support .toDataURL()
Warning 2 : Canvas is resolution-dependant, so I suggest you to generate a little tile (32*32, or 64*64) and repeat it
Edit : An example of tiled background : http://jsfiddle.net/SfzPc/12/
Edit 2 : An completed example with a noisy background : http://jsfiddle.net/SfzPc/14/
You can use CSS to display this image:
#someimageselector {
background: white url('data:image/png;base64,iVBOR...lots of data') repeat scroll left top;
}
You can change the initial color of your background by editing the value white.
To set CSS with JavaScript, set the background property of an element:
document.getElementByID("someimageselector").background = 'white url(data:image/png....';
There are two jQuery plugin libraries that do exactly what you are looking for: NoiseGen and Noisy. Haven't used either yet but they both look pretty good.
NoiseGen
Project: http://primegap.net/2011/10/20/noisegen-generate-background-noise-with-jquery/
Demo: http://www.lucaongaro.eu/demos/noisegen/
Noisy
Project: https://github.com/DanielRapp/Noisy
Demo: http://rappdaniel.com/other/noisy-sample/
Fyi: Base64 is binary data represented as a string.
Most likely the original image still came out of Photoshop and was later encoded into Base64.
This technique helps having less http-requests per page view, as the actual image data can be saved and cached inside the css or html document.