Размытое изображение на холсте - PullRequest
Новая
       11

Размытое изображение на холсте

0 голосов
/ 26 марта 2020

Рисование изображения на холсте делает его очень размытым. Но по мере увеличения изображения оно становится четким. Я не могу понять проблему.

изображение, которое я использую: https://images.unsplash.com/photo-1512819432727-dbcb57a06f13?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80

ссылка кодового адреса: https://codepen.io/AdnanHashmi/pen/eYNQPoX

Даже увеличение масштаба страницы показывает, что изображение, нарисованное на холсте, размыто и самодовольно.

Вот так это выглядит. Helo Левое изображение здесь - это изображение, нарисованное на холсте, в то время как правое изображение выводится на экран с помощью тега.

Мой код: 

const canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
var dpi = window.devicePixelRatio;
var img = new Image();
img.src =
  "https://images.unsplash.com/photo-1512819432727-dbcb57a06f13?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80";
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
canvas.style.width = canvas.width.toString() + "px";
canvas.style.height = canvas.height.toString() + "px";

img.onload = () => {
  var newWidth = canvas.width * dpi;
  var newHeight = canvas.height * dpi;

  canvas.style.width = newWidth.toString() + "px";
  canvas.style.height = newHeight.toString() + "px";

  ctx.drawImage(img, 100, 100, 100, 150);
};
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

canvas {
  image-rendering: pixelated;
}

img[src$=".gif"],
img[src$=".png"] {
  image-rendering: -moz-crisp-edges; /* Firefox */
  image-rendering: -o-crisp-edges; /* Opera */
  image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}

.sharp {
  position: absolute;
  top: 100px;
  left: 250px;
  width: 100px;
  height: 150px;
}
<canvas></canvas>
<img src="https://images.unsplash.com/photo-1512819432727-dbcb57a06f13?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="sharp" alt="" srcset="">
...