文章/答案/技术大牛

发布

社区首页 >问答首页 >HTML5 canvas toDataURL更改的原始数据

问HTML5 canvas toDataURL更改的原始数据
EN

Stack Overflow用户

提问于 2017-10-23 16:44:05

回答 1查看 245关注 0票数 1

我只使用canvas来绘制图像，但是toDataURL()值与原始数据不同，即使canvas没有改变。代码如blow：

<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>

javascript

html

html5-canvas

base64

todataurl

回答 1

Stack Overflow用户

发布于 2017-10-23 16:48:52

简单:您正在重新应用jpeg压缩，这是一个有损的过程。除非你的原始图像来自同一台计算机，否则它们几乎不可能完全匹配。即使您使用完全相同的算法，您也必须匹配质量因子才能获得重新编码匹配。我甚至看不到代码中指定的质量(作为argument to toDataURL())。

即使您使用所有相同的设置，这些编码器中也有一点巫毒，设备分辨率更改、缩放、字体更新或CPU停滞都可能(潜在地)影响输出，这是由于canvas布局的动态性质。像photoshop这样的应用程序比浏览器的可重复性强得多。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46885164

复制

相似问题

问HTML5 canvas toDataURL更改的原始数据
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5 canvas toDataURL更改的原始数据EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5 canvas toDataURL更改的原始数据
EN