1

次のコードを使用して、キャンバスに base64 イメージを描画しています。PHP のクエリから base64 文字列を取得します。globalAlpha を使用すると、画像全体のアルファを 0 に設定できます。フォームでランダムなピクセルのアルファを操作する必要があります。したがって、フォームで 7 を送信すると、アルファ 0 から 255 までの 7 つのランダムなピクセルを設定する必要があります。

この画像のアルファを操作してからキャンバスに描画することはできますか? 元の画像を秘密にしておくことは非常に重要です。

var complex = "<?php echo str_replace("\n", "", $DBimage); ?>";
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var image = new Image();
image.src = "data:image/png;base64," + complex;
image.onload= function(){
ctx.drawImage(image, 0, 0);
}
4

2 に答える 2

0

「秘密を守る」とはどういう意味かわかりませんが、次のような意味だと思います。

  1. 一度に数ピクセルしか表示しない
  2. 人々がソースを表示して画像を発見できないようにする（JavaScriptを少し使用して）

それらが唯一の要件である場合（そしてそれらが要件である場合）、次のことを行う必要があります。

  1. サーバー上の画像をデコードします
  2. サーバー上のいくつかのランダムなピクセルを選択し、それらのピクセルのデータ（RGB値）をクライアントに送信します
  3. キャンバスを使用して、受信したいくつかのピクセルを表示します

このアプローチの良いところは、ImageDataをまったく使用する必要がないことです。受信した各ピクセルのRGB値の1つだけfillRectを使用できます。fillStyle

このアプローチのあまり良くないことは、サーバー上でさらに多くの作業を行う必要があることを意味しますが、イメージをクライアントから完全に非表示にする場合は、それが唯一の方法です。

于 2012-11-26T06:15:40.670 に答える
0 
<canvas id="rectangle" width="300" height="300" style="border:solid black 1px; </canvas>
​

JavaScript

var canvas = document.getElementById('rectangle');
//replace this rectangle drawing by your image
if (canvas.getContext) {
    var context = canvas.getContext('2d');

    context.fillStyle = "rgb(150,29,28)";
    context.fillRect(10, 10, 280, 280);
}

var imgd = context.getImageData(0, 0, canvas.width, canvas.height);
var numberOfAlphaPix = 10000; //this is the number of pixel for which you want to change the alpha channel, I let you do the job to retrieve this number as you wish

//fill an array with numbers that we'll pop to get unique random values
var rand = [];

// Loop over each pixel with step of 4 to store only alpha channel in array ( R=0 ,G=1 , B=2, A=3 )
for (var i = 3; i < imgd.data.length; i += 4) {
    rand.push(i);
}

//shuffle the array
for (var i = rand.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var tmp = rand[i];
        rand[i] = rand[j];
        rand[j] = tmp;
}


for (var i = 0; i < numberOfAlphaPix; i++) {
    imgd.data[rand.pop()] = 255; //set alpha channel to 255
}

// Draw the ImageData object at the given (x,y) coordinates.
context.putImageData(imgd, 0, 0);​

ここで試してみてくださいhttp://jsfiddle.net/LuEzG/5/

于 2012-11-06T17:30:33.613 に答える