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.
Related
I am using React Native Version 0.44.0 and expo app to render some images and text on the screen in a ListView.
My issue is with styling.
A. Originally I had only a View (View1) and an image and a text component side by side within View1. I set up the flexDirection="row" and justifyContent="center" and that centered the image and the text within the screen.
B. I needed to insert another text component with a different style under the first text, but the flexDirection="row" would simply not allow it to go under it.
I inserted View2 and that did allow the texts to be vertically positioned but the higher text got cut off at the right edge of the screen( i believe its because the image is set with a fixed height and width).
I couldn't get the text back in the center until I added View3 and gave it a fixed width.
So View1 has flex=1 , View2 has flex=1, and View3 has width="someValue"
My concern: right now its rendering on the device perfectly. But is this acceptable practice? will it be distorted on other devices or will it render the fixed width dynamically based on the screen resolution since its density-independent pixel unit?
will it render the fixed width dynamically based on the screen
resolution since its density-independent pixel unit?
Nope. It will not be adjusted as per different screen sizes. The width will change from screen to screen. Using flex-box is the best way to get the things
done , but sometimes you need the help of screen width and screen height. For that you can use the Dimensions from the react-native. Here is a guide to use it. And there are also some libraries available to make the app responsive like react-native-responsive and react-native-extended-stylesheet.
In your particular case, you could divide the row view(view1) with 2 inner views having the desired flex. And first inner view may hold the image view, if you find difficulty with the image height and width with its parents height and width, you may also need to refer the image resizemod. Second inner view holds your text. Also remember to add some padding to view1 so that the inner views will always be in the view port and Nevers goes out of the viewport.
I have a problem with my project, and it is about converting the html file to pdf. I have one question, how can we alter the size of image in jspdf because when i'm downloading the pdf, it show that the image is not fit in the page and only show half of it for A4.then, i'm trying using the A0 size but the font will become very small even though the image is right. can some one tell how to fit the image or maybe changing the font size?
(and also i'm using HTMLfromPdf.js)
You can resize the canvas image using the method parameters,
pdf.addImage(imgData,'JPEG',0,0,canvas.width*0.2,canvas.height*0.2,"a","FAST");
You can calculate the required ratio and replace the image width and height parameters.
You can use dimensions for jsPDF directly from canvas object like described there
https://stackoverflow.com/a/65124814/9026103.
I have added image map on my map based web page.
Since it is supposed to work on different resolutions, hot-spots defined in the image map have to be dynamically changed when browser viewport size changes.
ex: when I initially place a hot-spot in India and change the browser size it should still
placed on India not in somewhere else.
I saw that there is a property called "coords" containing 3 parameters.
Does these properties dynamically change when it changes the browser viweport size?
Or can I make them dynamically changing?
Or going to javascript is recommended?
(As far as I tested they are fixed to absolute locations.)
I did some research on imagemaps and found that;
They do not dynamically change their position when it changes the browser viewport size
I didn't tried to change'em dynamically. Hopefully you may able to do it with javascript
javascript was the solution for my problem
with the use of javascript ;
Browser viewport width and height can be taken
And relative to that width or height you can position the elements
imagemaps in dreamviewer is not a solution for this matter
I have seen some jQuery scripts that you can create photo gallery in a mosaic way. Like this one http://www.themepunch.com/codecanyon/megafolio/megafolio_dark.html or this http://www.themepunch.com/codecanyon/megafolio/megafolio_light.html
My photos have different sizes but most of them are bigger in width than height.
My goal is to automatically and randomly set the dimensions of a container for the image (and load the original image) instead of cropping them manually and set them as a thumbnail in different sizes.
For example, in first entrance img1.jpg it will be shown as 100x50 but upon refresh, the same image it may be shown as 50x100.
My question is how can I create this effect with CSS and javascript ?
Based on the links in your question, I see three types of images: vertical, horizontal and square images. Thus, not randomly sized.
Also, it appears to be nicely laid out in a grid layout. The width of the vertical images is half the width of a horizontal image, the height of a vertical image is twice the height of a horizontal images (so basically it's just flipped) and the square images are equal to the width of either the horizontal or vertical images.
By establishing a grid and column size, you can dynamically position containers containing the images and assigning them a shape, for a lack of a better term, and an orientation. With some jQuery you can then easily position them using the .css function, relative to the other containers.
Note: The thumbnails used in your example, are equal to the size of their container. This is also a good idea for you, seeing as how it will make sure you get the desired effect.
I am trying to resize all elements on a web page upon resizing the window. The background image needs to stretch along with draggable items, text boxes, font size, and other images. The draggable items needs to stay in the same place in proportion to the background image. Everything needs to maintain aspect ratio. I have tried numerous methods and none seem to work.
As far as the background image scaling to whatever is going on on the page, see my reply to this guys similar question.
resize the image to fit the dimensions of TD
as far as other objects changing but maintaining aspect rations you may want to look into css Media Queries.
good luck