キャンバスベースのモバイル用画像編集ソフトの実装

プロジェクトのアドレスです。 https://github.com/xiaosu95/canvas_mobile_drag

クリックするとデモが表示されます（モバイルでご覧ください）

このプラグインは、jqから切り離されたモバイル用の画像編集ツールです。モバイルH5ページやWeChatアプレットに適用することができます。

• このプラグインは、ページでの画像の初期読み込み、モバイルアルバムからの手動での画像追加、サーバーからの画像追加（クロスドメインの画像を許可するためにサーバーを有効にする必要があります）に使用できます。複数の編集モード。キャンバス内のすべての画像の操作と、特定の画像の状態や位置の個別設定に対応。
{を使用します。 プラグイン操作モードでは、ジェスチャーによるズームや回転をサポート。画像の四隅をクリックし、ドラッグすることでズームや回転をサポートします。 {プラグイン操作モード {を追加しました。 写真exifの自動補正に対応。多くの携帯電話は、異なる方向で写真を撮ると、キャンバスの画像表示角度が正常ではありません原因となります。通常、exif.jsを導入することで解決しますが、このjsはサイズが大きすぎます。そこで、exifの中から角度を直接取得する部分をここに抽出し、コードサイズを大幅にスリム化した。
• このプラグインは、期待する解像度で画像を出力する形式です。

使用開始

var canvasBox = document.querySelector('#picBox');
var canvas = new _Canvas({
  box: canvasBox, // container
  bgColor: '#000', // background color
  bgPhoto: 'none', // background image
  photoModel: 'adoption', // load image mode (default to current setting mode when adding images after setting)
  model: 'Cascade' // mode Cascade for the added picture layer right add order to determine, autoHierarchy for the layer by the selected picture for the highest level
})

canvasをcanvasオブジェクトとして作成し、初期化関数init(Object)を呼び出します。

• dragEvent, zoomEvent, rotateEvent はドラッグ、ズーム、ローテートの3つのイベントリスナーで、2つのパラメータ (picArr, target) を渡します。 picArr はキャンバス内のすべてのイメージオブジェクトの配列、 target はイメージオブジェクトの現在の動作です。
• callbackは「画像初期化完了」のコールバックです。 というコールバックである

canvas.init({
  dragEvent: function (picArr, target) { // Listening for drag events
    console.log('Current action event: dragging')
  },
  zoomEvent: function (picArr, target) { // Listen to the zoom event
    console.log('Current event: zooming')
  },
  rotateEvent: function (picArr, target) { // Listen for the rotate event
    console.log('Current event: rotating')
  },
  callback: function () {
    console.log('Image initialization completed...')
  }
});

キャンバスcanvasのメソッドです。

toDataURL(オブジェクト)

• width: 出力の幅（必須）。
• height: 出力の高さ(必須)。
• type: 出力画像のフォーマット。
• bgColor: 画像の背景色（背景画像が設定されている場合、背景画像は背景色より高いレベルにある）。
• callback: コールバック関数（画像のbaes64を渡す）コールバックが書かれていない場合、toDataURLは画像のbaes64を返します。

$('.outputmodel2').click(function () {
  canvas.toDataURL({
    width: 750,
    height: 600,
    type: 'image/png',
    callback: function (url) {
      $('.outputPic').attr('src', url);
      console.log('Successfully output 1x png image')
    }
  })
})

addPhoto(オブジェクト)

• url: 画像のURL (必須)。
• model: ロードイメージモデル デフォルトは 'covered' padding (数字には固定幅、アダプティブディスプレイには適応)。
• enable: 編集を無効にするかどうか（ブール値）デフォルトはfalseです。
• callback: 画像が読み込まれたときのコールバックで、パラメータは画像のオブジェクトです。

$('.addEnablePic').click(function () {
  canvas.addPhoto({
    url: '. /img/pic6.jpg',
    model: 200,
    enable: true,
    callback: function () {
      console.log('Successfully added an image with editing disabled')
    }
  })
})

changeBg(オブジェクト)

色: 背景色

photo: background(url)// 'none'の場合、背景画像を削除する。

$('.bgColor').click(function () {
    var color = '#' + parseInt(Math.random() * 10) + parseInt(Math.random() * 10) + parseInt(Math.random() * 10) + parseInt(Math.random() * 10)
      canvas.changeBg({
        photo: url,
        color: color
      })
    })

changeParams(Object)

width: 'キャンバスの幅',

height: 'キャンバスの高さ',

モデルです。'キャンバスモード' (モデルCascadeは追加順で決まる追加画像の階層、autoHierarchyは選択画像から最上位までの階層)

getNowPhoto()

現在の操作のイメージオブジェクトを返します。

clearCanvas()

キャンバスをクリアする

キャンバスcanvasのプロパティです。

photos: キャンバス内のすべてのイメージオブジェクト

フォトオブジェクト方式（キャンバス内のピクチャーオブジェクト）

init()

画像のサイズと位置をリセットする

getPhotoInfo()

画像の位置情報{model, enable, x (キャンバスに対する x), y (キャンバスに対する y), rotate, scale, width (キャンバス内の画像の幅), height (キャンバス内の画像の高さ), actualWidth (画像の実際の幅), actualHeight (画像の実際の高さ)}を取得する。

changeInfo(オブジェクト)

•  hierarchy: 階層(数値)
• img: 画像URL(文字列)
{を使用します。 回転させる。回転角度(数値) {を使用します。 {を使用します。 scale: 倍率(数値) {を使用します。 {を使用します。 コールバック パラメータ変更後のコールバック (関数) {を使用します。

$('.changeUrl').click(function () {
  var nowPhoto = canvas.getNowPhoto();
  if (!nowPhoto) {
    alert('No image selected');
    return;
  } else {
    var nowPhotoInfo = nowPhoto.getPhotoInfo();
    nowPhoto.changeInfo({
      img: '. /img/pic7.jpg',
      scale: nowPhotoInfo.scale / 1.1,
      hierarchy: 1,
      rotate: nowPhotoInfo.rotate + 90,
      callback: function () {
        console.log('successfully modified')
      }
    })
  }
})

_delete()

画像を削除する

今回紹介するのは、キャンバス型モバイルイメージエディタの実装に関する記事ですが、よりキャンバス型モバイルイメージエディタの内容に関連するものは、スクリプトハウスの過去記事を検索するか、以下の関連記事を引き続き閲覧してください、今後もよりスクリプトハウスを応援していただけると幸いです