Question

canvas vs. element

编辑： D'OH！这个问题的主体大部分都是无关紧要的，因为我发现了我的愚蠢错误，就是我的画布在计时器上重新绘制了我没有在平局之间清理画布。这会使任何半透明区域变暗至完全不透明。

正在做：

mainContext.clearRect ( 0 , 0 , 320 , 480 );

在每次抽奖之前

。

仍然存在的一个小谜团是这样一个问题：为什么多次拍摄一个物体本身也会使图像中完全不透明的区域变暗/饱和。

编辑：我添加了一张图片。底部区域显示加载到元素中的图像（看起来图像在我的绘图程序中看起来如何）。（img可以下载here。为了使下面的屏幕截图更合适，我确实调整了它的大小，但是我得到了与原始下载图像不变的相同结果。）顶部框架框是画布，使用来自同一元素的drawImage（）。我不确定“减少颜色深度”是否是正确的描述。看起来它正在改变颜色 - 你可以看到在画布中颜色更加饱和。此外，它还没有正确处理alpha。我之前所描述的“绑带”我现在意识到主要发生在原始图像中具有更高透明度的区域。

编辑：已取得进展。

我看到如果我将完全不透明的背景图像绘制到画布中，那么当我在其上绘制透明度的图像时，它会获得正确的alpha值。

我尝试绘制一个填充了颜色的矩形作为背景，但是在绘制图像时仍然存在透明度问题。似乎有必要在下面绘制不透明的图像。

这听起来很熟悉吗？

我还是不明白为什么图片颜色在画布内更加饱和。也许这是一个伽马校正的东西，类似于Mac和PC之间的颜色差异？

我有一个非常简单的页面，只有一个canvas元素。我加载了一个32位的.png文件。我以两种方式加载文件，一次是通过创建一个新的Image（）对象并设置其src，一次是通过创建一个具有相同源的元素。

页面上的元素显示我的图像具有正确的颜色，很好的alpha圆角，等等。

但是当我将图像绘制到画布上时，它似乎失去了颜色深度。特别是它似乎从32 bpp图像减少到8 bpp图像（使用一些默认调色板）。我在渐变区域看到强烈的条带，并且alpha通道丢失，如原始图像中光滑的角落的块状像素化所示。

我在Chrome和Firefox（两个最新版本）中都获得了相同的结果。

我用

将图像放到画布上

context.drawImage( theImage, 0, 0 );

对于上面代码中的theImage，我已经尝试了Image()对象和<img>元素（已在页面上其他位置显示图像的良好版本的元素））。在这两种情况下，我得到相同的结果 - 图像似乎已减少到8 bpp。

我的画布设置为：

<canvas class="MainCanvas" width="320" height="480"></canvas>

正如我所说，我的图像是使用Image（）类加载的：

    var image = new Image();
    image.src = "images/myimage.png";

和一个作为元素：

    <img class="OtherImage" src="images/myimage.png" />

这就是整个事情。

图像在<img>元素中很好地显示的事实似乎表明问题不在于图像或图像的加载，而在于drawImage()调用或画布本身

我想知道我的画布或它的上下文是否可以设置为这种缩小的颜色深度模式，但我找不到任何关于这样的设置。

（我确实发现为了防止画布在图像上进行令人困惑的自动缩放，必须使用上面的“width”和“height”属性来设置画布大小，而不是在css中。我是希望修复这个颜色深度问题是一个类似的问题，我一直无法找到......）

Answer 1

以下是您的更多数据......

我无法在Win7 +中重现您的颜色问题（IE10 | FF21 | Chrome27）

enter image description here

关于html画布的注释：

画布的自然背景是透明的。因此，当您在画布上绘制半透明图像时，必须尝试在半透明区域中对着下面的任何内容（身体背景？）进行颜色混合。

当您绘制不透明图像+半透明图像时，您将使半透明像素饱和，并且还会从不透明图像的背景中添加像素颜色。我认为这会导致颜色失真而不是修复它。好奇？

在绘制半透明图像之前用不透明（白色？）矩形填充画布将有助于控制图像混色的背景。

无论如何，希望这有助于发现你的图像有什么问题！：）

这是代码和小提琴：http://jsfiddle.net/m1erickson/KpAyq/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: white; padding:10px; }
    canvas{border:1px solid red;}
    img{border:1px solid blue;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var image=document.createElement("img");
    image.onload=function(){
    ctx.drawImage(image,0,0);
    }
    image.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/molecule1.png";

}); // end $(function(){});
</script>

</head>

<body>
    <p>Left==canvas,  Right==img</p>
    <canvas id="canvas" width=256 height=275></canvas>
    <img src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/molecule1.png" width=256 height=275>
</body>
</html>

画布上的drawImage（）使颜色饱和并混淆了alpha

1 个答案: