Better sharpness when export image

[CODEheures]

Export image for printing with a better sharpness can be done with a transform scale3d with a sharpness Factor (72dpi to 300dpi => 4 factor) I change export function to use transform scale, html2canvas v1.0.0, and toBlob instead toDataURL :

export: function (exportFilename, exportFileextension) {
      var that = this;
      exportFilename = (typeof exportFilename !== 'undefined') ?  exportFilename : this.options.exportFilename;
      exportFileextension = (typeof exportFileextension !== 'undefined') ?  exportFileextension : this.options.exportFileextension;
      if ($(this).children('.spinner').length) {
        return false;
      }
      var $chartContainer = this.$chartContainer;
      var $mask = $chartContainer.find('.mask');
      if (!$mask.length) {
        $chartContainer.append('<div class="mask"><i class="fa fa-circle-o-notch fa-spin spinner"></i></div>');
      } else {
        $mask.removeClass('hidden');
      }
      //var sourceChart = $chartContainer.addClass('canvasContainer').find('.orgchart:not(".hidden")').get(0);
      var sourceChart = $chartContainer.children('.orgchart').first().children('table');
      var flag = that.options.direction === 'l2r' || that.options.direction === 'r2l';
      var sharpnessFactor = 4;
      sourceChart.css({
        'transform-origin': 'top left',
        'transform': 'scale3d('+sharpnessFactor+', '+sharpnessFactor+', 1)'
      });
      var canvasWidth  = sourceChart.width()*sharpnessFactor;
      var canvasHeight  = sourceChart.height()*sharpnessFactor;
      html2canvas(sourceChart.get(0), {
        //'width': flag ? sourceChart.clientHeight : sourceChart.clientWidth,
        //'height': flag ? sourceChart.clientWidth : sourceChart.clientHeight,
        'width': flag ? canvasHeight : canvasWidth,
        'height': flag ? canvasWidth : canvasHeight,
        'onclone': function (cloneDoc) {
          //$(cloneDoc).find('.canvasContainer').css('overflow', 'visible')
            //.find('.orgchart:not(".hidden"):first').css('transform', '');
        }
      })
      .then((canvas) => {
        sourceChart.css({
          'transform-origin': '',
          'transform': ''
        });
        $chartContainer.find('.mask').addClass('hidden');
        if (exportFileextension.toLowerCase() === 'pdf') {
          var doc = {};
          var docWidth = Math.floor(canvas.width * 0.2646);
          var docHeight = Math.floor(canvas.height * 0.2646);
          if (docWidth > docHeight) {
            doc = new jsPDF('l', 'mm', [docWidth, docHeight]);
          } else {
            doc = new jsPDF('p', 'mm', [docHeight, docWidth]);
          }
          doc.addImage(canvas.toDataURL(), 'png', 0, 0);
          doc.save(exportFilename + '.pdf');
        } else {
          var isWebkit = 'WebkitAppearance' in document.documentElement.style;
          var isFf = !!window.sidebar;
          var isEdge = navigator.appName === 'Microsoft Internet Explorer' || (navigator.appName === "Netscape" && navigator.appVersion.indexOf('Edge') > -1);

          if ((!isWebkit && !isFf) || isEdge) {
            window.navigator.msSaveBlob(canvas.msToBlob(), exportFilename + '.png');
          } else {
            var selector = '.oc-download-btn' + (that.options.chartClass !== '' ? '.' + that.options.chartClass : '');
            if (!$chartContainer.find(selector).length) {
              $chartContainer.append('<a class="oc-download-btn' + (that.options.chartClass !== '' ? ' ' + that.options.chartClass : '') + '"'
                  + ' download="' + exportFilename + '.png"></a>');
            }
            // $chartContainer.find(selector).attr('href', canvas.toDataURL())[0].click();
            canvas.toBlob(function (blob) {
              $chartContainer.find(selector).attr('href', URL.createObjectURL(blob))
              $chartContainer.find(selector)[0].click()
            }, 'image/png')

          }
        }
        $chartContainer.removeClass('canvasContainer');
      }, function () {
        $chartContainer.removeClass('canvasContainer');
      });
    }

[RafaelLinux]

Doesn't work for me. I replaced export: function (exportFilename, exportFileextension) function in jquery.orgchart.js with your function, and even image is not showed :(

[CODEheures]

Doesn't work for me. I replaced export: function (exportFilename, exportFileextension) function in jquery.orgchart.js with your function, and even image is not showed :(

Do you insert script for html2canvas in version 1.0.0? It is important because promise (.then((canvas) => ...) don't run on html2canvas v0.5

[stevenrlp]

You just need to set the scale when calling html2canvas, this will double the quality:

html2canvas(sourceChart, { 'scale': 2, 'width': flag ? sourceChart.clientHeight : sourceChart.clientWidth, 'height': flag ? sourceChart.clientWidth : sourceChart.clientHeight, 'onclone': function (cloneDoc) { $(cloneDoc).find('.canvasContainer').css('overflow', 'visible') .find('.orgchart:not(".hidden"):first').css('transform', ''); } })

Source:https://stackoverflow.com/questions/22803825/html2canvas-generates-blurry-images