19

CSS3 フィルター効果 (彩度、セピア、コントラストなど) を使用する単純な画像エディターを作成するためのツールを使用しています。

画像エディタを作るのは簡単ですが、フィルターを適用した画像を保存またはエクスポートできるかどうかは非常に難しいようです.

私はもともと@niklasvh の html2canvasでそれが可能になることを大いに期待していました。残念ながら、フィルター効果はおろか、ほとんどの CSS3 プロパティをキャプチャできません。

誰かが解決策を持っているか、悲しいことにこれが不可能であるという決定的な知識を持っているなら、それは大歓迎です! ありがとう！

4

2 に答える 2

6

私が知っていることですが、CSS を HTML5 canvas 要素のグラフィックスに適用することはできません (DOM の一部ではないため)。

しかし、それは大丈夫です！基本的なフィルター効果は比較的簡単に実行でき、数行の JavaScript で画像として保存できます。

キャンバスにセピアのような効果を適用して画像として保存する方法について説明している良い記事を見つけました。それをコピーするのではなく、記事からより大きなポイントを強調します。

キャンバス イメージの変更: 

var canvas = document.getElementById('canvasElementId'),
    context = canvas.getContext('2d');

var imageData = context.getImageData(0, 0, canvas.width, canvas.height);

for (var i = 0; i < imageData.data.length; i+=4) {
    ...
}

一部のキャンバス API にアクセスするには、上記の JavaScript を使用してキャンバスで 2D コンテキストを有効にする必要があります。MDN には、context objectで利用できる API に関する優れたドキュメントがいくつかありますが、ここで注意すべき重要な部分はgetImageData()呼び出しです。基本的に、定義した領域内のすべてのピクセル値を取得します (上の例では、画像全体を取得しています)。次に、このデータを使用して、すべてのピクセルを反復処理し、必要に応じて変更できます。セピアの記事では、明らかにいくつかの興味深い調整を行っていますが、必要に応じてグレースケール、ぼかし、またはその他の変更を行うこともできます。Github には、そのための素晴らしいキャンバス フィルター ライブラリがあります。

キャンバス画像の保存方法:

var canvas = document.getElementById('canvasElementId'),
    image = document.createElement("img");

image.src = canvas.toDataURL('image/jpeg');

document.body.appendChild(image);

上記のスクリプトは、キャンバスを選択し (描画が既に完了していると仮定します)、画像要素を作成します。toDataURL()イメージ要素にソースを設定するために使用できる URL を生成するために使用します。上記の例では、イメージ要素がドキュメント本文に追加されます。詳細については、MDN のキャンバス ページを参照してください。

于 2013-06-15T23:07:22.110 に答える