Fabric.js は DIY ポストカード機能を実装します

この記事では、DIYポストカード機能を実現するためのfabricjsの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

序文

要件には、2 本の指での追加、コピー、削除、拡大/縮小が含まれます。

ヒント：以下はこの記事の主な内容です。以下のケースを参考にしてください。

1. fabric.jsは非常に便利なキャンバス操作プラグインです

例: pandas は、データ分析タスクを解決するために作成された NumPy ベースのツールです。

2. コード例

コードは次のとおりです（例）：

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<title>手作り</title>
<メタ文字セット="utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="アクセス制御許可オリジン" content="*" />
<meta http-equiv="有効期限" content="-1">
<meta http-equiv="キャッシュコントロール" content="キャッシュなし">
<meta http-equiv="プラグマ" content="キャッシュなし">
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/fabric.js"></script>
<script src="./js/customiseControls.min.js"></script>
</head>
<スタイル>
  体{
    マージン: 0;
    パディング: 0;
    境界線: 0;
    フォントサイズ: 100%;
    フォントの太さ: 標準;
    垂直位置合わせ: ベースライン;    
  }  
  。終わり{
    位置: 固定;
    上: 0;
    右: 0;
    幅: 50px;
    高さ: 20px;
    背景色: #000000;
    色: #ffffff;
    フォントサイズ: 12px;
    行の高さ: 20px;
    zインデックス: 9999;
  }
  .canvasimg{
    位置: 固定;
    上: 0;
    左: 0;
    幅: 50px;
    高さ: 20px;
    背景色: #000000;
    色: #ffffff;
    フォントサイズ: 12px;
    行の高さ: 20px;
    zインデックス: 9999;
  }
  .canvasimg 入力{
    位置: 絶対;
    上: 0;
    左: 0;
    幅: 100%;
    高さ: 100%;
    不透明度: 0;
  }
  #インラインボタン{
    位置: 固定;
    不透明度: 0;
    zインデックス: 999;
  }
  #addinline-btn{
    不透明度: 0;
    位置: 固定;
    zインデックス: 999;
  }  
  .canvassrc{
    位置: 固定;
    上: 0;
    右: 0;
    幅: 100%;
    高さ: 100%;
    zインデックス: 9999;
  }
</スタイル>
<本文>
  <div class="canvasimg"><input type="file" name="" id="canvasimg" class="canvasimgadd" type="file" accept="image/*" onchange="selectFileImage(this);" >画像を追加</div>
  <div class="end" onclick="linkcanvas()">画像を生成</div>
  <button id="inline-btn" onclick="canvasonclick()">画像削除ボタン</button>
  <button id="addinline-btn" onclick="copy()">画像コピーボタン</button>
  <キャンバスid="c"></キャンバス>
