работа с сжатием изображений.
Здраствуйте. Работаю с canvas'ом. Суть вот в чем. Подключаю к нему изображение:
<img src="/static/img/bg.png" id="bg" width="64" height="64" style="image-rendering: pixelated;">
так подключаю:
context.drawImage(img, -this.real_x, -this.real_y, 512,512);
Но дело в том, что отрисовывается на канвасе изображение без image-rendering: pixelated; Как решить проблему? вообще суть в том, что я хочу пиксель арт на канвасе разместить, но он размывается, может тут как то по другому вообще делать и исправлять надо? заранее благодарен за помощь |
NoobFindAnswer,
https://developer.mozilla.org/en-US/...oothingQuality |
canvas imageSmoothingQuality
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<canvas id="canvas" width="700" height="300"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let img = new Image();
img.src = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/pixel-girl-head.png';
img.onload = function() {
ctx.drawImage(img, 0, 0, 300, 200);
ctx.mozImageSmoothingEnabled = false;
ctx.imageSmoothingQuality = 'high';
ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;
ctx.drawImage(img, 350, 0, 300, 200);
};
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 09:44. |