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>
<!-- "js-fileapi-wrapper" -- required class -->
<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>
以上所述就是本文的全部内容了，希望大家能够喜欢。
-
本文向大家介绍JavaWeb实现裁剪图片上传完整代码，包括了JavaWeb实现裁剪图片上传完整代码的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了JavaWeb实现裁剪图片上传完整案例，供大家参考，具体内容如下 实现思路 •使用jcrop插件手机要裁剪图片的坐标 •将收集到的参数传递到后台，在后台使用java图形对象绘制图像进行裁剪 ◦后台处理流程： 1、将上传的图片按按照比例进
-
本文向大家介绍android完美实现 拍照 选择图片 剪裁等代码分享，包括了android完美实现 拍照 选择图片 剪裁等代码分享的使用技巧和注意事项，需要的朋友参考一下 前言，版本兼容问题主要是由于4.4以前和4.4以后的Uri的格式不同所造成的错误 1.拍照 和选择图片 ①选择图片 ②拍照 2.获取系统传来的值 标记符 3.图片选取后 根据Url 转成流 并保存 4.保存图片 记得加权
-
本文向大家介绍vue 图片裁剪上传组件的实现，包括了vue 图片裁剪上传组件的实现的使用技巧和注意事项，需要的朋友参考一下 先看一下总体效果: 上传文件做了大小和类型的限制，在动图中无法展现出来。 使用file类型的input实现选择本地文件 但是浏览器原生的文件上传按钮的颜值不尽人意，而且按钮上的文字是无法改变的，我需要把这个上传文件的按钮改造一下。 方法1：使用label元素来触发一个隐藏的f
-
本文向大家介绍vue.js 实现图片本地预览 裁剪 压缩 上传功能，包括了vue.js 实现图片本地预览 裁剪 压缩 上传功能的使用技巧和注意事项，需要的朋友参考一下 以下代码涉及 Vue 2.0 及 ES6 语法。 目标 纯 javascrpit 实现，兼容ie9及以上浏览器，在本地做好文件格式、长宽、大小的检测，减少浏览器交互。 现实是残酷的，为了兼容Ie9 还是用上了 flash，第二篇来解
-
本文向大家介绍vue实现图片裁剪后上传，包括了vue实现图片裁剪后上传的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了vue实现图片裁剪后上传的具体代码，供大家参考，具体内容如下 一、背景 目前负责的系统（商城后台管理系统）里面有这么一个需求，为了配合前台的展示，上传的商品图片比较必须是1:1的正方形。（其它地方有时会有5:4或者16:9的需求，但较少）。所以需要对上传的图片先进行裁
-
本文向大家介绍利用jQuery插件imgAreaSelect实现图片上传裁剪（放大缩小），包括了利用jQuery插件imgAreaSelect实现图片上传裁剪（放大缩小）的使用技巧和注意事项，需要的朋友参考一下 这个应用的关键： 1.让左边选择区域和右边显示的图像信息保持一至。 2.根据左边选择区域的大小，来让右边有一个对局部放大或缩小的效果。 3.后台上传功能。 那么这一次，只谈