讓 canvas.toDataUrl 獲得正確的圖像尺寸

Question

我的夢想是將 div 的內容保存為 pdf。 目前我正在以這種方式使用 Html2pdf：

function pdfFatt() {
        var idFatt = 1;
        var dataFatt = 1;

        var div = document.querySelector('.default_template_holder');

        if(div_stampa){
            html2canvas(div, {
                onrendered: function (canvas) {
                    var imgData = canvas.toDataURL('image/jpeg');
                    var doc = new jsPDF();
                    doc.addImage(imgData, 'JPEG', 0, 0, 210, 297);
                    doc.save('fatt_'+idFatt+'_'+dataFatt+'.pdf');
                }
            });
        }else{

        }
}

問題是分辨率，事實上一切正常，但圖像的分辨率真的很糟糕。 （截圖 1）。

網上沖浪我找到了解決方案，我會放大畫布！ 所以我的代碼是這樣的

function pdfFatt() {
        var idFatt = 1;
        var dataFatt = 1;

        var scaleBy = 2;
        var w = 2480;
        var h = 3508;
        var div = document.querySelector('.default_template_holder');
        var canvas = document.createElement('canvas');
        canvas.width = w * scaleBy;
        canvas.height = h * scaleBy;
        canvas.style.width = w + 'px';
        canvas.style.height = h + 'px';
        var context = canvas.getContext('2d');
        context.scale(scaleBy, scaleBy);

        if(div_stampa){
            html2canvas(div, {
                canvas:canvas,
                onrendered: function (canvas) {
                    var imgData = canvas.toDataURL('image/jpeg');
                    var doc = new jsPDF();
                    doc.addImage(imgData, 'JPEG', 0, 0, 210, 297);
                    doc.save('fatt_'+idFatt+'_'+dataFatt+'.pdf');
                }
            });
        }else{

        }
}

現在分辨率沒問題，但圖像不適合畫布！！ 我需要在 html2pdf 函數上添加參數“canvas：canvas”，否則將無法縮放。 （截圖2）。

有沒有辦法獲得分辨率為（截圖2）的（截圖1）？

非常感謝。

截圖 1

截圖 2

我解決問題的代碼是：

    function pdfFatt() {
   //selezione elementi nella visuale della fattura
   var menu = document.querySelector('.vertical_menu_area'); 
   var div = document.querySelector('.default_template_holder');
   var barra = document.querySelector('.fattura-strumenti');

   //controllo esistenza dei 3 elementi fondamentali
   if(div && menu && barra){

      //id e data fattura per nome pdf
      var idFatt = $j(".fattura-sub-intestazione input[name='id-fattura']").val();
      var dataFatt = $j(".fattura-sub-intestazione input[name='data-fattura']").val();

          //creazione canvas scalato x 2 per alta risoluzione
          var scaleBy = 2;
      var w_menu = menu.offsetWidth;
      var h_menu = menu.offsetHeight;
          var w_div = div.offsetWidth;
      var h_div = div.offsetHeight;
          var div_style = div.currentStyle || window.getComputedStyle(div);
          var mar_div_w = parseFloat(div_style.marginLeft);
          var mar_div_h = parseFloat(div_style.marginTop);
          var w_barra = barra.offsetWidth;
      var h_barra = barra.offsetHeight;
      var canvas = document.createElement('canvas');
          var context = canvas.getContext('2d');
          canvas.width = w_div * scaleBy;
      canvas.height = h_div * scaleBy;
          context.scale(scaleBy, scaleBy);
          context.translate(-w_menu-w_barra-mar_div_w-8,-mar_div_h);
      context.webkitImageSmoothingEnabled = true;
          context.mozImageSmoothingEnabled = true;
          context.imageSmoothingEnabled = true;
          context.imageSmoothingQuality = "high";

          //creazione pdf con script html2canvas
      html2canvas(div, {
         canvas:canvas,
         onrendered: function (canvas) {
            var imgData = canvas.toDataURL('image/jpeg', 1.0);
        var doc = new jsPDF();
        doc.addImage(imgData, 'JPEG', 0, 0, 210, 297);
        doc.save('fattura_'+idFatt+'_'+dataFatt+'.pdf');
          }
       });
   }else{
      alert("Impossibile salvare la fattura");
   }
}

Answer 1

您的第一個代碼是正確的，您只需要獲取var div的寬度和高度並將其用於jsPDF()和.addImage尺寸，關於分辨率嘗試添加dpi:300選項並將瀏覽器比例固定為 1。我更新了您的代碼如下：

function pdfFatt() {
        var idFatt = 1;
        var dataFatt = 1;

        var scale = 'scale(1)'; // For Fix Zoom of browser
        document.body.style.webkitTransform =  scale;    // Chrome, Opera, Safari
        document.body.style.msTransform =   scale;       // IE 9
        document.body.style.transform = scale;     // General    

        var div = document.querySelector('.default_template_holder');
        var width = div.offsetWidth;
        var height = div.offsetHeight;

        if(div_stampa){
            html2canvas(div, {
                dpi:300,
                scale:2,
                onrendered: function (canvas) {
                    var imgData = canvas.toDataURL('image/jpeg');
                    var doc = new jsPDF("p", "px", [width,height]);
                    doc.addImage(imgData, 'JPEG', 0, 0, width, height);
                    doc.save('fatt_'+idFatt+'_'+dataFatt+'.pdf');
                }
            });
        }else{

        }
}