CSSフィルターと混合モードで処理された画像をアップロードおよびダウンロードするにはどうすればよいですか？

1.CSSフィルターとブレンディングモードを使用したオンラインPS

CSSフィルターとブレンディングモードを使用すると、さまざまな画像処理効果を実現できます。たとえば、CSSgramプロジェクトには、多くの画像処理効果が組み込まれています。その一部を次のサムネイルに示します。

画像処理効果図

ここをクリックしてください：CSSgramの画像処理デモ

デモページに入るには、ここのボタンをクリックしてローカルマテリアルを変更し、対応する画像効果を表示することもできます。

ローカル画像プレビューを使用する

レンダリング効果は良いですが、別の問題もあります。視覚的には処理された画像ですが、右クリックして名前を付けて保存すると、元の画像のままであることがわかります。

処理後に特定の画像に大きな効果があるとユーザーが感じ、それを自分のマシンに保存したい場合、それらの画像はブロックされます。

つまり、CSSフィルターとブレンディングモードに基づいた画像処理ツールを作成しました。最後に、これらの処理済み画像を背景にアップロードして、独立した<img>要素として使用する必要があります。これもブロックされます。

実行する方法？このような優れた機能を放棄し、キャンバスを使用して画像を処理しますか？

いいえ、実際にはCSS処理後に画像を取得する方法があります。

2つ、SVGのforeignObject要素とビジュアルストレージ

SVGには<foreignObject>要素があり、SVG内にXHTML要素を埋め込むことができます。次に例を示します。

<svg xmlns = "http://www.w3.org/2000/svg"> 
  <foreignObject width = "120" height = "50"> 
      <body xmlns = "http://www.w3.org/1999/ xhtml "> 
        <p>文字。</ p> 
      </ body> 
    </ ForeignObject> 
</ svg>

そして、SVGは本質的に画像です。つまり、画像処理に関連するHTMLコードとCSSコードを<foreignObject>要素に配置し、それを<img>画像としてレンダリングしてから、キャンバスに描画するだけで済みます。ビットマップ画像が作成された後、純粋な処理を取得できます。

見ることは信じています、あなたはここをクリックすることができます：SVGforeignObjectはブレンドモードによって処理されたCSSフィルターと画像デモを保存します

デモページの最後の画像はCSS処理後の画像と同じように見えますが、本質が異なります。1つは元の画像（右クリックして名前を付けて保存）で、もう1つは基本的に合成画像（右クリックして保存）です。クリック-名前を付けて保存）、次のようにスクリーンショットは次のとおりです。

処理後の画像

したがって、次に、マシンにダウンロードするか、サーバーにアップロードするかは問題ではありません。

純粋なフロントエンドのダウンロード画像については、前回の記事のパート3 「JSフロントエンドでhtmlまたはjsonファイルを作成してダウンロードする」を参照してください。

アップロードに関しては、画像canvas.toDataURL（）のbase64データ、または転送可能なcanvas.toBlob()Blobデータを転送できます。

//キャンバスをblobに
変換し、canvas.toBlob（function（blob）{ 
    //画像ajaxアップロード
    var xhr = new XMLHttpRequest（）; 
    //ファイルのアップロードが成功しました
    xhr.onload = function（）{ 
         // xhr.responseText just戻り値数データ
    }; 
    //アップロードを開始
    xhr.open（ "POST"、 'upload.php'、true）; 
    xhr.send（blob）;     
}、 'image / jpeg'）;

3.プロジェクトでどのように使用すればよいですか？

上記のデモページでcssRenderImage2PureImage()、次のコード構造のようなCSS画像処理結果を画像に変換できるというメソッドを作成しました。

<div id = "input" class = "clarendon-filter"> 
    <img src = "./ example.jpg"> 
</ div>

.clarendon-filter { 
    filter：contrast（1.2）saturate（1.35）; 
    表示：インラインブロック; 
    位置：相対; 
} 
.clarendon-filter :: before { 
    content： ''; 
    表示ブロック; 
    高さ：100％; 
    幅：100％; 
    上：0; 左：0; 
    位置：絶対; 
    背景：rgba（127,187,227、.2）; 
    ミックスブレンドモード：オーバーレイ; 
    ポインタイベント：なし; 
}

cssRenderImage2PureImage()メソッド構文：

cssRenderImage2PureImage（dom、callback）;

その中で：

判定

必要なパラメーター。DOMオブジェクト。

折り返し電話

オプションのパラメータ。関数。コールバックメソッドは、合成された画像のbase64情報である1つのパラメーターをサポートします。

例：

cssRenderImage2PureImage（input、function（url）{ 
    // urlは合成された画像のbase64アドレスです// URL
    に対して好きなことを行うことができます... 
}）;

4、その他の説明と結論

cssRenderImage2PureImageメソッドは高度にカスタマイズされています。CSSフィルターによって処理されるDOM構造が異なる場合は、プロジェクトのシナリオに応じてcssRenderImage2PureImageメソッドのコードを調整する必要があります。
<foreignObject>要素は、よく知られているhtml2canvasツールの中核です。通常、一部の小さな部分的なスクリーンショット関数は、自分で直接処理できるため、より効率的で柔軟性があります。SVGの<foreignObject>要素については、以前に「SVG <foreignObject>とスクリーンショットなどのアプリケーションの概要」という記事を書きました。実装の原則について詳しく知りたい方はこちらをご覧ください。
このテクノロジーを実現するには、Chromeブラウザでプレイしてください。

この記事で提供されるソリューションとアプリケーションシナリオには、CSSフィルターとブレンディングモード、SVG <foreignObject>要素、Canvas画像の描画と処理のスキルが含まれます。幸いなことに、これら3つの領域は、私が学習に重点を置いている領域です。1つ欠けている領域があると、解決策を簡単に把握することはできません。

私たちが学ばなければならないのは、人気があるかどうかではなく、興味のある分野に関連しているかどうかです。SVGとCanvasは実際にはニッチな分野ですが、どちらもグラフィックスのパフォーマンスに密接に関連しています。 SVG <foreignObject>要素はめったに使用されないSVG要素ですが、ここで輝かせることが技術的実現の鍵です。セクション。

さて、ここで停止します。

要するに、この記事があなたのプロジェクトのニーズを解決できることを願っています。