Develop Reference

Convert HTML to Image at its Original Dimentions

I have been trying to convert an HTML node in my react code into Image and download it afterward. There are several libraries which we can use to perform that job for us like html-to-image, dom-to-image. But the problem is these libraries download the image at its view size, not at its original size.
I mean if I have a component that has different styles at different screens when I download an image of that component I want the image to have the styles of the larger screen, irrespective of what my current window size is.
If I have a responsive component that spreads and shrinks with the window size I want the image of that component to look like how the component looked at larger screens.

If you want to download the image with the image's original dimension then simply use width and height for width and height of the image.
If you want to download the image with the dimension of its container including padding used in the container, then use clientWidth and clientHeight property of the image element.
Refer this link

If you want to download the image with the image's original dimension then simply use width and height for width and height of the image. If you want to download the image with the dimension of its container including padding used in the container, then use clientWidth and clientHeight property of the image element. Edited the image for minimum required of pixels.

I have found that we can only download an HTML node in a react tree at its view size and style. Suppose that we have a table in a page. When we are a large screen we see that table in one style. But on a smaller screen, we see it in a different style. When we download an image of that table, we want the table to be downloaded at its large-screen style and size, irrespective of the screen size.
Apparently, we can only download what is present in the physical DOM. If the physical DOM has a smaller version we can only download the smaller version of it. If physical DOM contains a larger version of the table we can download the larger version on it.
What I did to overcome this problem is to open a modal when user wanted to download the image of that table. I drew a large version of the table with fixed height and width on that modal and downloaded the image from that modal. In smaller screen this big Table inside a modal was not looking very nice, even though it was for few moments only. So to hide this big table, I have put a nice loading animation on top with fixed position.
After download completes, I close the modal.

ReactJS reduce image file size without losing aspect ratio after user selects it in an input

I've been searching everywhere without luck.
A simple way to reduce the width of an image picked with a simple <input type="file" /> without it losing it's aspect ratio.
I am using jquery to select the image before uploading like so: $('#image')[0] but I need a way to reduce the image width before uploading to reduce the file size and data being sent to the server and of course received when users download the image when visiting the website.

If you still need it you can use this library. It worked for me, because it lets you resize width, height and file size, obviously with a image quality loss.
Compress.js library

Magnifier not magnifying CSS/ JS

I have my magnifier set up. Take a look.
http://www.omarhabash.com/twyla
Looks like all works except it is not magnifying... Can some one tell me exactly what I am missing to magnify the image in the magnifier cursor?

It looks like you're using Bootstrap's "magnify" plugin.
Its docs say "If you want to show the large preview at a 200% ratio, just use an image twice the size of its container." In your website, you are already displaying the image at its full size, which is why the "magnified" version is identical to the original.
Just use a larger image and in the html set its size to the same pixel dimensions you currently have; the plugin will do the rest for you.

what is the difference between sizing an image via image.width/height vs image.style.height/width

I have a large png image (15000x6000) that I load into chrome. I use the image for data analysis (convolutions etc).
I created a smaller version for viewing (coffeescript) via CSS style:
img.setAttribute 'style',
"position:absolute;top:0;left:0;width:#{w};height:#{h};z-index:#{z}"
where w, h are the width/height of the smaller image (z is used to create an ordered stack of elements)
This works, but seems to actually reduce the original image size too, rather than simply scaling the page display size! I.e. when I look at the original image width, it is reduced.
I get around this by creating a second, clone image of the original. I do this by setting the clone width/height to the smaller value, and then setting the img.src to the original src. This seems to work.
Is this the expected behavior? Do "thumbnails" and other image stunts actually decrease the initial image size? Profiling doesn't help .. chrome has removed its Native Memory functionality, sigh.

How to dynamically crop/scale images in a website

I need my site to be able to resize and crop an image based on the viewport on a browser. I've so far managed to dynamically resize it with an imagemap, but can't seem to crop it dynamically. I'd like it to crop and scale simultaneously without distorting an image. The image I'm using is 1920x1080 which is far bigger than most browsers so cropping the edges while scaling would make it appear similar on different browsers.

I use this jQuery plugin quite often. :)
http://srobbin.com/blog/jquery-plugins/jquery-backstretch/

It sounds like you can already detect the viewport size somehow. You just need the CSS or javascript to crop an image. In that case, I'd recommend this article:
http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image
You could
1) Use negative margins.
2) Absolute position the image in a smart way.
3) Use the CSS clip property.