HTML 5 canvas toDataURL изменил необработанные данные

Question

HTML 5 canvas toDataURL изменил необработанные данные

1

Я использую canvas для рисования только изображения, но значение toDataURL() отличается от необработанных данных, даже если холст не изменился. код как удар:

<html>
<head>
    <title>For test</title>
    <script type="text/javascript">

        window.onload = function() {
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            var img = document.getElementById("scream");
            img.crossOrigin = 'Anonymous';
            ctx.drawImage(img, 0, 0);

            console.log(c.toDataURL().length);
            console.log("data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAAzCAIAAAC43dc6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABPSURBVGhD7dOhAQAgDMAw/n96GCyqZiK5oKZndtPX6Gv0NfoafY2+Rl+jr9HXrO8D/t4nW+lr9DX6Gn2NvkZfo6/R1+hr9DX6Gn3N7r6ZCxmTdxPs4RLCAAAAAElFTkSuQmCC".length);

        }

    </script>
</head>
<body>

<p>Image to use:</p>
<img id="scream" src="data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAAzCAIAAAC43dc6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABPSURBVGhD7dOhAQAgDMAw/n96GCyqZiK5oKZndtPX6Gv0NfoafY2+Rl+jr9HXrO8D/t4nW+lr9DX6Gn2NvkZfo6/R1+hr9DX6Gn3N7r6ZCxmTdxPs4RLCAAAAAElFTkSuQmCC" /><p>
<p>Canvas:</p>
<canvas id="myCanvas" width="53" height="51"></canvas>
</body>

user1737352 23 окт. 2017, в 10:44

Источник

Теги:

javascript

base64

html5

html5-canvas

todataurl

1 ответ

Ещё вопросы

dandavis · Answer 1 · 2017-10-23T06-48-00.000Z

Просто: вы повторно применяете сжатие jpeg, которое является процессом с потерями. Если ваше оригинальное изображение не появилось с одного компьютера, практически невозможно, чтобы они точно соответствовали друг другу. Даже если вы использовали то же самое, вы должны соответствовать коэффициенту качества, чтобы получить соответствие повторного кодирования. Я даже не вижу, чтобы качество указывалось в коде (в качестве аргумента toDataURL()).

Даже если вы использовали все те же настройки, в этих кодах есть небольшое количество вуду, а изменение разрешения устройства, масштабирование, обновление шрифтов или увязший CPU могут (потенциально) влиять на выход из-за динамического характера макет холста. Приложения, такие как photoshop, гораздо более воспроизводимы, чем браузеры.