Javascript截圖相關參考專案
阿新 • • 發佈:2019-01-24
Jcorp的呼叫主要分為兩種方式
1、jQuery('#cropbox').Jcrop({
onChange: showCoords,
onSelect: showCoords
});
2、var api = $.Jcrop('#cropbox',{
onChange: showPreview,
onSelect: showPreview,
aspectRatio: 1
});
這裡推薦大家使用第二種方式,將Jcrop生成的物件賦給一個全域性變數,這樣操作起來更靈活,如呼叫api.destroy();方法可以銷燬Jcorp,這樣我們在實際使用中會更靈活一些,因為直接改變要裁剪圖片的路徑會導致Jcorp的出錯,如果想要變更編輯的圖片我們需要銷燬Jcorp,變更圖片的屬性後再次為圖片附加Jcorp。
1.最基本使用方法$(
function()
{
$("#demoImage").Jcrop();
}
);
2.得到選中區域的座標以及回撥函式
$(function(){
//事件處理
$("#demoImage").Jcrop({
onChange:showCoords, //當選擇區域變化的時候,執行對應的回撥函式
onSelect:showCoords //當選中區域的時候,執行對應的回撥函式
});
});
function showCoords(c) {
$("#txtX1").val(c.x); //得到選中區域左上角橫座標
$("#txtY1").val(c.y); //得到選中區域左上角縱座標
$("#txtX2").val(c.x2); //得到選中區域右下角橫座標
$("#txtY2").val(c.y2); //得到選中區域右下角縱座標
$("#txtWidth").val(c.w); //得到選中區域的寬度
$("#txtHeight").val(c.h); //得到選中區域的高度
}
aspectRatio:選中區域按寬/高比,為1表示正方形。
minSize:最小的寬,高值。
maxSize:最大的寬,高值。
setSelect:設定初始選中區域。
bgColor:背景顏色
bgOpacity:背景透明度。
allowResize:是否允許改變選中區域大小。
allowMove:是否允許移動選中區域。
舉例如下:
複製程式碼程式碼如下:
$(function() {
$("#demoImage").Jcrop({
aspectRatio: 1, //選中區域寬高比為1,即選中區域為正方形
bgColor:"#ccc", //裁剪時背景顏色設為灰色
bgOpacity:0.1, //透明度設為0.1
allowResize:false, //不允許改變選中區域的大小
setSelect:[0,0,100,100] //初始化選中區域
});
}); 4.api用法
var api = $.Jcrop("#demoImage");
api.disable(); //設定為禁用裁剪效果
api.enable(); //設定為啟用裁剪效果
api.setOptions({allowResize:false});//設定相應配置
api.setSelect([0,0,100,100]); //設定選中區域 =======================================================================================================
方法如下:
一、在head部分(<head>和</head>之間)插入相關css和js檔案。
<link rel="stylesheet"href="css/jquery.Jcrop.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.Jcrop.js"></script>
二、在head部分插入回撥函式等相關處理引數。
<script language="Javascript">
<!--
jQuery(function($) {
// Create variables (in this scope) to hold the API and image size
var jcrop_api, boundx, boundy;
$('#cropbox').Jcrop({
minSize: [0, 0],
maxSize: [0, 0],
setSelect: [0, 0, 0, 0],
boxWidth: 800,
borderOpacity: 0.3,
keySupport: false,
dragEdges: false,
allowSelect: false,
allowResize: false,
bgOpacity: 0.2,
boundary: 0,
//allowMove:false,
addClass: 'jcrop-handle',
onSelect: updateCoords,
},
function() {
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
});
function updateCoords(c) {
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
function checkCoords() {
if (parseInt($('#w').val())) returntrue;
alert('請選擇裁剪區域');
returnfalse;
};
});
-->
</script>
三、給相關圖片加上id以便識別。
<img id="cropbox"src="x.jpg">
這樣就能實現最簡單的裁剪效果,至於如何結合動態語句處理圖片,在置頂的文章裡已經給出了示例。
下表給出基本options引數設定:
名稱 | 預設值 | 說明 |
---|---|---|
allowSelect | true | 允許新選框 |
allowMove | true | 允許選框移動 |
allowResize | true | 允許選框縮放 |
trackDocument | true | |
baseClass | "jcrop" | 基礎樣式名字首。說明:class="jcrop-holder",更改的只是其中的 jcrop。 |
addClass | null | 新增樣式會。例:假設值為 "test",那麼會新增樣式到 class="test jcrop-holder" |
bgColor | "black" | 背景顏色。顏色關鍵字、HEX、RGB 均可。 |
bgOpacity | 0.6 | 背景透明度 |
bgFade | false | 使用背景過渡效果 |
borderOpacity | 0.4 | 選框邊框透明度 |
handleOpacity | 0.5 | 縮放按鈕透明度 |
handleSize | 9 | 縮放按鈕大小 |
handleOffset | 5 | 縮放按鈕與邊框的距離 |
aspectRatio | 0 | 選框寬高比。說明:width/height |
keySupport | true | 支援鍵盤控制。按鍵列表:上下左右(移動)、Esc(取消)、Tab(跳出裁剪框,到下一個) |
cornerHandles | true | 允許邊角縮放 |
sideHandles | true | 允許四邊縮放 |
drawBorders | true | 繪製邊框 |
dragEdges | true | 允許拖動邊框 |
fixedSupport | true | |
touchSupport | null | |
boxWidth | 0 | 畫布寬度 |
boxHeight | 0 | 畫布高度 |
boundary | 2 | 邊界。說明:可以從邊界開始拖動滑鼠選擇裁剪區域 |
fadeTime | 400 | 過度效果的時間 |
animationDelay | 20 | 動畫延遲 |
swingSpeed | 3 | 過渡速度 |
minSelect | [0,0] | 選框最小選擇尺寸。說明:若選框小於該尺寸,則自動取消選擇 |
maxSize | [0,0] | 選框最大尺寸 |
minSize | [0,0] | 選框最小尺寸 |
onChange | function(){} | 選框改變時的事件 |
onSelect | function(){} | 選框選定時的事件 |
onRelease | function(){} | 取消選框時的事件 |
下表是api方法
名稱 | 說明 |
---|---|
setImage(string) | 設定(或改變)影象。例:jcrop_api.setImage("newpic.jpg") |
setOptions(object) | 設定(或改變)引數,格式與初始化設定引數一樣 |
setSelect(array) | 建立選框,引數格式為:[x,y,x2,y2] |
animateTo(array) | 用動畫效果建立選框,引數格式為:[x,y,x2,y2] |
release() | 取消選框 |
disable() | 禁用 Jcrop。說明:已有選框不會被清除。 |
enable() | 啟用 Jcrop |
destroy() | 移除 Jcrop |
tellSelect() | 獲取選框的值(實際尺寸)。例子:console.log(jcrop_api.tellSelect()) |
tellScaled() | 獲取選框的值(介面尺寸)。例子:console.log(jcrop_api.tellScaled()) |
getBounds() | 獲取圖片實際尺寸,格式為:[w,h] |
getWidgetSize() | 獲取圖片顯示尺寸,格式為:[w,h] |
getScaleFactor() | 獲取圖片縮放的比例,格式為:[w,h] |