gwt - GWT でのカラー フィルタリング

Question

Google Web Toolkit で画像のカラー フィルタリングを行う方法はありますか? アクション スクリプト 3 を使用したカラー マトリックス フィルターのようなものです。アクション スクリプトの例を次に示し ます。

Answer 1

HTML (したがって GWT) での画像操作には、canvas 要素を使用する必要があります。私の知る限り、キャンバスにはフィルターを適用するためのショートカットがありません。手動でピクセルにアクセスして変更する必要があります。例として白黒を使用してみましょう。このメソッドを呼び出す前に、画像が既に読み込まれていることを確認する必要があります。

public void toBlackAndWhite(Image image)
{
    // Create an off-screen canvas element to do the work.
    Canvas canvas = Canvas.createIfSupported();

    // Do nothing if canvas is not supported.
    if (canvas == null)
        return;

    // Size the canvas to fit the image.
    canvas.setCoordinateSpaceHeight(image.getHeight());
    canvas.setCoordinateSpaceWidth(image.getWidth());

    // Pull the image's underlying DOM element
    ImageElement img = ImageElement.as(image.getElement());

    // The 2D context does all the drawing work on the canvas
    Context2d context = canvas.getContext2d();

    context.drawImage(img, 0, 0); // Now the canvas contains the image.

    // ImageData represents the canvas rgba data as an array of bytes.
    ImageData imageData = context.getImageData(0, 0,
                              image.getWidth(), image.getHeight());

    // Now the real work:
    for (int x = 0; x < imageData.getWidth(); ++x) {
        for (int y = 0; y < imageData.getHeight(); ++y) {
             // RGB values are 0-255
             int average = (imageData.getRedAt(x,y) +
                            imageData.getGreenAt(x,y) +
                            imageData.getBlueAt(x,y)) / 3;

             imageData.setRedAt(average, x,y);
             imageData.setGreenAt(average, x,y);
             imageData.setBlueAt(average, x,y);
         }
    }

    // ImageData is a copy of the data on the canvas, so
    // we need to write it back.
    context.putImageData(imageData,0,0);

    // Now the canvas contains a black and white version
    // of the image. Canvas is a Widget so you could attach
    // it to the page directly if you want. Here we're going
    // to replace the contents of the original image element
    // with a url-encoded version of the canvas contents.
    image.setUrl(canvas.toDataUrl());
}

actionscript ほどエレガントではありませんが、十分に機能します。ご想像のとおり、これにより大きな画像ではかなりのプロセッサ時間が消費されます。より優れたパフォーマンスが必要な場合は、gwtglを検討してください。