Image Resolution created with canvas

Question

Good afternoon to all!

I’m developing an application that scans a multi-digital file, where it is possible for the user to make cuts to these fingerprints and then save them to the BLOB database. To do the scan I am using Dynamic Web TWAIN, and the image is scanned with 600DPI.

The scan happens as follows: the scanned image is stored on a canvas by the Web TWAIN itself. This canvas I did not leave it available on the screen, because it can not do much with it. What I did was the following: after generating the canvas with the image, I create an element img and attribute the canvas.toDataURL() in the src of that element img, as below:

//essa parte é para pegar a imagem em binário...
imagemData = 'data:image/jpeg;base64,' + DWObject.SaveSelectedImagesToBase64Binary();

//Aqui é onde eu seto aquele binário no componente img, que no caso já está na tela. 
//Essa parte funciona direitinho.
imagem = document.getElementById('imgCortes');
imagem.src = imagemData;

To cut the images, I’m using two libraries: Jcrop and Cropper. The Jcrop I use to make the marks on the chip, where the user will click. When it clicks, a dialog is opened with that piece of the image so that it can perform a more accurate cut. Up to this point it is also working very well. The Cropper library is the one that performs the precise cut, in the dialog with the image piece.

To create the images that will be displayed in the cut dialog, I use the following code:

    canvas = document.createElement('canvas');

    canvas.width = obj.valor[2];

    canvas.height = obj.valor[3];

    ctx = canvas.getContext('2d');

    ctx.drawImage(getImagemOriginal(), obj.valor[0], obj.valor[1],
        obj.valor[2], obj.valor[3], 0, 0, obj.valor[2], obj.valor[3]);

    imagem = document.getElementById('imgSelecionada');
    imagem.crossOrigin = 'Anonymous';
    imagem.src = canvas.toDataURL('image/jpeg', 1.0);

The obj variable is a json with the dimensions of the markings used in Jcrop. The getImagemOriginal() method takes the binary of the main image, the scanned image.

After the user makes the cuts and everything, he has it saved. The whole process is working perfectly, with one small problem: The only image I’m sure is at 600DPI is the base image, the one that comes from the scanner. When the user clicks on any markup to make the cut, I inspect the element and take the binary and open it in the browser. After that I save the image on the machine and look at its properties. She is always with 96DPI.

My question is as follows: how do I make the images that are opened in the cut dialog also stay with 600DPI?

Thank you for your attention!

PS: This application will run on Chrome.