ホームページ > 記事 > ウェブフロントエンド > CSSフィルターとブレンドモードで処理された画像をアップロードおよびダウンロードするにはどうすればよいですか?

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

(*-*)浩オリジナル: 2019-09-03 11:05:373120ブラウズ

1. CSS フィルターとブレンドモードをオンラインで使用する PS (推奨学習: CSS ビデオチュートリアル )

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

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

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

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

効果表示されたものは良いですが、別の問題も生じます。視覚的には処理された画像のように見えますが、右クリックして画像を名前を付けて保存すると、まだ元の画像であることがわかります。

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

つまり、CSS フィルターとブレンドモードに基づいた画像処理ツールを作成しました。最後に、これらの処理済み画像を背景にアップロードし、独立した CSSフィルターとブレンドモードで処理された画像をアップロードおよびダウンロードするにはどうすればよいですか?

要素として使用する必要があります。妨げられる。＃＃＃＃＃＃何をするか？このような優れた機能を放棄し、画像処理に依然として Canvas を使用する必要があるのでしょうか?

その必要はありません。実際には、CSS 処理された画像を取得する方法があります。

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

SVGには要素があり、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 コードを要素に配置し、それを CSSフィルターとブレンドモードで処理された画像をアップロードおよびダウンロードするにはどうすればよいですか?

としてレンダリングするだけです。画像を取得し、それをキャンバスに描画すると、純粋に処理されたビットマップ画像を取得できます。

デモページの最後の画像と CSS 処理された画像は同じように見えますが、本質的には異なります。1 つはオリジナルの画像 (右クリックして名前を付けて保存してみてください)、もう 1 つは本質的に以下のスクリーンショットに示すように、合成画像 (右クリックして名前を付けて保存してください。 - 名前を付けて保存) を選択します。

それでは、次に、ローカルマシンやサーバーへのアップロードは問題ありません。 CSSフィルターとブレンドモードで処理された画像をアップロードおよびダウンロードするにはどうすればよいですか?

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

アップロードに関しては、画像canvas.toDataURL()のbase64データ、またはcanvas.toBlob()のBlobデータを転送することができます:

// canvas转为blob并上传canvas.toBlob(function (blob) {    // 图片ajax上传
    var xhr = new XMLHttpRequest();    // 文件上传成功
    xhr.onload = function() {
         // xhr.responseText就是返回的数据
    };    // 开始上传
    xhr.open("POST", &#39;upload.php&#39;, true);
    xhr.send(blob);    
}, &#39;image/jpeg&#39;);

3.画像をプロジェクトに追加しますか? で使用されますか?

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

<div id="input" class="clarendon-filter">
    <img  src="./example.jpg" alt="CSSフィルターとブレンドモードで処理された画像をアップロードおよびダウンロードするにはどうすればよいですか?" >
</div>

.clarendon-filter {
    filter: contrast(1.2) saturate(1.35);
    display: inline-block;
    position: relative;
}
.clarendon-filter::before {
    content: &#39;&#39;;
    display: block;
    height: 100%;
    width: 100%;
    top: 0; left: 0;
    position: absolute;
    background: rgba(127,187,227,.2);
    mix-blend-mode: overlay;
    pointer-events: none;
}

cssRenderImage2PureImage() メソッドの構文:

cssRenderImage2PureImage(dom, callback);

その中に:

dom にはパラメーターが必要です。 DOM オブジェクト。コールバックのオプションのパラメータ。関数。コールバックメソッドは、合成されたイメージの Base64 情報である 1 つのパラメーターをサポートします。

例:

cssRenderImage2PureImage(input, function (url) {    // url就是合成后的图片base64地址
    // 你可以对url做你任何你想做的事情……});

4. その他の手順と結論

cssRenderImage2PureImage メソッドは、CSS フィルターによって処理される DOM 構造が高度にカスタマイズされている場合に使用されます。異なるものです。プロジェクトのシナリオに従って cssRenderImage2PureImage メソッドのコードを調整する必要があります。

要素は、有名な html2canvas ツールの中核です。通常、いくつかの小さなローカルスクリーンショット関数の場合、わずか数行のコードで処理できるため、より効率的かつ柔軟です。

このテクノロジーを Chrome ブラウザで再生してください。

以上がCSSフィルターとブレンドモードで処理された画像をアップロードおよびダウンロードするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

json css chrome html xhtml JS function 对象 dom canvas

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSS 位置決め属性の詳細な紹介 (例付き)次の記事：CSS 位置決め属性の詳細な紹介 (例付き)

続きを見る