Загрузите SVG как PNG, когда devicePixelRatio! == 1

Question

Я хочу отобразить SVG в PNG.

Я делаю это, записывая SVG на холст и загружая холст как PNG.

При выполнении этого на устройстве сRetina Display и DevicePixelRatio! == 1 это приводит к размытому изображению.

При рендеринге на экран это легко исправить, увеличив масштаб холста с помощью атрибутов и затем уменьшив холст с помощью CSS.

canvas.width = width * scale;
canvas.style.width = width;

Однако я хочу загрузить холст в формате PNG с правильным разрешением и размером, и все, что я могу сделать, - это загрузить PNG, который в два раза больше предполагаемого размера, но не размытый при уменьшении, или PNG, которыйправильный размер, но размытый.

Эта Fiddle показывает проблему, обратите внимание, что вам нужно быть на машине с devicePixelRatio! == 1 (например, MacBook Pro или iMac).

Answer 1

Я нашел исправление.

Изображение просто размытое, потому что это растровое изображение, отображаемое на экране с 4 физическими пикселями на каждый 1 пиксель изображения.Вот почему вам нужно увеличить холст в 4 раза (2 х 2), а затем уменьшить его.Только тогда холст будет содержать пиксель для каждого физического пикселя.

Но тогда загрузка этого холста, конечно, приведет к тому, что изображение будет в два раза шире и в два раза выше.Это ожидаемый результат!

Мой вопрос возник из моей уверенности в том, что правильный размер изображения может выглядеть таким пиксельным.