4

Boa tarde a todos!

Estou desenvolvendo uma aplicação que faz a digitalização de uma ficha com várias digitais, onde é possível o usuário efetuar cortes nessas digitais e depois salvá-las no banco de dados em BLOB. Para fazer a digitalização estou utilizando o Dynamic Web TWAIN, e a imagem é digitalizada com 600DPI.

A digitalização acontece da seguinte forma: a imagem digitalizada é armazenada em um canvas, pelo próprio Web TWAIN. Esse canvas eu não o deixei disponível na tela, pois não dá pra fazer muita coisa com ele. O que eu fiz foi o seguinte: após gerar o canvas com a imagem, eu crio um elemento img e atribuo o canvas.toDataURL() no src desse elemento img, conforme abaixo:

//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;

Para cortar as imagens, estou utilizando duas bibliotecas: JCrop e Cropper. A JCrop eu utilizo para fazer as marcações na ficha, onde o usuário irá clicar. Quando ele clica, é aberta uma dialog com aquele pedaço da imagem para que ele possa realizar um corte mais preciso. Até esse ponto também está funcionando muito bem. A biblioteca Cropper é a que realiza o corte preciso, na dialog com o pedaço da imagem.

Para criar as imagens que serão exibidas na dialog de corte, eu utilizo o seguinte código:

    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);

A variável obj é um json com as dimensões das marcações, utilizadas no Jcrop. O método getImagemOriginal() pega o binário da imagem principal, a imagem digitalizada.

Depois que o usuário faz os cortes e tudo mais, ele manda salvar. O processo todo está funcionando perfeitamente, com um pequeno problema: A única imagem que eu tenho certeza que está em 600DPI é a imagem base, a que vem do scanner. Quando o usuário clica em alguma marcação para fazer o corte, eu inspeciono o elemento e pego o binário e abro no navegador. Depois disso eu salvo a imagem na máquina e olho as propriedades dela. Ela sempre está com 96DPI.

A minha pergunta é a seguinte: como faço para que as imagens que são abertas na dialog de corte também fiquem com 600DPI?

Desde já agradeço a atenção de todos!

PS: Essa aplicação vai rodar no Chrome.

4
  • 2
    Canvas trabalha com pixels, não tem o conceito de DPI. Se precisar especificar DPI, vai ter que registrar no formato de saída (se for suportado) ao gravar um arquivo ou gerar a imagem final. Imagens como JPEG sequer tem lugar para esta informação, por exemplo. PNG já permite.
    – Largato
    Commented 24/11/2016 às 17:18
  • 1
    Outra aplicação, mas vale a leitura como assunto relacionado: Qual o DPI recomendado para imagens utilizadas em websites?
    – Largato
    Commented 24/11/2016 às 17:22
  • 1
    E é possívelmente o mesmo problema dessa: Alteração densidade da imagem (DPI) - de qualquer forma, se for usar para impressão (que é um raro caso onde o DPI é importante) basta você especificar a saída em milímetros em vez de pixels. Os DPIs são a mera relação entre pontos x espaço ocupado
    – Largato
    Commented 24/11/2016 às 17:23
  • Considerei respondida após as respostas do Bacco. Muito obrigado! Commented 2/04/2017 às 17:03

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .