I am currently working on a sneaker recommendation application. As part of the implementation, a user needs to upload an image of a sneaker, and from this, the application attempts to find 3 closest matching shoes. To date, I have created a dataset of sneakers and have decided to use resemblejs in order to compare the upload images against what is in the dataset.
However I am encountering a problem. Prior to sending the uploaded sneaker image, I need to ascertain it's shape in order to determine whether or not it valid for submission.
Ideally I would like all the pictures facing one way... so consider the following scenario.
User uploads:
It's in the wrong direction, so the application knows to mirror it as all images in the dataset face this direction:
So all that needs to be done is mirror the picture as it is perfectly valid. Once this is done, the image has passed preprocessing and is compared against what is in the database.
I have researched various ways of doing this, and one of the approaches that struck me involves using a inverse binary thresholding approach in order to turn the background of the image black while whiting out the contents of the shoe itself.
Is it possible to accomplish this in Javascript? If so how?
I then thought that it would make sense to analyse the picture to see which side had more black/white (dividing it in half) in order to see if it needed to be mirrored. In a case where it cannot be mirrored, the user just has to upload a new picture.
Related
Ok so after some searching and not finding the real anwser I was looking for I came with the following question in this situation:
I have a trading website that loads about 2300 PNG images of 37x50 twice, once in a left column and once in a right column. The images and all information that comes with it is inserted using jQuery on the document on the onLoad event. However loading 2300 images (even when the html came straight from the server) takes just TOO much time and even hangs new versions of chrome!. So now the quick solution was just to remove the images and show in a dynamic tooltip. Works great but got angry website users and it is indeed ugly.
So... I thought of some possible solutions but I have no idea what is good/bad practice here:
Make all images JPEG and reduce quality.
With the above or not: Add all images to 1 very large image, load it and draw 4600 canvasses based on locations in an array like 'imageArray["someimageID"] = { x = 0, y = 40 }'
Convert all images to base64, add them in an array 'imageArray["someimageID"] = "base64"' and draw 4600 canvasses.
And to an extend where I must think of as well that of all those 2300 images I have a small, medium and large version. (of which only the small ones, 37x40, are shown all together in a page)
Hope to get some nice insights on how to correctly solve such a problem!
Greets
If your images are static (not generated for every request) I think you should use CSS sprites. (similar to your own suggestion of lots of canvases).
Basically you create a div for each image you want to show (or some other container element) and set a background on it that takes a small portion of the big image that contains all images.
Example css:
img.icon1
{
width:50px;
height:50px;
background:url(spritesheet.png) 50 0;
}
in this example the 50 and 0 indicate the offset of your 50x50 icon in the spritesheet.
Update: Here http://css-tricks.com/css-sprites/ is an explanation that goes a bit further than my simple example.
First off, consider whether or not you actually need this many images, and loaded on the page all at once. Assuming you do...
Make all images JPEG and reduce quality.
Use the right format for what you're doing. JPEG is for photos. My guess is that since you have 37x50 pixel images that you're not showing photos. PNG is likely smaller from a file-size perspective in this case. It doesn't matter a whole lot though because the speed issue you're having is probably 80% browser time, 20% network time.
With the above or not: Add all images to 1 very large image, load it and draw 4600 canvasses based on locations in an array like 'imageArray["someimageID"] = { x = 0, y = 40 }'
Try it and see. I don't think this is going to help you. A canvas will have more overhead than a simple image.
Convert all images to base64, add them in an array 'imageArray["someimageID"] = "base64"' and draw 4600 canvasses.
Don't do this. You're adding 33% overhead to the file size, and again the load problem is mostly in your browser.
What you can do
Really question again whether or not you need this many images in the first place.
Cut down on network requests by using several hostnames to load the images. image1.example.com, image2.example.com, image3.example.com, etc. This will allow for more network requests in parallel.
Use your developer tools to verify where the problem actually is. Again, I suspect it's mostly client-side. Once you know the real problem, you can solve it directly.
I would advise if you can, creating a very low resolution sprite of images that can be placed to make it look like everything is loaded, then replace this with the proper images. Without better code/samples/what your images contain/ are they dynamic I am unable to give you a real answer with solution but at least it can lead you in the correct direction.
If your images are static, this will work fine, if dynamic there is not much else that can be done. I think some examples of the webpage you are creating would be great
The reason you're having problems is simply a massive amount of HTTP requests - something you should always be trying to minimize.
Like others are saying here, you're going to want to use a spritesheet technique if possible (it sounds like it is). A spritesheet will condense all of your images into one, removing 2299 of your HTTP requests.
I am currently developing application in Apex and I am lost. I have requirement that on hoovering over name/surname column in employee table it should bring image of employee. Image should not be stored in database it should rather by a pointer to... well FTP ? What is best practice to store images for DB but not in DB?
I understand that it is complex problem that have many steps therefore any help would be greatly appreciated.
As Jeffrey says (and i'd react in a comment, but then i started typing...), you will have to decide on how and where you'll store your images. Blob columns are already out of the picture, so they'll have to be put on a filesystem somewhere. This could be your apex_images folder for example, or a folder anywhere else on the server. You can always check by setting up an img tag on a page in your application, setting the src attribute to the image location.
Another consideration would be just how you are going to link the images to an employee, and how the images are to be maintained.
What will their filenames be? By ID? By employee name?
I've been in this situation too, and it was a such an enormous hassle too. I received a folder with images in it, all numbered up. Until some anomalies popped up of course: there were people with an identical number, because they had only been using part of a unique key. And many and more incorrectly named pictures: z.jpg, x.jpg, zzz.jpg, bob.jpg, mary.jpg.
If going for names, how? And how to deal with special symbols in names, such as accents: é,à,ç,.... Important of course, since you might not be able to link images to an employee because their name contains a special character but he image file doesn't.
And what about long names, or middle names? Maria De La Santagosa-Gurça Totally random name, but you catch my drift. That might be someone's real name, although the usually used name would be Maria Santagosa, which really isn't too far fetched.
Let's suppose you will give images a unique key value, such as a generated ID field of your employee record.
Perhaps the image can be made, the name can be copied and pasted in a column of the employee record.
I suppose the most important question would be: who will be maintaining the pictures?
If, say, Human Resources will be doing this, you'll have to carefully explain those steps: create an employee, copy the ID field (which honestly is totally meaningless to them - and rightfully so), and name the jpg EXACTLY that way.
Yet another consideration is filetype, and whether they'll get mixed up (again: who will maintain?).
And how about size? Will it be thumbnails or large size? Will the browser resize them? Probably the size of your database and amout of images are of consideration, and the load on your systems. If large pictures are not required, it'd be non-performant to actually drag those large images over the lines every time.
Believe me when i say that images not matching up to employees will be common, and that you should be aware of this. In my opinion, that is simply the case of the filesystem being easier tampered on that it would be on a database record.
Maybe consider the reasons for not choosing database storage again. Again, in my opinion, a profile picture is just as much a piece of structured data as is the employee name, and has more of a place in the database than on a filesystem. Maintaining the picture of an employee doesn't even have to be hard. HR would probably have a maintenance application where they can view and edit all details of an employee. Displaying the image would be trivial, and providing an update and delete method just as much.
I'm not going to step into the detail of providing a floating image. First decide on storage location and the details, then take the next step of setting up img tags and see how that works. Then set up a single img tag, and use javascript to dynamically alter the src of the tag. Floating a selection would be next.
This question already has answers here:
Preventing a visitor from saving an image from my site
(15 answers)
Closed 8 years ago.
I have a website where I display digital proofs for clients of professional photographers. I would like to include an option of 'zooming' into the full resolution version of the image, but it is absolutely imperative that it be practically impossible for the end user to reconstruct and save/print the image.
Obviously simply disabling right clicking is out, as the user could simply dig up the image in the cache. Breaking the image into tiles, then reconstructing them via javascript has merit; the user could still dig up the tiles and put them together in Photoshop, but is that practical for them? That's up for debate. I was also wandering today if the image couldn't be read, sent as a character string of pixel color values, and then constructed on the client side using an absolutely positioned element for each pixel.
But my potential solutions seem to be getting more and more ridiculously convoluted. And I'd like something that's been tested and shown to be scalable. I can't possibly be the first to deal with this problem. Is there something else out there that I don't know about? What is the standard, accepted way to do this?
As an aside, I am aware that I will want to make the image data unavailable to external http requests. I would plan to have ColdFusion read the image file on demand and stream it to the client.
Thanks!
No matter what you do, someone could always screen capture the page. Keep a watermark on the full resolution image.
With 100% reliability, no. For an image to be displayed, it has to be downloaded onto the client's browser, and therefore CAN be retrieved.
You can make it harder for them to extract the image through various techniques, but none of them make it impossible - if nothing else, they can always just make a screen capture:
slice/dice the image into multiple pices and use table-based layouts to make it appear as a single image
javascript right-click disablers
various cache headers to try and prevent client-side cacheing
CSS overlays to try and prevent right-click->save as on the image itself
display in a Flash/Java app
etc... etc...
None are 100% reliable, and are all trivial to bypass by a determined (and even slightly knowledgeable) user.
You can't, unless you sell specific hardware, even then people can put a camera in front screen and take pictures
You can water mark your images
You can actively sue who ever steals your pictures (that is in reference to how others solve this).
Nicholas,
As you pointed, there is no protection against Print Screen.
I would suggest you to implement the media protection of sites like Image Bank (http://www.gettyimages.com), but is mostly based in NOT displaying full resolution images and heavy watermarking ...
I don't think there is a practical solution to your problem (if any).
Good luck!
Is there an alternative (and more elegant!) method of creating multiple tooltips on top of an image without using image maps? Preferably looking for a solution that makes use of jQuery, but not necessary.
While I know solutions exist with image maps, they just seem so clunky and unmaintainable. For example, what if the image comes from a dynamic source? Would that source also have to provide an image map as well, which someone would then have to create beforehand? Maybe I'm asking for too much, but on the chance that someone out there has a more elegant solution to this, I'd be very grateful.
Thanks for you help!
I understand your question, but there are two few things that we cannot break from.
Your images might be loaded dynamically
Tool-tip areas can be points, boxes, or basically ANY shape (a set of coordinates that binds a region)
Because of #2, it's impossible but to use an image map. If, however, your tool-tip areas are restricted to points and boxes, then you can make do without creating an image map. This doesn't mean that the image source doesn't have to provide any information because that doesn't make sense, it just means that the source can provide a generic JSON object that talks about the image. Once the image reaches client side, you can call a function that you wrote to create an invisible div on top of your image and based on the data you've received, create small div regions that have mouseenter() bound to them. Even with this, it's not FAR from an image map.
I guess the point I'm trying to make is that you are not getting away from having to attach data to your image AND do some processing of that data once it reaches client side. This is because you're working with such an unrestricted environment of an image that can take on any shape with your regions taking on any shape.
I'm not sure if this answers your question in any way, but usually elegance comes from taking advantage of restrictions, which in this case there is practically nothing we can work with.
I would like a user to be able to edit an image that I serve, using Javascript, and then upload that image back into App Engine.
Original image is stored as Blob in DataStore.
Image is served (currently) just using
Currently user can only view the image, but i want user to be able to edit the images (adding text and lines at most, no complex transformation needed).
User can save the image back into the web application.
What is the quickest way to do this?
Will it be easy to integrate with 3rd party javascript image libraries (which has the editing tools already)?
Your starting point (and minimum requirement) for line art (read: not pixels but as you say: text and lines) will be the HTML5 Canvas Object:
http://www.w3schools.com/html5/html5_canvas.asp
Depending on your use case you may want to 'underlay' the pixel image to be decorated.
For saving refer to
http://www.tutorialspoint.com/html5/canvas_states.htm and
How to save HTML5 canvas?
If the end results shall be pixels, Canvas2Image might by for you.
Sorry to just throw general links at you, but since you asked in a general way. Hope this helps.