1、插件介紹

imgareaselect 是一個 允許用戶使用簡單、直觀的點擊、拖動界面圖像選擇矩形區域的jQuery插件。該插件可用于 web 應用程序中輕松實現圖像裁剪功能，以及其他功能，如照片標記、 圖像編輯功能，等等。
2、基本用法（簡單實例）

首先先調用imgareaselect-default.css、jquery-1.7.1.min.js、imgareaselect.pack.js這三個文件（官網下載的）

官網：http://odyniec.net/projects/imgareaselect/

<!--html-->
<div class="frame" style="margin: 0 0.3em; width: 500px; height: 467px;float:left;border:2px solid #dcdcdc;"> 　　<img id="photo" src="../Images/img3.jpg" style="max-width:100%;max-height:100%;" /> </div><div id="preview" style="width: 250px; height: 200px; overflow: hidden;border:2px solid #dcdcdc;"> 　　<img src="../Images/img3.jpg" style="width: 250px; height: 200px;" /> </div>

?

function preview(img, selection) {if (!selection.width || !selection.height)return;var scaleX = 250 / selection.width;var scaleY = 200 / selection.height;var hei = $('#photo').height();var wid = $('#photo').width();$('#preview img').css({width: Math.round(scaleX * wid),height: Math.round(scaleY * hei),marginLeft: -Math.round(scaleX * selection.x1),marginTop: -Math.round(scaleY * selection.y1)});}$(function () {$('#photo').imgAreaSelect({//aspectRatio: '1:1', handles: true,fadeSpeed: 200, onSelectChange: preview});});

如果在jQuery對象里有不止有一個img元素，那么這個插件會對里面的元素逐個應用此方法。其實這個方法不僅僅應用于img元素，它支持任何塊級元素（比如有圖像背景的div元素）

實例效果圖：

3、實例解析

效果圖是通過onSelectChange()回調函數實現選擇區域預覽的效果。由于預覽窗口是250x200px的，因此當截圖窗口小于250px時，預覽圖會放大；當截圖窗口大于250px時，預覽圖會縮小。

在preview()函數中，首先就定義了scaleX與scaleY，它們的內容就是250/selection.width(或height)?，也就是當selection.width小于250時，這個因子起放大作用，反之起縮小作用。

特別值得注意：回調函數中實際圖的寬高（要根據實際情況調整！）,回調函數中新圖的寬高這些參數必須設置正確、否則會出現 選擇偏差。（因為我自己的寬高是不定的，所以我是獲取的）

?

轉載于:https://www.cnblogs.com/wyt007/p/6171370.html

總結

以上是生活随笔為你收集整理的jQueryh插件imgareaselect的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。