【jQuery】如何使用 imgAreaSelect 對影像(img, video)進行框選、截圖

Common

1. 利用jQuery的plugin，去進行影像的截圖、框選
   • 影像：img, video…
2. 主要用來取得兩點數據：x1, y1(左上), x2, y2(右下)
   • 透過這些數據，讓後端可以進行要執行的動作，例如：截圖、框選…

jQuery.ImgAreaSelect

• download
• 必要的檔案
  1. jQuery：jquery.min.js，download
  2. Javascript：jquery.imgareaselect.min.js
  3. CSS：imgareaselect-default.css

HOW TO USE 如何實現

$(document).ready(function() {
    $('img#photo').imgAreaSelect({
        onSelectEnd: function(img, selection) {}
    });
});

PARAMETERS 常用參數

• aspectRatio：String
  • 設定框選時，維持固定的寬高比例
  • e.g. 16:9
• handles：Boolean
  • 設定框選時，是否要出現 corners
  • 預設：false
    
• movable：Boolean
  • 設定框選後，選取的區域是否可以移動，改變框選位置
  • 預設：true
    
• resizable：Boolean
  • 設定框選後，選取的區域是否可以調整大小
  • 預設：true
    
• onSelectEnd
  • 設定框選完成後，要執行的function
  • More Detail：Callback Function
• More Detail：官方文件

CSS Class

Callback Function

• 參數
  • img：return 框選區域的 html 的結構
  • selection：return x1, y1(左上), x2, y2(右下), height, width
• 官方範例

$('img#photo').imgAreaSelect({
    onSelectEnd: function (img, selection) {
        alert('width: ' + selection.width + '; height: ' + selection.height);
    }
});

• console.log 的結果
  

Example 範例

img

• 官方範例：Link

• 結果

  

video

• 說明
  1. plugin的缺點：點擊也算是框選的動作
  2. 為了避免觸發後續function，額外加入條件判斷
  3. 改變框選的樣式
• Javascript

$("#testVideo").imgAreaSelect({
    aspectRatio: "16:9",
    movable: false,
    resizable: false,
    onSelectEnd: function(img, selection) {
        if (selection.x1 !== selection.x2) {
            // 後續要執行的function，略
        }
    }
});

• CSS

.imgareaselect-outer {
    background-color: transparent;
    opacity: 0;
}

.imgareaselect-border1,
.imgareaselect-border2,
.imgareaselect-border3,
.imgareaselect-border4 {
    opacity: 1;
    border: 5px solid red;
}

• 結果

  

Reference 參考資料

1. Github：https://github.com/odyniec/imgareaselect
2. 官網：http://odyniec.net/projects/imgareaselect/
3. jQuery：https://jquery.com/download/