1

Fabric.jsユーザーが画像をアップロードしてポスターを作成できるベースのアプリケーションを作成中です。最近clip、ユーザーが描いたパスを使用して画像をトリミングする機能に取り組み始めました。

仕組み:ユーザーはキャンバスから画像を選択し、cropボタンをクリックします。activeElementキャンバスから選択し、抽出image srcします。canvasこの SRC は、上の にイメージを配置するために使用されBootstra Modalます。ユーザーは、パスが描画される画像をクリックし、最後に画像をトリミングします。

トリミング ボタンをクリックすると、ドット ポイントから SVG パスが作成されます。次に、この値を使用して画像をトリミングします。

問題:画像が背景のない PNG の場合 (PNG のみを使用します)、背景が「黒」になります。

クリッピング後に画像の背景が黒くなる

以下、@_pathファブリックを参照してください。ユーザーのクリックによって svg パスを使用して作成されたパス オブジェクト。@_imageは画像でご確認下さいfabric.Image。

clipPath: () ->
    path_x = @_path.getLeft() -  ( @_image.getWidth() / 2 )
    path_y = @_path.getTop()- ( @_image.getHeight() / 2 )
    @_path.setLeft path_x
    @_path.setTop path_y
    # console.log 'Fill white'
    # @_image.setFill('white')

    @_image.clipTo = ( ctx ) =>
      @_path.render( ctx )

    @_image._clipToPath = @getPathSVG() 
    @_canvas.renderAll()
    return

試し@_image.setFIll('white')てみ@_image.backgroundColor = 'rgba(255,255,255,1)'ましたが、効果がないようです。

質問:

  1. 画像を正しい方法でクリップ/トリミングしましたか (例: を使用clipTo)? どうして...と思うのですか
  2. 透過性があったところに画像が黒いのはなぜだと思いますか?

前もって感謝します。

4

0 に答える 0