работа с сжатием изображений.
Здраствуйте. Работаю с 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, время: 11:12. |