私は2つの画像を持っています 1.元の画像 2.マスク画像

元の画像をマスク画像でマスクしたいのですが、以下のコードを使用して行います。

ただし、この方法で元の画像よりも画像をマスキングすると、マスク形状でサイズが変更されます

私の要件は

元画像のズーム、移動、ジェスチャによる回転

マスキングしたい後

元の画像のサイズを変更せずにマスクする場合（変更されているか変更されていない場合）、マスクの形状とその他の透明部分のトリミングのみを配置します。

画像の色部分のみをマスクしたい他の部分は透明になるため、マスク画像の色付き部分のみを含む元の画像と他の部分はトリミングされず、元の画像がズームされた部分よりもズームされると、元の画像ではなくマスクで覆われます。

レイヤーブレンディングとマスキングを使用して、製品が配置された写真と製品が配置されていない写真を背景参照画像として使用して、背景（透明）を無効にすることは可能ですか。

画像が違うところだけを明らかにするレイヤーマスクのように。(製品と影)

前もって感謝します。

div がボトルをスクロールし、ラベルが回転しているように見えると、div 内にラベルが自動的に前後にスクロールするボトルを作成しました。以下は、JSFiddle のコードを含むデモです。

https://jsfiddle.net/pkfxqmLs/

divがスクロールしてラベルを移動するときにボトルが静止しているように見えるようにするにはどうすればよいですか?

HTML と CSS を使用して、次のようにクリップおよびマスクされた画像を含む div を作成するにはどうすればよいですか。

私はこれを約2時間行う方法を見つけようとしてきましたが、どこにも行かなかったので、誰かが私を正しい方向に向けることができることを望んでいました. ここで具体的に言うと、上の 2 つの角が丸くなるように画像をクリップし、4 つの角が丸く、下に 1/4 のパディングがある div 要素に埋め込み、両方の要素が右端に見えるように変換します。左より視聴者から離れています。

Tシャツの画像は2枚あり、色は黒とピンクです。Androidのロゴとブレンドしたい。黒いTシャツの結果は素晴らしかった。しかし、ピンクのものでは、アンドロイドの画像が明るすぎます。

これが私のコードです

これが結果です

どうすれば黒いTシャツのようなアンドロイド画像を作ることができますか。どのコードを変更する必要がありますか?

fabric jsを使用して2つの画像をマスクすることは可能ですか?

例: 私は色付きの形 (ハート) を持っています。別の画像があり、その新しい画像がハートとしてのみ表示されるように、ハートの上にマスクしたいと思います。2 番目にアップロードされた画像を移動し、サイズを変更して、そのハートの目的の領域を取得できます。

どちらの画像もユーザーがアップロードした画像であり、こちらの jsfiddle の例のようにファブリックを使用して作成され、画像をドラッグしてサイズ変更する長方形や正方形ではありません。

http://jsfiddle.net/Jagi/efmbrm4v/1/

まさにこれが必要ですが、2 つのカスタム イメージ (ユーザーがアップロードしたイメージ) が必要です。

シンプルですよね？この svg を html ファイルにドロップすると、マスキングは完全に機能します。しかし、仮想 dom で同じ svg を生成すると、マスクは効果がなく、巨大な赤い四角形が表示されます。

<defs></defs>迷惑なことに、開発者ツールを開いてsvgに無意味なものを追加すると、生成時に表示することができます。それはどういうわけかsvgを蹴り、マスクする必要があることを思い出させるようです。

ここで何が起こっているか知っている人はいますか？empty を注入するようにタイマーを設定する必要のない回避策はありますdefsか?

アップデート：

ここにソースがあります

ここにいくつかの関連するインポートがあります

アップデート

コメントの助けを借りてそれを理解しました。node対でしSvg.nodeた。に変更したらSvg.node、問題はなくなりました。質問は:

1. なぜこれが修正されたのですか？
2. これを重要なものにしている、ここの裏で何が起こっているのでしょうか?
3. 私が経験した問題がコンパイル時のエラーになるように、これをタイプセーフにすることはできますか?

サンプルコードを見つけたので、プラグインするだけでいいと思いましたが、Meteor は初めてで、単純な単純な間違いを犯しているだけだと思います。jquery はすでに Meteor に含まれており、「クライアント」コード セクションで $ または document.getElementById を使用すると機能すると思いましたが、後者の場合は null を取得し、前者の場合は $ が定義されていません。 (

この投稿では、コードをできるだけ簡潔にしようとしました。

私のプロジェクトでのマスキングの JavaScript コードは次のとおりです。

関連するcssコードは次のとおりです。

html コード:

更新Salman の Template.applicationLayout.onRendered() 関数を使用してから anomepani javascript dom セレクター コードを使用し、キャンバス オブジェクトに id="canvas" を追加することで、これを機能させることができました。ご協力ありがとうございます。両方を回答としてマークできればと思います。