3

次の HTML 構造を想定しています。

<div id="image-blob" class="filter-wrapper">
    <img id="pic" src="">
</div>

要素などにCSS3フィルターを適用-webkit-filter: blur(1px) brightness(1.5) contrast(1.8) drop-shadow(black 16px 16px 20px) grayscale(0.2) hue-rotate(90deg) invert(0.1) saturate(3.6) sepia(0.3);してい<img>ます。

サーバー側のプロセス/プロキシを使用せずに、フィルターを使用してこのレンダリングされた画像をエンドユーザーがダウンロードするブロブに変換することは可能ですか?

注: クライアント側のダウンロードは FileSaver.js を使用して行われ、HTML2Canvasを使用してキャンバスに変換される可能性があります

編集：

さらなる調査により、これは不可能である可能性があり (この間違いが最も歓迎されることを証明します)、唯一の解決策は、キャンバス自体で JavaScript を介してこれらのフィルターを複製することである可能性があります。Pixel Manipulation TutorialまたはCamanJSなどのソリッド ライブラリ。

4

1 に答える 1

0

@NielsKeurentjes は、セキュリティ上の懸念から、ブラウザがほとんどの Web ページ コンテンツをローカルに保存できないようにしていることを正しく指摘しています。

ただし、キャンバスを使用して画像フィルターを実行することをお勧めします。

次に、キャンバスを画像に変換し、変更された画像を新しいブラウザー タブで開きます。

ユーザーに「右クリックして名前を付けて保存」するように指示すれば、問題ありません。

いくつかの理由から、この方法をお勧めします。

  • ユーザーは多くの場合、右クリックで名前を付けて保存する方法を認識しています (そして慣れています)。

  • JS を強制的にローカルに保存するハックを見つけたとしても、ブラウザーはそのハッキングをセキュリティ上の懸念事項と見なし、最終的にハッキングを禁止します。言うまでもなく、ハッキングはほとんどの場合、クロスブラウザーの悪夢です。

ところで：

CamanJS に加えて、Pixastic は別の優れた画像フィルター ライブラリです。

http://www.pixastic.com/lib/docs/

于 2013-07-16T17:28:51.830 に答える