7

私は現在、canvasとJavascriptでの画像操作に取り組んでいます。私はそれにfabric.jsを使用しています。ユーザーに画像をアップロードして、提供されているテンプレートとマージしてもらいたいだけです。すなわち、

テンプレート

アップロードした画像を中央の空の円にのみ表示したいので、ドラッグして調整できます。

  • テンプレートを上位レイヤーとして保持すると、キャンバスがテンプレートでいっぱいになるため、ユーザーはドラッグして調整できません。
  • アップロードした画像を上層として保持すると、画像が円からはみ出します。

ユーザーに使いやすいインターフェースを提供することで、これをどのように解決できますか？fabric.jsでClipTo関数を試しましたが、画像オブジェクトでは機能しません。

4

3 に答える 3

5

私はoverlayImageがあなたが求めているものだと思います。

たとえば、カスタマイズのデモを見てください。

overlayImageの例

var canvas = new fabric.Canvas('c13');
var circle = new fabric.Circle({ 
  radius: 30, 
  fill: '#f55', 
  top: 100, 
  left: 100 
});
canvas.add(circle);
canvas.setOverlayImage('../assets/jail_cell_bars.png', 
  canvas.renderAll.bind(canvas));
于 2011-12-10T05:21:29.687 に答える
1

写真とテンプレートの両方をキャンバスに描画できます。fabric.jsについてはよくわかりませんが、canvas関数を直接呼び出すと、単純に...

ctx = canvas.getContext('2d');
ctx.DrawImage(user_img, x,y);
ctx.DragImage(template_imb, 0, 0);

ユーザーがマウスをドラッグすると、xとyが更新され、両方のレイヤーが再描画されます。明らかに、テンプレートの穴が透明であることを確認してください。ユーザーが画像のサイズを変更できるようにする場合は、DrawImage呼び出しに幅と高さを追加できます。変更するための何らかの制御を提供するだけです。

于 2011-12-03T23:05:56.950 に答える
0

より難しい方法は、一時的な（画面外の）キャンバスを作成することです。を使用globalCompositeOperation=source-inして、マスクイメージの上にイメージを描画し、そこgetImageDataからputImageData目的のキャンバスに描画します。

しかし、チャールズの答えがあなたのために働くなら、それははるかに簡単です。

于 2011-12-05T01:45:58.613 に答える