Canvas. Качество картинки при сохранении.
 

Привет, парни.

Канвасу задаю небольшие размеры по типу 50 на 50 допустим и растягиваю в CSS, чтобы получить большие пиксели. CSS свойство image-rendering: pixelated убирает размытие, которое появляется из-за того что канвас растянут.

Уже 3 недели делаю свою пиксельную рисовалку для анимации и вообще не подумал как я буду сохранять потом всё это. И сегодня столкнулся с проблемой то что метод canvas.toDataURL() по сути сохраняет картинку просто в пикселях, которые соответственно равны заданному размеру канваса, то бишь 50 ширина и 50 высота сохранённой картинки. Соответственно понимаете что будет, если её растянуть - то же мыло что и было бы на канвасе без image-rendering: pixelated.

Думал обмануть систему и выиграть так в производительности: много слоёв, кадров, которые будут постоянно сохраняются и рендерятся , там на один массив Uint8ClampedArray имеет over 10k значений. И кароче знатно я объ... походу:cray:

Есть какие-то способы сохранить картинку с нормальным разрешением?

Если нет, то придётся перелапачивать всё алгоритмы инструментов, подстраивание размеров канваса под родителя и возможно сохранения слоёв делать через toDataURL() т.к он как понял более производительный. Кароче жопа-па))Хэлп:help:

Ну конкретно на сохранении делаешь отдельный canvas нужного размера, из первого получаешь ImageData, дублируешь пиксели, кладёшь во второй, toDataURL(лучше toBlob).
Это если хочется гарантии.

В принципе можно пропустить шаг с ImageData и дублированием пикселей и просто отключить imageSmoothingEnabled перед отрисовкой:

<canvas id="drawingCanvas" width="20" height="20"></canvas>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
var image = new Image();
image.onload = function () {
  drawingCanvas.width = image.width;
  drawingCanvas.height = image.height;
  drawingCanvas.getContext('2d').drawImage(image, 0, 0);
  
  var width = drawingCanvas.width * 7;
  var height = drawingCanvas.height * 7;
  
  canvas.width = width;
  canvas.height = height;
  
  var ctx = canvas.getContext('2d');
  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(drawingCanvas, 0, 0,  width,  height);
}
image.src = "https://javascript.ru/forum/images/smilies/tongue.gif";
</script>

Но imageSmoothingEnabled - больно мутное свойство.

Спасибо, вставил на codeopen, вижу что пример рабочий, но применяю это в своём коде и нифига не отображается))Ладно буду копать в чем причина)

Что-то типа)) Я уже выкачивал код с этого сайта, там 15к строк кода одним файлом, пока я разберу что там к чему, можно самому всё написать)