jquery 圖片裁剪
cropper.js 通過canvas實現圖片裁剪,最後在通過canvas獲取裁剪區域的圖片base64串。
cropper 文件:官方文件是全英文的,好吧我看不懂。只能一個個試試效果,就有了下面的總結。官方文件<-點這
1.container 容器 2.canvas 圖片 3.crop 裁剪框
option相關引數說明:
viewMode 顯示模式
Type: Number
Default: 0
Options:
0: the crop box is just within the container 裁剪框只能在 1內移動
1: the crop box should be within the canvas 裁剪框 只能在 2圖片內移動
2: the canvas should not be within the container 2圖片 不全部鋪滿1 (即縮小時可以有一邊出現空隙)
3: the container should be within the canvas 2圖片 全部鋪滿1 (即 再怎麼縮小也不會出現空隙)
dragMode 拖動模式
Default: ‘crop’
Options:
‘crop’: create a new crop box 當滑鼠 點選一處時根據這個點重新生成一個 裁剪框
‘move’: move the canvas 可以拖動圖片
‘none’: do nothing 圖片就不能拖動了
Define the dragging mode of the cropper.
toggleDragModeOnDblclick 預設true .是否允許 拖動模式 “crop” 跟“move” 的切換狀態。。即當點下為crop 模式,如果未鬆開拖動這時就是“move”模式。放開後又為“crop”模式
preview 截圖的顯示位置 型:String(jQuery選擇器),預設值”
responsive :型別:Boolean,預設值true。是否在視窗尺寸改變的時候重置cropper。
checkImageOrigin:型別:Boolean,預設值true。預設情況下,外掛會檢測圖片的源,如果是跨域圖片,圖片元素會被新增crossOrigin class,並會為圖片的url新增一個時間戳來使getCroppedCanvas變為可用。新增時間戳會使圖片重新載入,以使跨域圖片能夠使用getCroppedCanvas。在圖片上新增crossOrigin class會阻止在圖片url上新增時間戳,及圖片的重新載入。
background:型別:Boolean,預設值true。是否在容器上顯示網格背景。 要想改背景,我是直接改,cropper.css樣式中的 cropper-bg
canvas(圖片)相關
movable:型別:Boolean,預設值true。是否允許移動圖片
rotatable:型別:Boolean,預設值true。是否允許旋轉圖片。
scalable 預設 true 。 是否允許擴充套件圖片。(暫時不知道幹嘛用)
zoomable 預設true, 石頭允許縮放圖片。
zoomOnWheel 預設 true 是否允許滑鼠滾軸 縮放圖片
zoomOnTouch 預設true 是否允許觸控縮放圖片(觸控式螢幕上兩手指操作。)
wheelZoomRatio 預設0.1 師表滾軸縮放圖片比例。即滾一下。圖片縮放多少。如 0.1 就是圖片的10%
crop(裁剪框)相關
aspectRatio 裁剪框比例 預設NaN 例如:: 1 / 1,//裁剪框比例 1:1
modal:型別:Boolean,預設值true。是否在剪裁框上顯示黑色的模態視窗。
cropBoxMovable :預設true ,是否允許拖動裁剪框
cropBoxResizable :預設 true,//是否允許拖動 改變裁剪框大小
autoCrop:型別:Boolean,預設值true。是否允許在初始化時自動出現裁剪框。
autoCropArea:型別:Number,預設值0.8(圖片的80%)。0-1之間的數值,定義自動剪裁框的大小。
highlight:型別:Boolean,預設值true。是否在剪裁框上顯示白色的模態視窗。
guides:型別:Boolean,預設值true。是否在剪裁框上顯示虛線。
center: 預設true 是否顯示裁剪框 中間的+
restore : 型別:Boolean,預設值true 是否調整視窗大小後恢復裁剪區域。
大小相關
minContainerWidth:型別:Number,預設值200。容器的最小寬度。
minContainerHeight:型別:Number,預設值100。容器的最小高度。
minCanvasWidth:型別:Number,預設值0。canvas 的最小寬度(image wrapper)。
minCanvasHeight:型別:Number,預設值0。canvas 的最小高度(image wrapper)。
監聽觸發的方法
build:型別:Function,預設值null。build.cropper事件的簡寫方式。 ====== 。控制元件初始化前執行
built:型別:Function,預設值null。built.cropper事件的簡寫方式。 ====== 空間初始化完成後執行
dragstart:型別:Function,預設值null。dragstart.cropper事件的簡寫方式。 ====== 拖動開始執行
dragmove:型別:Function,預設值null。dragmove.cropper事件的簡寫方式。====== 拖動移動中執行
dragend:型別:Function,預設值null。dragend.cropper事件的簡寫方式。====== 拖動結束執行
zoomin:型別:Function,預設值null。zoomin.cropper事件的簡寫方式。 ====== 縮小執行
zoomout:型別:Function,預設值null。zoomout.cropper事件的簡寫方式。 ====== 放大執行
demo 下載
html
[html] view plain copy
<div class="container" style="padding: 0;margin: 0;position:fixed;display: none;top: 0;left: 0;z-index: 200;" id="containerDiv">
<div class="row" style="display: none;" id="imgEdit">
<div class="col-md-9">
<div class="img-container">
<img src="" alt="Picture">
</div>
</div>
</div>
<div class="row" id="actions" style="padding: 0;margin: 0;width: 100%;position: fixed;bottom: 5px;">
<div class="col-md-9 docs-buttons">
<div class="btn-group" >
<button type="button" class="btn btn-primary" data-method="destroy" title="Destroy" style="height: auto;">
<span class="docs-tooltip" data-toggle="tooltip" >
<span class="fa fa-power-off" >取消</span>
</span>
</button>
</div>
<div class="btn-group btn-group-crop " style="float: right;">
<button type="button" class="btn btn-primary" id="imgCutConfirm" data-method="getCroppedCanvas" data-option="{ "width": 320, "height": 180 }" style="height: auto;margin-right: 17px;">
<span class="docs-tooltip" data-toggle="tooltip" title="">確認</span> <!--cropper.getCroppedCanvas({ width: 320, height: 180 }) -->
</button>
</div>
</div><!-- /.docs-buttons -->
</div>
</div>
[html] view plain copy
使用呼叫cropper 截圖 的js
[html] view plain copy
var fileImg = "";
[html] view plain copy
window.onload = function () {
‘use strict’;//表示強規則
var screenWidth =
var Cropper = window.Cropper;
var console = window.console || { log: function () {} };
var container = document.querySelector(‘.img-container’);
var image = container.getElementsByTagName(‘img’).item(0);
var actions = document.getElementById(‘actions’);
var isUndefined = function (obj) {
return typeof obj === ‘undefined’;
};
var options = {
minContainerHeight : screenHeight,
minContainerWidth : screenWidth,
aspectRatio: 1 / 1,//裁剪框比例 1:1
viewMode : 1,//顯示
guides :false,//裁剪框虛線 預設true有
dragMode : “move”,
build: function (e) { //載入開始
//可以放你的過渡 效果
},
built: function (e) { //載入完成
(“#containerDiv”).show();(“#imgEdit”).show();
},
zoom: function (e) {
console.log(e.type, e.detail.ratio);
},
background : true,// 容器是否顯示網格背景
movable : true,//是否能移動圖片
cropBoxMovable :false,//是否允許拖動裁剪框
cropBoxResizable :false,//是否允許拖動 改變裁剪框大小
};
var cropper = new Cropper(image, options);
[html] view plain copy
//禁用預設方法
function preventDefault(e) {
if (e) {
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
}
// Tooltip
$(‘[data-toggle=”tooltip”]’).tooltip();
if (typeof document.createElement(‘cropper’).style.transition === ‘undefined’) {
}
// Methods
actions.querySelector(‘.docs-buttons’).onclick = function (event) {
var e = event || window.event;
var target = e.target || e.srcElement;
var result;
var input;
var data;
if (!cropper) {
return;
}
while (target !== this) {
if (target.getAttribute('data-method')) {
break;
}
target = target.parentNode;
}
if (target === this || target.disabled || target.className.indexOf('disabled') > -1) {
return;
}
data = {
method: target.getAttribute('data-method'),
target: target.getAttribute('data-target'),
option: target.getAttribute('data-option'),
secondOption: target.getAttribute('data-second-option')
};
if (data.method) {
if (typeof data.target !== 'undefined') {
input = document.querySelector(data.target);
if (!target.hasAttribute('data-option') && data.target && input) {
try {
data.option = JSON.parse(input.value);
} catch (e) {
console.log(e.message);
}
}
}
if (data.method === 'getCroppedCanvas') {
data.option = JSON.parse(data.option);
}
result = cropper[data.method](data.option, data.secondOption);
switch (data.method) {
case 'scaleX':
case 'scaleY':
target.setAttribute('data-option', -data.option);
break;
case 'getCroppedCanvas':
if (result) {
fileImg = result.toDataURL('image/jpg');
$("#showImg").attr("src",fileImg).show();
$("#photoBtn").val("重新選擇");
}
break;
case 'destroy':
$("#inputImage").val("");
$("#containerDiv").hide();
$("#imgEdit").hide();
break;
}
if (typeof result === 'object' && result !== cropper && input) {
try {
input.value = JSON.stringify(result);
} catch (e) {
console.log(e.message);
}
}
}
};
// Import image
var inputImage = document.getElementById(‘inputImage’);
var URL = window.URL || window.webkitURL;
var blobURL;
if (URL) {
inputImage.onchange = function () {
var files = this.files;
var file;
if (cropper && files && files.length) {
file = files[0];
if (/^image\/\w+/.test(file.type)) {
blobURL = URL.createObjectURL(file);
cropper.reset().replace(blobURL);
} else {
window.alert('Please choose an image file.');
}
}
$(inputImage).find("img").hide();
};
} else {
inputImage.disabled = true;
inputImage.parentNode.className += ’ disabled’;
}
};
[html] view plain copy
$(“#imgCutConfirm”).bind(“click”,function(){
$(“#containerDiv”).hide();
$(“#imgEdit”).hide();
$(“#getCroppedCanvasModal”).modal(“hide”);
})
獲取截圖 並ajax提交,
[html] view plain copy
//提交表達
function submitForm(){
$(“#registerForm”).attr(“enctype”,”multipart/form-data”);
var formData = new FormData($("#registerForm")[0]);
formData.append("imgBase64",encodeURIComponent(fileImg));//
formData.append("fileFileName","photo.jpg");
$.ajax({
url: "",
type: 'POST',
data: formData,
timeout : 10000, //超時時間設定,單位毫秒
async: true,
cache: false,
contentType: false,
processData: false,
success: function (result) {
},
error: function (returndata) {
}
});
}
使用canvas生成的截圖。我只找到生成base64的。就是那一長串字元。。
原本我想生成jpg / png ,,沒找到。
後來找到在後臺 把base64 的轉成jpg/png 的方法。
然後又把圖片上傳到七牛上面,發現可以使用二進位制流上傳,就不用jpg了
後臺處理base64 java程式碼片段
[html] view plain copy
/**
* 上傳base64
* @param imgBase64 圖片base64
* @param fileName 圖片名稱
* @return
*/
private String uploadImgBase64(String imgBase64,String fileName){
String uploadPath=FILEDATE;
String fileExt = fileFileName.substring(fileFileName.lastIndexOf(".") + 1).toLowerCase();//上傳的檔案的字尾
String newFileName = fileName+ "." + fileExt;//上傳後的檔名字
String uploadPathName = uploadPath + newFileName;//獲取到上傳後的檔案路徑+檔名
BASE64Decoder decoder = new BASE64Decoder();
imgBase64 = imgBase64.substring(30);
try {
imgBase64 = URLDecoder.decode(imgBase64,"UTF-8");
byte[] decodedBytes = decoder.decodeBuffer(imgBase64);// 將字串格式的imagedata轉為二進位制流(biye[])的decodedBytes
for(int i=0;i<decodedBytes.length;++i){
if(decodedBytes[i]<0) {
//調整異常資料
decodedBytes[i]+=256;
}
}
//使用七牛上傳
new QiniuUploadFile().upload(decodedBytes, uploadPathName);
} catch (IOException e) {
e.printStackTrace();
}
return uploadPathName;
}
我參考的文章咻咻咻
1.jQuery簡單且功能強大的圖片剪裁外掛
2.英文copper api 當找不到方法時,可以看這裡,不要怕英文版的,實在不行你可以一個一個試過去看看效果哈哈。不會告訴你我就是這麼幹的。
3.HTML5 本地裁剪圖片並上傳至伺服器(老梗)