</本文>
</html>
<スクリプト>
  //参考リンク//記事の最後にAPIの詳細な中国語説明があります//http://fabricjs.com/ fabric.js公式サイト//DIY機能にはコピー機能、削除機能、ズームイン、ズームアウト、移動、回転が必要です//新しい画像機能を追加するselectFileImage(fileObj){
    var ファイル = fileObj.files['0'];
    var リーダー = 新しい FileReader();
    reader.readAsDataURL(ファイル)
    reader.onload = 関数 (e) {
      fabric.Image.fromURL(e.target.result, 関数(img) {
        img.scale(1).set({
          left: webwidth - (webwidth / 2)、//画像を左右中央に配置します top: webheight - (webheight / 2)、//画像を上下中央に配置します。画面の高さの合計値 - (画像の高さ / 2) / 2
          angle: 0, //角度は0です
          originX: 'center'、
          originY: 'center'、
        });
        // 画像のデフォルトの幅は画面いっぱいに表示され、片側に 20 ピクセルのスペースが残ります。高さは適応的です img.scaleToWidth(webwidth - 40)
        キャンバスに画像を追加します。アクティブオブジェクトを設定します。
        // 線をクリアします img.hasBorders = false;
        //画像機能ボタンをカスタマイズし、冗長な機能ボタンを非表示にして、四隅のボタンのみを残します canvas.forEachObject(function (em) {
          em['setControlVisible']('mtr', false);
          em['setControlVisible']('mt', false);
          em['setControlVisible']('ml', false);
          em['setControlVisible']('mb', false);
          em['setControlVisible']('mr', false);
          em['setControlVisible']('mt', false);
        })
      });
    }
  }


  // 削除ボタン var btn = document.getElementById('inline-btn')
  // ボタンを追加 var addbtn = document.getElementById('addinline-btn')

  // 画面の高さと幅を取得します var webwidth = $(window).width()
  var webheight = $(window).height()
  //キャンバスを作成します var canvas = new fabric.Canvas('c');
  //キャンバスはデフォルトで画面いっぱいに広がります canvas.setWidth(webwidth)
    キャンバスの高さを設定します。
    //画像をインポート fabric.Image.fromURL('./imgs/2.jpg', function (img) {
      img.scale(1).set({
        left: webwidth - (webwidth/2)、//画像を左右中央に配置します top: webheight-(webheight/2)、//画像を上下中央に配置します。画面の高さの合計値 - (画像の高さ/2)/2
        angle: 0, //角度は0です
        originX: 'center'、
        originY: 'center'、
      });
      //画像のデフォルトの幅は、片側に20ピクセルの空白を残して画面いっぱいに表示され、適応性が非常に高いです。img.scaleToWidth(webwidth-40)
      キャンバスに画像を追加します。アクティブオブジェクトを設定します。
      // 線をクリアします img.hasBorders = false;
      //画像機能ボタンをカスタマイズし、冗長な機能ボタンを非表示にして、四隅のボタンのみを残します canvas.forEachObject(function(em){
        em['setControlVisible']('mtr', false); 
        em['setControlVisible']('mt', false);
        em['setControlVisible']('ml', false);
        em['setControlVisible']('mb', false);
        em['setControlVisible']('mr', false);
        em['setControlVisible']('mt', false);
      })
    });

    //複数選択をキャンセル canvas.selection = false;
    //新しいレイヤーは最上位レイヤーの canvas には表示されません。preserveObjectStacking = true;    
    //注: ボタンの機能をカスタマイズするには、fabric の customiseControls という別の JS プラグインを導入する必要があります。そうしないと機能しません。//4 つのボタンの機能をグローバルに変更します fabric.Canvas.prototype.customiseControls({
      bl: {
        action: 'rotate' //画像回転機能を追加},
      // hasRotatingPoint のみが false に設定されていない
    }、 関数 （） {
      キャンバスをレンダリングします。
    });  

    //デフォルトのボタンスタイルは望んでいるものではないので、ボタン上のアイコンをカスタマイズする必要があります fabric.Object.prototype.customiseCornerIcons({
      tl: {
        icon: './img/[email protected]', //画像パス cornerSize: 70, //ボタンのクリック範囲はCSSのパディング属性設定に相当します: {
          cornerSize: 25 //アイコンサイズ},    
      },
      tr: {
        アイコン: './img/[email protected]',
        コーナーサイズ: 70,  
        設定： {
          コーナーサイズ: 25
        },         
      },
      bl: {
        アイコン: './img/[email protected]',
        コーナーサイズ: 70,  
        設定： {
          コーナーサイズ: 25
        },         
      },
      br: {
        アイコン: './img/[email protected]',
        コーナーサイズ: 70,
        設定： {
          コーナーサイズ: 25
        },         
      },
    }、 関数 （） {
      キャンバスをレンダリングします。
    }); 

    //ボタンは画像の位置に従います function positionBtn(obj) {
      //現在選択されている画像の単位パラメータを取得します。var absCoords = canvas.getAbsoluteCoords(obj);
      btn.style.width = '30px';
      btn.style.height = '30px';
      btn.style.opacity = '0';
      btn.style.left = (absCoords.right - 30 / 2) + 'px';
      btn.style.top = (absCoords.top - 30 / 2) + 'px';

      addbtn.style.width = '30px';
      addbtn.style.height = '30px';
      addbtn.style.opacity = '0';
      addbtn.style.left = (absCoords.left - 30 / 2) + 'px';
      addbtn.style.top = (absCoords.leftTop - 30 / 2) + 'px';
    }

    fabric.Canvas.prototype.getAbsoluteCoords = 関数 (オブジェクト) {
      戻る {
        右: object.aCoords.tr.x + this._offset.left、
        top:object.aCoords.tr.y + this._offset.top、
        左: object.aCoords.tl.x + this._offset.left、
        左上: object.aCoords.tl.y + this._offset.top、
      };
    }


    //現在選択されている画像を削除する function canvasonclick(){
      var t = キャンバス.getActiveObject()
      キャンバスを削除します。
    }

    //現在選択されている画像をコピーする function copy(){
      var _self = これ;
      canvas.getActiveObject().clone(関数 (クローン) {
        _self.paste(複製)
        キャンバス.discardActiveObject().renderAll()
      })
    }    
    関数 paste(_clipboard){
      コンソールログ(_クリップボード)
      var t = canvas.getActiveObject();
      // 再度クローンを作成し、複数のコピーを作成します。
      t.clone(関数(clonedObj) {
        キャンバスを破棄します。
        クローンされたオブジェクト.set({
          左: clonedObj.left + 20、
          上: clonedObj.top + 20,
          イベント: true、
          境界線あり:false
        });
        clonedObj.type === 'activeSelection' の場合 {
          // アクティビティの選択にはキャンバスへの参照が必要です。
          clonedObj.canvas = キャンバス;
          clonedObj.forEachObject(関数 (obj) {
            キャンバスにオブジェクトを追加します。  
            キャンバス.forEachObject(関数 (em) {
              em['setControlVisible']('mtr', false);
              em['setControlVisible']('mt', false);
              em['setControlVisible']('ml', false);
              em['setControlVisible']('mb', false);
              em['setControlVisible']('mr', false);
              em['setControlVisible']('mt', false);
            })                      
          });
          // 選択できない問題を解決する clonedObj.setCoords();
        } それ以外 {
          キャンバスにクローンオブジェクトを追加します。
          キャンバス.forEachObject(関数 (em) {
            em['setControlVisible']('mtr', false);
            em['setControlVisible']('mt', false);
            em['setControlVisible']('ml', false);
            em['setControlVisible']('mb', false);
            em['setControlVisible']('mr', false);
            em['setControlVisible']('mt', false);
          })          
        }
      });     
    }

    var ストア = {}
    //平均値を計算する var getDistance = function (start, stop) {
      Math.hypot(stop.x - start.x, stop.y - start.y) を返します。
    };    

    //positionBtnイベントを監視します。マウスが画像の上にあるときに、画像をクリックして移動すると、カスタムのコピーボタンと削除ボタンがトリガーされ、画像の配置とダブルフィンガーのズームインとズームアウトが行われます。関数canvas.on('mouse:down',function(options){
      //画像ユニットがクリックされたかどうかを判定する if (options.target) {
        //イベントを実行する positionBtn(options.target);

        //ダブルフィンガーでズームイン、ズームアウト store.pageX = options.e.changedTouches[0].clientX
        store.pageY = options.e.changedTouches[0].clientY
        if (options.e.changedTouches.length == 2) {
          store.pageY2 = options.e.changedTouches[1].clientY
          store.pageX2 = options.e.changedTouches[1].clientX
        }
        store.originScale = options.target.scaleX || 0.5;
        オプションのターゲットを左に設定します。
        オプションをターゲットに追加します。
      }
    });                
    canvas.on('mouse:move',function(options){
      if(オプション.ターゲット){
        positionBtn(オプション.ターゲット);
        if (options.e.changedTouches.length == 2) {
          （！ストア.ページX2）{
            store.pageX2 = options.e.changedTouches[1].clientX
          }
          （！ストア.ページY2）{
            store.pageY2 = options.e.changedTouches[1].clientY
          }
          var ズーム = getDistance({
            x: options.e.changedTouches[0].clientX、
            y: オプション.e.changedTouches[0].clientY
          }, {
            x: オプション.e.changedTouches[1].clientX、
            y: オプション.e.changedTouches[1].clientY
          }) /
            距離を取得します({
              x: ストア.ページX、
              y: ストアページY
            }, {
              x: ストア.ページX2、
              y: ストア.ページY2
            });
          var newScale = store.originScale * ズーム;
          (新しいスケール > 3) の場合 {
            新しいスケール = 3;
          } 
          options.target.scaleX = 新しいスケール;
          options.target.scaleY = 新しいスケール;
          キャンバスをレンダリングします。
        }          
      }
    });  
    キャンバス.on('mouse:up',function(options){
      if(オプション.ターゲット){
        positionBtn(オプション.ターゲット);   
        ストア.ページY = 0
        ストア.ページX = 0
        ストア.ページY2 = 0
        ストア.ページX2 = 0    
        store.originScale = オプション.target.scaleX 
        store.originleft = オプション.target.left  
        store.origintop = オプション.target.top      
      }
    }); 

    //ポストカードを生成する function linkcanvas(){
      xheight = $('#c').height() とします。
      xwidth = $('#c').width() とします。
      キャンバスの背景色を設定します。
      var エクスポートされたアート = this.canvas.toDataURL({
        フォーマット: "jpeg",
        品質: 1.0、
        乗数: 2.4、
        左: 0,
        上: 0,
        幅: x幅、
        高さ: x高さ、
      });
      $('body').append(`<img class="canvassrc" src="${exportedArt}"/>`)
    }

</スクリプト>

成果を達成する