I have been searching all of the net but I can not seem to find a simple opensource plugin which essentially provides a basic image cropping tool.
Here is the deal... I am essentially looking for exactly what "jcrop" provides example: http://deepliquid.com/projects/Jcrop/demos.php?demo=live_crop
however with the added ability of just being able to zoom in/out of the image.
The simplest tool which demonstrates what I am looking for is:
http://kroppr.rborn.info
as you can see its just like jcrop but this one lets you zoom into the image and move the image around so you can get the crop area you want.
Is there ANY opensource solution out there or does anyone happen to have the skill to integrate this quick hack?
Here is free opensource solution. It is a exact copy of kropper (functionality-wise, not sure otherwise). http://www.gastonrobledo.com.ar/cropzoom/index.html
Edit: Above link is broken , as the developer has changed his domain name to http://www.cropzoom.com.ar/
New Link of this guys: https://github.com/gastonrobledo/cropzoom
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'm trying to make my webpage more interactive by making a small town-like map, with different buildings that are clickable and lead to different pages on my site, but I'm having a lot of difficulty animating the webpage with just HTML/JS and also making it stay the same even after resizing the window.
This is my test site right now, for clarity: https://people.ucsc.edu/~anlin/test#
(I am currently just switching between a png of the map and a gif of the buildings moving when the mouse is hovering)
How can I accomplish this, and should I be using something other than plain html/js to do this?
Thanks!
Probably svg would help you out. You can do awesome interactive stuff with svg. Meanwhile, you can also use css to create great animations. It really depends on what you need.
Check this out: https://medium.freecodecamp.org/a-guide-to-svg-on-web-c5932dadca03
Some examples:
https://codepen.io/search/pens/?q=svg%20animations&limit=all&order=popularity&depth=everything&show_forks=false
You can use an <svg> , which is a "scalable vector graphic"
Here is almost an exact example of what you described
https://codepen.io/dudleystorey/pen/ltpmv
I am building a web application that uses skybiometry api. On their demo, they have a very nice user feedback after a face is recognized like the one below
I'm trying to implement a similar functionality. Was thinking of Jquery/javascript solution. Found a lead at http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/#demo-outline but not what exactly I want.
Given co-ordinates e.g from the api response
"center"=>{"x"=>62.4, "y"=>43.4},
"eye_left"=>{"x"=>74.4, "y"=>41.2, "confidence"=>53, "id"=>449},
"eye_right"=>{"x"=>61.6, "y"=>36.6, "confidence"=>54, "id"=>450},
"mouth_center"=>{"x"=>63.8, "y"=>52.0, "confidence"=>54, "id"=>615},
"nose"=>{"x"=>67.0, "y"=>47.2, "confidence"=>58, "id"=>403}
Is there a simple library I can use to plot this on a picture? Any leads or online tutorial I can reference will be highly appreciated.
i am sure you have an answer by now but if you check this out does the canvas piece just not the tool tip
https://github.com/Liuftvafas/FCClientJS
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.
If you access your mobile me account online with Safari, you can select an icon and login directly to selected service, great feature btw.
But if you access the same page using other browser like firefox or Chrome, you will see a gorgeous login page with a big, no huge cloud in the middle (the MobileMe logo) and interesting lighballs comming out of it.
Here's the link:
https://auth.me.com/authenticate?service=mail&ssoNamespace=appleid&formID=loginForm&returnURL=aHR0cHM6Ly9tZS5jb20vbWFpbC8=
And the greatest thing is that you can mouse over those little light balls and they follow your mouse movement.
Its just beautiful and i have never seen anything like that in Javascript. And i couldnt understand by looking at their code, how they did it. Of course their javascript is compressed so i couldn't look at it, but in the markup those shiny lights are just a bunch of canvas tags.
Does any one have an idea of how to make something like that? Its probably way beyond my javascript skills but it would be great to add such an effect to one of my projects.
Thanks in advance for all your suggestions ;)
that takes a lot of skills. I believe its achievable with processing.js
http://processingjs.org/
Take a look at this [quote]:
So, how is this eye candy accomplished? Through over 6000 lines of
(unminified) JS. MobileMe usually uses SproutCore for its
applications, but after looking through the source code, I didn’t find
a single reference to it. There did appear to be some resemblance of
a library being used in the login page, however, but I think it is
pretty custom. There appeared to be a class for each of the visual
components on the screen, at least one if not two separate animation
libraries (one 2d and one 3d), a particle rendering library, and
libraries for dealing with canvas drawing and DOM manipulation.
So it looks like it was custom made. You can read more here: http://badassjs.com/post/1649735994/the-new-mobileme-login-page-has-some-badass-js
I hope this helps.