这篇文章主要介绍了关于利用javascript裁剪图片并存储的简单实现，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
裁剪图片对我们来说是再熟悉不过的了，最近工作中就又遇到了这个需求，所以想着干脆整理下来，方法大家和自己在需要的时候参考学习，所以这篇文章主要介绍了利用Javascript裁剪图片并存储的简单实现，后端PHP处理我用的是THINKPHP框架，需要的朋友可以参考下。
前言
就我而言，页面上的设计比较灵动的部分，其实不是很多，诸如滑动验证码，图片裁剪等比较好的交互设计。
从刚开始工作的时候，我就想把这些东西了解下，无奈一直没这个需求，乘着今天的空闲，研究了一下午，期间遇到了大大小小的问题，一直备受折磨，这其实也反映一个问题，我的
立即学习“Java免费学习笔记（深入）”；
还是比较薄弱。
实现效果：
用户点击上传图片后，页面显示所上传的图片，并且出现裁剪框和两个预览区域，最后点击裁剪按钮保存裁剪的图片到服务器上。
效果很简单，整个过程我遇到的两个难点，第一个是裁剪的JS效果，第二个则是图片数据的处理。
对于第一个问题，我引用了网上的一个插件，就我感觉来说，裁剪过程用户的满意度只能算一般，因为它只能裁剪正方形区域，就算边框上有八个拉动设置，但是拉动框时还是按正方形缩放，就这点不太让我满意。
实现方法如下：
以下是简单的页面设计：
@@##@@
系统功能介绍 1 包含企业网站所必备的功能：企业信息、产品管理、人才招聘、新闻资讯、企业图片、以及视频下载等模块2 由于是从CMS系统的基础上开发而成，因此相对于一些其他的企业网站管理系统，本系统具备更强的可扩展能力，可以胜任从小型工作室到大中型企业网上门户等各种不同规模网站的需求。3 后台管理与模板完全分离，并具备非常灵活的标签技术，可以实现无限制个性化的界面定制4 操作简单，利用已经制作好的模
下面是JS代码：
function change_image(file){
var reader = new FileReader();
reader.onload = function(evt){
$("#target").attr('src',evt.target.result);
$('#preview').attr('src',evt.target.result);
$('#preview2').attr('src',evt.target.result);
// $('#target').css({"height":"600px","width":"600px"});
// 限制了大小会影响到截图的效果
};
reader.readAsDataURL(file.files[0]);
var jcrop_api, boundx, boundy;
setTimeout(function(){
$('#target').Jcrop({
minSize: [48,48],
setSelect: [0,0,190,190],
onChange: updatePreview,
onSelect: updatePreview,
onSelect: updateCoords,
aspectRatio: 1
},
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 updatePreview(c){
if (parseInt(c.w) > 0)
{
var rx = 48 / c.w; //小头像预览p的大小
var ry = 48 / c.h;
$('#preview').css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
{
var rx = 199 / c.w; //大头像预览p的大小
var ry = 199 / c.h;
$('#preview2').css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
};
function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
},500);
}
这里稍作两点提醒：
其一：不要忘记在页面头部引入插件:
其二：有些人眼尖的话可能看到了JS里有个定时，同时心理是不是很疑惑这不是有点多此一举吗？其实不是，上传图片到JS加载到页面上，是需要时间的，这个定时的意义在于
等到图片被JS加载到页面上时才去加载裁剪效果，这里也是反复实验后得出的做法。
后端PHP处理我用的是THINKPHP框架，版本是3.1.3
贴上代码：
function crop_deal(){
ob_clean();
import ( 'ORG.Net.UploadFile' );
$upload = new UploadFile ();
$upload->maxSize = 2000000;
$upload->allowExts = array (
'jpg',
'gif',
'png',
'jpeg'
);
$upload->savePath = './upload/test/';
$upload->autoSub = true;
$upload->subType = 'date';
$upload->dateFormat = 'Ymd';
if ($upload->upload () ) {
$info = $upload->getUploadFileInfo();
$new_path = "./upload/test/thumb".date('Ymd');
$file_store = $new_path."/".date('YmdHis').".jpg";
if(!file_exists($new_path)){
mkdir($new_path,0777,true);
}
$source_path = "http://".$_SERVER['HTTP_HOST']."/upload/test/".$info[0]['savename'];
$img_size = getimagesize($source_path);
$width = $img_size[0];
$height = $img_size[1];
$mime = $img_size['mime'];
$srcImg = imagecreatefromstring(file_get_contents($source_path));
$cropped_img = imagecreatetruecolor($_POST['w'], $_POST['h']);
//缩放
// imagecopyresampled($cropped_img,$srcImg,0,0,$_POST['x'],$_POST['y'],$_POST['w'],$_POST['h'],$width,$height);
//裁剪
imagecopy($cropped_img,$srcImg,0,0,$_POST['x'],$_POST['y'],$_POST['w'],$_POST['h']);
header("Content-Type:image/jpeg");
imagejpeg($cropped_img,$file_store);
imagedestroy($srcImg);
imagedestroy($cropped_img);
}
}
这里就是调用GD库里创建图像的一系列方法，最重要就是imagecopy() ，它是将原图按规定的裁剪位置，裁剪大小复制到新的图片上去，这也说明了一件事，页面用户在裁剪图片
的时候其实前端并没有对图片操作，而是得到裁剪时的坐标位置，裁剪大小，然后提交到PHP操作！！
相关推荐：
