jQuery插件jcrop+Fileapi完美實現圖片上傳+裁剪+預覽的代碼分享

2024-05-06 16:18:40

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了jQuery插件jcrop+Fileapi完美實現圖片上傳+裁剪+預覽的代碼，非常的簡單實用，效果也很棒，有需要的小伙伴可以參考下。

網頁端裁剪圖片，不需要經過服務器。

這個是用https://github.com/mailru/FileAPI框架實現的。配合jcrop.

高級瀏覽器使用 canvas 裁剪，ie6 7 8使用 flash過度。

核心代碼：

var el = $('input').get(0);

seajs.use(['gallery/jcrop/0.9.12/jcrop.css','gallery/jcrop/0.9.12/jcrop.js'] ,function(){

FileAPI.event.on(el, 'change', function (evt){

var files = FileAPI.getFiles(evt); // Retrieve file list

FileAPI.filterFiles(files, function (file, info){

if( !/^image/.test(file.type) ){

alert('圖片格式不正確');

return false;

}

else if(file.size > 20 * FileAPI.MB){

alert('圖片必須小于20M');

return false;

}

else{

return true;

}

}, function (files, rejected){

console.log(files);

if( files.length ){

var file = files[0];

var img0 = FileAPI.Image(file);

var img1 = FileAPI.Image(file);

var ratio = 0;

FileAPI.getInfo(file, function (err, info) { //get image ratio

if (!err) {

if (info.width > info.height) {

ratio = info.width / 500;

}

else {

ratio = info.height / 500;

}

}

});

img0.resize(500, 500, 'max') //place image and register jcrop

.get(function(err, img) {

$('#img2').empty();

$('#img2').append($(img));

$('#img2').children().Jcrop({

aspectRatio: 1,

bgColor: 'rgba(0,0,0,0.4)',

onSelect: function(c) {

img1.matrix.sx = c.x * ratio;

img1.matrix.sy = c.y * ratio;

img1.matrix.sw = c.w * ratio;

img1.matrix.sh = c.h * ratio;

img1.matrix.dw = 500;

img1.matrix.dh = 500;

img1.get(function(err, img) {

// $('#img3').empty();

// $('#img3').append($(img));

$('#img3').html($(img));

});

}

});

});

$('#btn').on('click',function(){

FileAPI.upload({

// url: '/testUpFile/upFile',

// headers: { 'Content-Type': 'multipart/form-data' },

files: { images: img1 },

progress: function (evt){ /* ... */ },

complete: function (err, xhr){ /* ... */

//alert(xhr.responseText);

console.log(xhr);

}

});

});

}

});

});

});

完整代碼：

<!DOCTYPE html>

<html>

<head>

<title>TODO supply a title</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width">

<script src="./jquery.min.js"></script>

<script src="./jcrop/jquery.Jcrop.min.js"></script>

<link href="./jcrop/jquery.Jcrop.min.css" rel="stylesheet">

</head>

<style>

.upload-btn {

width: 130px;

height: 25px;

overflow: hidden;

position: relative;

border: 3px solid #06c;

border-radius: 5px;

background: #0cf;

}

.upload-btn:hover {

background: #09f;

}

.upload-btn__txt {

z-index: 1;

position: relative;

color: #fff;

font-size: 18px;

font-family: "Helvetica Neue";

line-height: 24px;

text-align: center;

text-shadow: 0 1px 1px #000;

}

.upload-btn input {

top: -10px;

right: -40px;

z-index: 2;

position: absolute;

cursor: pointer;

opacity: 0;

filter: alpha(opacity=0);

font-size: 50px;

}

</style>

<body>

<div>



<div class="js-fileapi-wrapper upload-btn" id="choose">

<input name="files" type="file" multiple />

<button id="btn">上傳</button>

</div>

<div id="images">

<p style="margin-top: 40px;"></p>

<div id="img2" ></div>

<div id="img3"></div>

</div>

</div>

<script>window.FileAPI = { staticPath: './fileapi/' };</script>

<script src="./fileapi/FileAPI.min.js"></script>

<script>

var el = $('input').get(0);

FileAPI.event.on(el, 'change', function (evt){

var files = FileAPI.getFiles(evt); // Retrieve file list

FileAPI.filterFiles(files, function (file, info){

if( !/^image/.test(file.type) ){

alert('圖片格式不正確');

return false;

}

else if(file.size > 20 * FileAPI.MB){

alert('圖片必須小于20M');

return false;

}

else{

return true;

}

}, function (files, rejected){

if( files.length ){

var file = files[0];

var img0 = FileAPI.Image(file);

var img1 = FileAPI.Image(file);

var ratio = 0;

FileAPI.getInfo(file, function (err, info) { //get image ratio

if (!err) {

if (info.width > info.height) {

ratio = info.width / 500;

}

else {

ratio = info.height / 500;

}

}

});

img0.resize(500, 500, 'max') //place image and register jcrop

.get(function(err, img) {

$('#img2').empty();

$('#img2').append($(img));

$('#img2').children().Jcrop({

aspectRatio: 1,

bgColor: 'rgba(0,0,0,0.4)',

onSelect: function(c) {

img1.matrix.sx = c.x * ratio;

img1.matrix.sy = c.y * ratio;

img1.matrix.sw = c.w * ratio;

img1.matrix.sh = c.h * ratio;

img1.matrix.dw = 500;

img1.matrix.dh = 500;

img1.get(function(err, img) {

// $('#img3').empty();

// $('#img3').append($(img));

$('#img3').html($(img));

});

}

});

});

$('#btn').on('click',function(){

FileAPI.upload({

url: '/testUpFile/upFile',

files: { images: img1 },

progress: function (evt){ /* ... */ },

complete: function (err, xhr){ /* ... */

//alert(xhr.responseText);

}

});

});

}

});

});

</script>

</body>

</html>