Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.12.2018, 22:19
Интересующийся
Отправить личное сообщение для NoobFindAnswer Посмотреть профиль Найти все сообщения от NoobFindAnswer
 
Регистрация: 25.07.2018
Сообщений: 13

работа с сжатием изображений.
Здраствуйте. Работаю с 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;
Как решить проблему? вообще суть в том, что я хочу пиксель арт на канвасе разместить, но он размывается, может тут как то по другому вообще делать и исправлять надо? заранее благодарен за помощь
Ответить с цитированием
  #2 (permalink)  
Старый 04.12.2018, 22:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

NoobFindAnswer,
https://developer.mozilla.org/en-US/...oothingQuality
Ответить с цитированием
  #3 (permalink)  
Старый 04.12.2018, 23:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
DLE загрузка изображений через дополнительное поле armn555 Элементы интерфейса 0 18.08.2017 11:08
Ajax. Как сделать загрузку изображений, отображение, удаление как на Авито wowtschuk AJAX и COMET 1 07.03.2017 01:34
Запись выбора изображений и отправка ссылки на почту Alekseyideas Элементы интерфейса 20 19.10.2016 14:33
jquery-gp-gallery.js - разное отображение подгружаемых изображений frutality jQuery 1 09.09.2012 18:15
Прокрутка изображений gen552 Элементы интерфейса 6 01.04.2011 13:11