1

こんにちは、html と javascript を使用してウィンドウ 8 アプリに取り組んでいます。APIから受信したいくつかのpng画像を表示する必要があり、APIから受信した色を設定する必要があります。私はたくさんグーグルで検索しましたが、解決策が見つかりませんでした。私はxamlで知っていますが、このように行うことができます

<Rectangle Fill="{Binding Path=widget.logo, Converter={StaticResource PSWidgetLogoColorConverter1}}" Height="60" Width="60">
                                        <Rectangle.OpacityMask>
                                            <ImageBrush ImageSource="{Binding Path=widget.logo,Converter={StaticResource PSWidgetImageConverter1}}"/>
                                        </Rectangle.OpacityMask>
                                    </Rectangle>

しかし、ここでそれを行う方法がわかりません。

あなたの貴重な提案は大歓迎です。

4

1 に答える 1

0

canvas要素内の色を変更する必要があると思います。

  1. canvas タグをアプリに追加します。

     <canvas id="myCanvas" />

  2. キャンバス内に画像をロードします。

    var myImage = new Image();
canvas = document.getElementById("myCanvas");

if (canvas.getContext) {
  ctx = canvas.getContext("2d");
  myImage.onload = function() {
    ctx.drawImage(myImage, 0, 0);
  }
  myImage.src = "kestral.png";
}

  3. 画像データを取得し、必要に応じて変更します。

getImageDataキャンバス内の x、y、幅、高さの位置にあるすべての rgba 値を返します。つまり、次のとおりgetImageData(x,y,width,height)です。その結果、次のサイズの配列が得られます: width*height*4 その後、それをループして、すべての rgba カラーを変更できます。

    myImage = ctx.getImageData(0, 0, 200, 200);
    var picLength = 200*200;

    // Loop through data.
    for (var i = 0; i < picLength * 4; i += 4) {
      // First bytes are red bytes.        
      // Second bytes are green bytes.
      // Third bytes are blue bytes.
      // Fourth bytes are alpha bytes
      //check for full alpha
      if(myImage.data[i+3] == 255) {
         //change it to black
         myImage.data[i]=0;
         myImage.data[i+1]=0;
         myImage.data[i+2]=0;
         myImage.data[i+3]=0;
      }
    }

  1. 変更した画像データを戻す

    ctx.putImageData(myImage, 0, 0);

msdnの良い完全な例を次に示します。

于 2013-09-01T18:53:06.820 に答える