1

JPEG画像の全白（R：255、G：255、B：255）領域をマスクしたいので、ブラウザで表示すると、全白領域の下にあるものが表示されます（これらの領域は透明になります） 。これを実現するために機能するものは何でも、JQuery、CSS 3、Canvasを使用してもかまいません。ありがとう

OK、コード：

<body style="background-color:red;">
  <canvas id="myCanvas" width="228" height="454"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var x = 0;
        var y = 0;
        var width = 228;
        var height = 454;
        var imageObj = new Image();

        imageObj.onload = function () 
        {
            context.drawImage(imageObj, x, y, width, height);

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

            var imgData = ctx.getImageData(0, 0, width, height);
            var pixels = imgData.data; // get pixel data

            for (var i = 0; i < pixels.length; i +=4)
            {
                var r = pixels[i ];
                var g = pixels[i + 1]
                var b = pixels[i  + 2];

                if (r === 255 && g === 255 && b === 255) {
                    pixels[i + 3] = 1;
                }   
            }

            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.putImageData(imgData, 0, 0);
        };
        imageObj.src = 'img/test_image.jpg';
    </script>
  </body>

このコードはうまくいくようですが、真っ白な領域に白い点が散らばっています。

4

4 に答える 4

2

あなたのコードはかなり正しいように見えますが、次の変更をお勧めします。

キャンバスのサイズを 228x454 に設定しましたが、イメージのサイズがわずかに異なる場合、ソース イメージをキャンバスに描画するときに、誤ってソース イメージをスケーリングしてしまう可能性があります。したがって、キャンバスを正確に画像サイズにスケーリングします。

imageObj.onload=function(){
canvas.width=imageObj.width;   // be sure canvas is *exactly* image sized to prevent 
canvas.height=imageObj.height; // accidental scaling which might skew pixel colors

「透過」ピクセルを 1 に設定すると、完全な透過性を得るためにピクセルを 0 に設定する必要があります。

pixels[i+3]=0;      // 0 instead of 1 for pure transparency

真っ白な rgb(255,255,255) のみをマスキングしています。画像内の一部のピクセルが「ほぼ」白である可能性があるため、一部の白に近いピクセルもマスキングしてみてください。

var nearWhite=250;  // try experimenting with different “near white” values
if(r>nearWhite && g>nearWhite && b>nearWhite)

[編集済み: 完全なコードを提供するため]

これがコードです（私のコンピューターで動作します）。

画像ソースがローカル ドメインにあることを確認してください。そうしないと、セキュリティ違反が発生し、画像は描画されますが、白いピクセルは透明になりません。だからhttp://otherDomain.com/picture.jpgじゃない！

<!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: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var imageObj = new Image();
    imageObj.onload = function () {

        canvas.width=imageObj.width;
        canvas.height=imageObj.height;
        ctx.drawImage(imageObj, 0,0);

        var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        var pixels = imgData.data; // get pixel data
        for (var i = 0; i < pixels.length; i +=4)
        {
            var r = pixels[i ];
            var g = pixels[i + 1]
            var b = pixels[i  + 2];

            if (r>250 && g>250 && b>250) {
                pixels[i + 3] = 0;
                count++;
            }   
        }
        ctx.putImageData(imgData, 0, 0);
    }
    imageObj.src="car.jpg";

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

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
于 2013-03-07T19:59:21.323 に答える
1

おそらくキャンバスを作成し、ピクセル値に画像の対応する値を入力します。ピクセルが白の場合rgb(255,255,255)、アルファを 1 に設定します。これが可能かどうかはわかりませんが、単なるアイデアです。

ピクセル操作のチュートリアル

于 2013-03-07T12:24:06.507 に答える
-2

知っている限り、JPEGには透明性のオプションがありません。PNGを使用するか、仮想透明コンテンツを下から入力する必要があります

于 2013-03-07T12:21:50.900 に答える