What is the best way to restore the original dimensions of images after they have been altered?

Question

What is the best way to restore the original dimensions of images after they have been altered?

I have content displayed on a webpage with images, each image having a specific width or none specified. When a user clicks a button, the content is exported to a PDF file. To ensure the images fit correctly on the PDF page, I adjust their width and height. However, this adjustment also affects the images on the webpage itself. How can I prevent this from happening?

You can see a demonstration here: https://plnkr.co/edit/STVjUB1YMwbOrtYLxR8V?p=preview

In the demo above, when you click on the export button, the image dimensions are altered to ensure they fit properly in the PDF file. Unfortunately, these changes also impact the images displayed on the webpage. Is there a way to apply the modified dimensions only to the PDF file without affecting the webpage?

Here is an example of the HTML code:

<button ng-click="export()">export</button>
<div class="myDivClass"..>
 <img src="data:image/jpeg..">
 <img src="..." style="width:400px">
 ..
 //content
</div>

And here is the corresponding JavaScript code:

$scope.export = function() {
         var imagesToResize = document.getElementsByTagName("img");
         for(i=0;i<imagesToResize.length;i++){
            imagesToResize[i].style.width = "100px";
            imagesToResize[i].style.height = "100px";
        }

Any suggestions on how to address this issue would be greatly appreciated.

javascript jquery html css angularjs

Answer 1

Answer №1

--- Update---------------------------------------------------------

Upon further investigation, I discovered that the issue stemmed from using document.getElementByTagName('img') and manipulating all images at once. This approach isn't suitable when you only need specific printable images to have custom height and width adjustments. Instead, it's better to move your printable content to a hidden div, perform the necessary manipulations there, and then use that div for printing. I created a GitHub repository where you can view the solution and determine if it resolves your problem. Find the repository here: https://github.com/sagarb3/jspdf-demo

In the GitHub link, I stored downloaded images as base64 to avoid cluttering the project. I also made modifications to some functions.

While my understanding of jspdf wasn't extensive, I managed to come up with a viable solution.

This is how my index.html appears now:

<!doctype html>
<html ng-app="app">

<head>
    <!-- Various script and stylesheet links -->
</head>

<body>
    <div ng-controller="listController">
        <button ng-click="export()">Export</button>
        <div id="content-div">
            <!-- Content structure -->
        </div>
    </div>
    <div id="pdf-content" style="display:none">
    </div>
</body>

</html>

And here is the JavaScript file containing the solution:

 var app = angular.module("app", []);

 app.controller("listController", ["$scope", '$timeout',
     function($scope, $timeout) {

         $scope.employees = [{ pageIndex: "div1", pageHeader: "This should be shown in page1" },
             { pageIndex: "div2", pageHeader: "This should be shown in page2" }
         ];


         $scope.export = function() {
             var pdf = new jsPDF('p', 'pt', 'A4');
             var pdfName = 'test.pdf';
             var vDom = $('#pdf-content').html($('#content-div').html());
             // Additional logic for exporting to PDF
         }
     }




 ])

Stay tuned for updates!

Answer 2

--- Update---------------------------------------------------------

Upon further investigation, I discovered that the issue stemmed from using document.getElementByTagName('img') and manipulating all images at once. This approach isn't suitable when you only need specific printable images to have custom height and width adjustments. Instead, it's better to move your printable content to a hidden div, perform the necessary manipulations there, and then use that div for printing. I created a GitHub repository where you can view the solution and determine if it resolves your problem. Find the repository here: https://github.com/sagarb3/jspdf-demo

In the GitHub link, I stored downloaded images as base64 to avoid cluttering the project. I also made modifications to some functions.

While my understanding of jspdf wasn't extensive, I managed to come up with a viable solution.

This is how my index.html appears now:

<!doctype html>
<html ng-app="app">

<head>
    <!-- Various script and stylesheet links -->
</head>

<body>
    <div ng-controller="listController">
        <button ng-click="export()">Export</button>
        <div id="content-div">
            <!-- Content structure -->
        </div>
    </div>
    <div id="pdf-content" style="display:none">
    </div>
</body>

</html>

And here is the JavaScript file containing the solution:

 var app = angular.module("app", []);

 app.controller("listController", ["$scope", '$timeout',
     function($scope, $timeout) {

         $scope.employees = [{ pageIndex: "div1", pageHeader: "This should be shown in page1" },
             { pageIndex: "div2", pageHeader: "This should be shown in page2" }
         ];


         $scope.export = function() {
             var pdf = new jsPDF('p', 'pt', 'A4');
             var pdfName = 'test.pdf';
             var vDom = $('#pdf-content').html($('#content-div').html());
             // Additional logic for exporting to PDF
         }
     }




 ])

Stay tuned for updates!

What is the best way to restore the original dimensions of images after they have been altered?

Answer №1

Similar questions

Pinia: Is it better to invoke '{myStore}' or 'return myStore' within the return statement?

The ng-cloak directive doesn't seem to be functioning properly

Saving base64 encoded pdf on Safari

Retrieve an XML file using JavaScript and store it within a variable

Exploring yii2 with javascript to display image previews

Using a jQuery plugin within an Angular 2 component: A step-by-step guide

Updating a Div with XML data through JQuery

Updating state before and after making an API request

Excessive white space on WordPress pages is creating a less than ideal

What is the unit that you can deduct from a JavaScript / MongoDB Date object?

Custom dropdown selection using solely JavaScript for hidden/unhidden options

Can TypeScript support the implementation of versatile decorators that can be linked together based on their input and output types?

Replacing a div with another div can be achieved in a single swap

To initiate dragula on button click, simply add the dragula attribute

When clicked, the menu disappears successfully with the "show" functionality, but unfortunately, the "hide" feature is not working as intended

How can I effectively link my React admin frontend to my Nodejs/Express backend for optimal connectivity?

How can I ensure that images remain within the link elements in a flex container?

Turn off automatic vertical scrolling when refreshing thumbnails with scrollIntoView()

Troubleshooting: Issue with Ajax communication to PHP backend script

What is the best way to display HTML content from a stored object?