我仅使用画布绘制图像,但是即使画布未更改,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>
最佳答案
简单:您正在重新应用jpeg压缩,这是一个有损过程。除非您的原始图像来自同一台计算机,否则几乎不可能完全匹配。即使您使用完全相同的算法,也必须匹配质量因子才能重新编码匹配。我什至看不到代码中指定的质量(作为argument to toDataURL()
)。
即使您使用了所有相同的设置,这些编码器中也会有一些巫毒,并且由于分辨率的动态特性,设备分辨率的更改,缩放,字体更新或CPU停滞都可能(潜在地)影响输出。画布布局。 Photoshop之类的应用程序比浏览器具有更高的可重复性。