問題タブ [image-masking]

開発中の新しい Web サイトで問題が発生しています。SVG を使用するのは初めてです。基本的に、要素の下に画像を表示するには、常にページの中央にある円を画像から切り取る必要があります。クリッピングを試してみましたが、すべてが素晴らしかったです。マスク コードでエラーが見つからないようです。これは、私がセットアップしたクイックフィドルへのリンクです。ありがとう！

白い枠線と黒い色で塗りつぶされた画像があります。実行時に黒色を別の色に変更したいだけです。ユーザーは実行時に HSB 形式で色を選択します。どうやってやるの？const float colorMasking[4]={255, 255, 255, 255};を使用して CGImageCreateWithMaskingColorsを試しました。 しかし、毎回 nil CGImageRefを取得しています。助けてください。

電球の画像を添付しています-黒で塗りつぶされ、白い枠線と透明な背景の電球

アップデート：

受け入れられた回答のコードを使用した後、黒色を別の色で塗りつぶすことができました。ただ、白枠に少し色が見えました。画像はそれほど鮮明ではありません。出力の添付:

いくつかの助けは素晴らしいでしょう！

ドメインABC1.comは、イメージ ABC1を示しています。ドメインABC2.comがマスキングを使用して ABC1.com に転送するときに、画像 ABC2が表示されるようにするにはどうすればよいですか?

基本的に、Web サイトは、元のドメイン名に基づいてブランドを変更する必要があります。

cssマスクの下に背景画像を表示するこのコードがあります。

そして、html

ここに私が達成したいことを示すjsbinがあります

http://jsbin.com/lunoxo/1/edit?html,css,output

Webkit および mozilla ブラウザーでは正常に動作しますが、IE 10 では正常に動作しません。そのブラウザーで動作させるにはどうすればよいですか?

tesseract-OCRエンジンを使用してテキストを抽出する前に、ImageMagickサービスを使用してレシート画像を前処理しています。領収書の背景を削除する必要があります。ここで境界線を削除するためにマスキングを行いました。しかし、領収書のマスクを作成できません。

ただし、レシート画像から影を取り除こうとしました。

初期画像（レシート例）

コードを適用した後:

以下のコードを試して、白を除くすべての色を黒にしましたが、これは photocopy.png の背景を完全に黒くしているようには見えません。

レシート画像の枠線を消す方法はありますか？または、画像から何らかの種類のマスクを作成しますか? 注：背景が異なる複数の画像のノイズと境界線を削除する必要があります。