é o seguinte, eu quero usar o canvas como o fundo e desenhar as imagens por cima dele, porém quanto maior eu dimensiono o canvas pior a imagem do canvas fica, e tipo, eu não entendo muito bem como que o canvas deixa a imagem tão ruim, venho fazendo testes com um sprite e tem ficado cada vez pior, isso esse problema é devido eu usar sprites? ou até com uma imagem unica ele tem problemas?
[RESOLVIDO] Como melhorar a qualidade de imagem no canvas?
S
3 Respostas
T
Dê um exemplo do seu problema (um print, por exemplo).
Pode ser um motivo. Se você tem, por exemplo, uma imagem png/jpg/… de 32 por 32 pixels e o redimensiona (estica) pra ficar com 64 por 64 pixels, todos os pixels são basicamente duplicados, o que a deixa mais “pixelizada”, e geralmente não é uma boa ideia.
A coisa fica ainda pior se você não fizer um redimensionamento usando múltiplos de 2, pois a imagem pode ficar mais distorcida ainda. Pegue por exemplo uma imagem de 32x32 e redimensione para 60x60. Ela parecerá mais distorcida que uma imagem de 64x64, pois não é possível duplicar todos os pixels.
Ps: um sprite e/ou um spritesheet é uma imagem, e sofre os mesmos problemas de uma imagem.
Abraço.
S
por exemplo, eu tava usando uma imagem 256x256 e o canvas eu tava dimensionando em 256x256, só ai ela ja ficava muito ruim, ficava meio borrada sabe, a qualidade cai um pouco, ai se eu aumentasse as dimensoes do canvas só, ele esticava a minha imagem, e se eu diminuir o tamanho dela a imagem piora mais testei com a imagem recortada, e deu no mesmo resultado
Como a imagem é
Como o canvas deixa a imagem
S
Solucao aceita
1 like
Consegui resolver pelo visto, eu fiz o seguinte que foi a unica forma de trazer a qualidade normal da imagem:
var stylew = window.getComputedStyle(canvas).width;
var valor = parseInt(stylew.substr(0,stylew.search("px")));
canvas.width = valor;
fiz isso para a largura (width) e para a altura(height) e funcionou, parece que o canvas ele tem uma dimensão default de 300x150, pra quando não definirem o tamanho do canvas, ele usa esse valor, o ruim é que quando vc dimensiona o canvas pelo CSS ele apenas puxa os pixels de forma bem ruim, que acaba perdendo a qualidade da imagem, é como se ele trabalhasse com 2 dimensões ao mesmo tempo, uma que é do CSS e outra que é a dele padrão que não muda no CSS, só dessa forma que eu conseguir.
Obg a todos que tentaram me ajudar e para aqueles que tem tido este problema tbm, ai está a solução.
Criado 16 de janeiro de 2019
Ultima resposta 17 de jan. de 2019
Respostas 3
Participantes 2