fabricJS: Scale canvas view

Question

I have converted a pdf to image format using PDF.JS and rendered that to the canvas. While that process the rendered pdf image is showing blurred in the canvas.

I have no idea how to scale the image to some viewable format rather than being so blurred.

Image of the pdf in canvas:

Here in the image you can clearly see that the rendered image is not in readable format!

Here is the fiddle link: https://jsfiddle.net/kjxes63f/

var fabricCanvas;
fabricCanvas = new fabric.Canvas('firtcanvas');

document.querySelector("#pdf-upload").addEventListener("change", function (e) {
    var file = e.target.files[0]
    console.log("pdf evente");
    console.log(e);
    if (file.type != "application/pdf") {
        console.error(file.name, "is not a pdf file.")
        return
    }

    var fileReader = new FileReader();

    fileReader.onload = function () {
        var typedarray = new Uint8Array(this.result);
        console.log("typedarray");
        console.log(typedarray);
        console.log("this.result");
        console.log(this.result);
        PDFJS.getDocument(typedarray).then(function (pdf) {
            // you can now use *pdf* here
            console.log("the pdf has ", pdf.numPages, "page(s).")
            pdf.getPage(pdf.numPages).then(function (page) {
                // you can now use *page* here
                var viewport = page.getViewport(2.0);
                var fabricCanvas = document.querySelector("#firtcanvas")
                fabricCanvas.height = viewport.height;
                fabricCanvas.width = viewport.width;

                page.render({
                    canvasContext: fabricCanvas.getContext('2d'),
                    viewport: viewport
                }).then(function () {

                    bg = fabricCanvas.toDataURL("image/png");

                    fabric.Image.fromURL(bg, function (img) {
                        img.scaleToHeight(800);
                        img.scaleToWidth(600);
                        console.log("img");
                        console.log(img);
                        console.log(bg);
                        var imgCanvas = img.set({ left: 0, top: 0, width: 150, height: 150 });
                        fabricCanvas.add(imgCanvas);

                    });
                });
            });
        });
    };
    fileReader.readAsArrayBuffer(file);
});

Answer 1

Construction drawings are often wide-format and hard to read onscreen without zoom. As a work-around I'd suggest adding a zoom function to your canvas like below.

var canvas = new fabric.Canvas('pdfcanvas');
canvas.selection = false;

canvas.setHeight(450);
canvas.setWidth(636);

//zoom function
canvas.on('mouse:wheel', function(opt) {
  var delta = opt.e.deltaY;
  var pointer = canvas.getPointer(opt.e);
  var zoom = canvas.getZoom();

  zoom = zoom - delta / 200;

  if (zoom > 10) zoom = 10;
  if (zoom < 1) {
    zoom = 1;
    canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
  }
  canvas.zoomToPoint({
    'x': opt.e.offsetX,
    'y': opt.e.offsetY
  }, zoom);
  opt.e.preventDefault();
  opt.e.stopPropagation();
});

//pdf load
document.querySelector('#pdf-upload').addEventListener('change', function(e) {
  var pageEl = document.getElementById('page-container');
  var file = e.target.files[0];

  if (file.type == 'application/pdf') {
    var fileReader = new FileReader();
    fileReader.onload = function() {
      var typedarray = new Uint8Array(this.result);
      PDFJS.getDocument(typedarray).then(function(pdf) {
        //console.log('the pdf has ', pdf.numPages, 'page(s).');
        pdf.getPage(pdf.numPages).then(function(pageEl) {
          var viewport = pageEl.getViewport(2.0);
          var canvasEl = document.querySelector('canvas');
          canvasEl.height = viewport.height;
          canvasEl.width = viewport.width;
          pageEl.render({
            'canvasContext': canvasEl.getContext('2d'),
            'viewport': viewport
          }).then(function() {

            var bg = canvasEl.toDataURL('image/png');

            fabric.Image.fromURL(bg, function(img) {
              canvas.setBackgroundImage(img);
            });
          });
        });
      });
    };
    fileReader.readAsArrayBuffer(file);
  };
});

  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/1.8.349/pdf.min.js"></script>

  <input id="pdf-upload" type="file">
  <div id="page-container">
    <canvas id="pdfcanvas"></canvas>
  </div>