如何修改后恢复图像的宽度和高度-Java 学习之路

我正在网页上显示一些内容和图像 . 每张图像都有一定的宽度，或者可能没有指定宽度 . 当用户单击按钮时，网页上的内容将导出到PDF文件，以便在PDF页面中调整图像，我正在修改图像的宽度和高度，但是它会修改宽度和图像的高度 . 网页也是 . 如何停止更改网页上图像的宽度和高度 .

请找到演示：https://plnkr.co/edit/STVjUB1YMwbOrtYLxR8V?p=preview

在上面的演示插件中，当单击导出按钮时，图像宽度和高度被修改，以便在将数据导出到PDF时，图像正确地适合PDF页面，并且可以看到修改后的图像宽度/高度变化在网页上也是如此 . 我如何限制，以便修改后的图像宽度和高度仅应用于PDF文件，但不应用于网页 .

HTML代码：

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

js代码：

$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";
        }

任何输入都有帮助 .

1 回答

---编辑---------------------------------------------- -----------

所以在深入挖掘问题之后，我意识到问题是一个简单的document.getElementByTagName（'img'）并修改整个img 's is not appropriate ,for instance if you just want some printable img to have a custom height and width , you cannot just suddenly shrink and re-grow all the images , so it'更好的方法将你的可打印内容带到一个隐藏的div然后在隐藏的div中做所有的maninpulation然后使用隐藏的div作为可打印内容 . 我甚至做了一个git repo，你可以看到并看到你的问题是否得到解决 . git链接：https://github.com/sagarb3/jspdf-demo

在git链接中我保留下载的图像作为图像的base64使整个事情有点难看 . 我甚至修改了一些功能

我对jspdf没有很好的理解，但我最终得到了一个解决方案

这就是我的index.html现在的样子

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

<head>
    <link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    <!--<script src="html2canvas.min.js"></script>
-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.33/vfs_fonts.js"></script>
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
    <script src="script.js"></script>
</head>

<body>
    <div ng-controller="listController">
        <button ng-click="export()">export</button>
        <div id="content-div">
            <div id="{{value.pageIndex}}" ng-repeat="(key, value) in employees" class="myDivClass" style="background-color:white">
                <h1><span style="background-color: yellow">{{value.pageIndex}}</span>




    <div>  
    <h1>
    <p style="color:red"> {{value.pageHeader}}</p></h1>
            </div>
            <p> A variation of the ordinary lorem ipsum text has been used in typesetting since the 1960s or earlier, when it was popularized by advertisements for Letraset transfer sheets. It was introduced to the Information Age in the mid-1980s by Aldus Corporation, which employed it in graphics and word-processing templates for its desktop publishing program PageMaker.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce egestas elementum justo sed placerat.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce egestas elementum justo sed placerat.</p>
            <img alt="" src="download2.jpg" class="image-responsive" style="width: 800px;" />
            <img src="download.png" style="width: 400px;" />
            <h1>One more image</h1>
            <h1>This is last line displayed in the page</h1>
        </div>
    </div>
    </div>
    <div id="pdf-content" style="display:none">
    </div>
</body>

</html>

这是带有解决方案的js文件：

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());
             //console.log(vDom);
             var elementHandler = {
                 '#skipExport': function(element, renderer) {
                     return true;
                 }
             }
             var options = {
                 'elementHandlers': elementHandler
             };
             function formatHtml() {                
                 var imagesToResize = document.getElementById('pdf-content').getElementsByTagName("img");
                 for (i = 0; i < imagesToResize.length; i++) {
                     (function(i) {
                         imagesToResize[i].style.width = "100px";
                         imagesToResize[i].style.height = "100px";
                     })(i);
                 }
                 return new Promise(function(resolve, reject) {
                     resolve('success');
                     reject('err');
                 })
             }
             formatHtml().then(function(res) {
                 $("#pdf-content").find(".myDivClass").each(function(index) {
                     pdf.fromHTML($(this).html(),15, 20, options, function(){
                        pdf.addPage();
                     })
                 })
                 $timeout(function() {
                     pdf.save(pdfName);
                 }, 3000);

             })

         }
     }




 ])

;

回复于 2024-04-29T10:23:00+08:00

如何修改后恢复图像的宽度和高度

1 回答

相关问题