Html Image source from scaled down of original image - javascript

I'm looking for a way to hide the original image source. For proper example let's think of user profile picture. I don't want anyone to access original high resolution user profile picture. Currently i use but if someone goes to inspect they can access full size profile picture of them. How can i prevent it ?
I thought about that; in register when user upload their profile picture, first it scales down and saved to the related directory. And when using i will call it like But not sure if this is the right approach to the case.
Thanks and regards.

Doing that is impossible with HTML, CSS or JS. Because if Chrome can view the source, so can the user.
Maybe there's a way of doing this with e.g. PHP. But if you would take a look at other social medias you will find that every image or video can be found through the source.

Related

PNG Document Viewer

I would like to make an image viewer that can display multiple images in a document format. Basically my web application server right now is sending me an array of base64 png files that I need to display in a viewer that looks like a document. A good example for my requirements would be the following picture:
Also I should be able to animate the pages by rotating them, moving the page from one place to another or deleting a page by either clicking on the thumbnail or scrolling through the page and performing the necessary action. Currently my frontend imageviewer looks like this:
Which is mostly for testing purpose but I would prefer it looks more like the first example Image. Is there any library that can help me with this or any suggestion on how to start about it. Any advice would be grateful!.
Thank you!

Create interactive engineering part drawing accessed via web page

I am trying to make a seamless process for creating engineering part drawings that have interactive balloons that will somehow go to the part you clicked. A part balloon contains a part number, I want the user to be able to click that part number to go to that selected part number drawing.
What I am asking help for is if anyone knows or has any recommendations how to achieve this.
We use Solidworks as our CAD software. Currently we create save a copy of the drawing in Solidworks to PDF and that is then converted to an enlarged PNG programmatically. There are currently no hooks, anchors or tags associated with the PNG. The PNG is displayed on our parts browsing website. Currently you cannot interact with the drawing on the webpage other than zooming in and out.
I can change that process to whatever will work, but it needs to be almost completely automated. Any ideas would be appreciated.
So far I have looked into adding JavaScript to the actual PDF document programmatically, but I do not fully understand the interaction between web based JavaScript and PDF JavaScript. There is not much online either, or else I couldn't find it. I have also looked into adding links to the PDF, but i cannot get it to open in the current iFrame when a user clicks a link on the PDF, where i would normally user target="_self" to mitigate this.
Please let me know if I can clarify something, as there is a lot of information and it would be overwhelming to write on here.

preview/enlarge/zoom image api for my laravel app

I am making my website and I want to show some images on it in small area, say in a 300x300 <div>.
What I want is that the images can be previewed/enlarged when someone clicks on them, so that the user can have a better and bigger view of the image.
For ex.- when you click a product image on flipkart.com / jabong.com, you can see an enlarge view of the image. In flipkart, it magnifies the image, and in jabong, you can rollover the image(which is kind of a zoom).
I have searched a lot over google for some kind of API for this but I couldn't find anything. So, my question is - 'Is there an API which could do this kind of job? If not, then how is can this be implemented? Especially, what jabong does - rolling over the image'.
If there are no APIs, please guide me on how this can be implemented. I don't want any code for implementation. Just give me some good pointers to follow.
You're probably looking for something like this:
Magnifier.js
If this doesn't fit your needs.. a Google Search will reveal a few suggestions:
jquery-zoom-effect-plugins

Image Magnifiers and Clickable Content

I'm currently using an application that generates large images for organizational maps, unfortunately the content is quite small due to the volume of data being output. I would like to find a way that allows the user to view segments of the map in an intuitive manner, yet still allow the user to click content inside of the map.
The first thing that came to mind was an image magnifier using something similar to the loupe jQuery plugin. This works great for magnifying the image, but I can't select content once magnified. If anyone has any suggestions for possible solutions to this issue I would greatly appreciate the help.
Thanks!
You might try Etalage: http://frique.me/demos/etalage/ -- if you click on the image, the link works (triggers the javascript alert), almost no other image zoomer seems to do that.
I'm trying to find something that returns the coordinates on a click, so I can ask users to zoom and and find things within a picture, and then I'll have the coordinates to crop the picture to extract the items they've found. But I haven't found a script that does that yet, either.

How can you change how pictures load on webpages? (e.g. lower resolution)

how can I change the way an image loads on a web page? I presume using javascript to do this. I'm looking for a way to have the picture load at a lower resolution and then get "sharper". As appose to loading downward, if that makes sense. Facebook does this with their "theater" picture pop-up window.
This is actually due to the way that the image is encoded, namely images that are interlaced will have this effect.
http://en.wikipedia.org/wiki/Interlacing_(bitmaps)
Check to see if your image editing utility has this feature, applications such as photoshop definitely will but something as simple as paint won't.
Sounds to me a lot like progressive loading in jpg images. That's something you have to adjust while creating the image. I'm only familiar with the gimp, there you have to check a checkbox while exporting to jpg. Check out this screenshot.
Another way to achieve this is to initially point the images on the webpage to smaller images and then do some stuff with some jQuery plugin. I'm not sure right now but I think there was one called jQuery.lazyload or sth. like that.
Hope it helps you!
To do this you don't need javascript. It is actually part of how you saved your image. You should make your image with progressive option. It adds a little weight on the image, but it will show parts of image as it is loading.
To do this on Photoshop:
Open your images file
Choose File
Choose Save for Web... option.
On the opened Dialog select jpg
On the upper right corner there are few options. Check 'Progressive' option
You are done!
Now replace your image and all the browser will show that image as they are loading it.

Categories