jQuery+PHP实现上传裁剪图片
更新时间：2020年06月29日 17:03:12 作者：威明
这篇文章主要为大家详细介绍了jQuery+PHP实现上传裁剪图片，以及图片的预览，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文是一个简单的jquery图片预览+裁剪的例子，原理是在前端获取要裁剪的信息，如宽高比、裁剪坐标，上传图片之后在后端php进行切割
jquery代码（必须在最后面引入）
function showCutImg(showImg){
var showImg = $(showImg);
var changeInput = showImg.parents('.showImgDiv').siblings('.CutImage');
var size = changeInput.siblings('.imgCoord').attr('ratio').split('*');
var needWidth = size[0];
var needHeight = size[1];
var ratio = parseInt(needWidth)/parseInt(needHeight);
ratio = parseFloat(ratio.toFixed(2));
var thisFullDiv = showImg.parent();
var coordArr = changeInput.siblings('.imgCoord').val().split(',');
thisCutImgWidth = showImg.width();
thisCutImgHeight = showImg.height()
thisFullDiv.css('width',thisCutImgWidth);
thisFullDiv.css('height',thisCutImgHeight);
if((thisCutImgWidth/thisCutImgHeight)>=ratio){
var thisCutDivHeight = thisCutImgHeight;
var thisCutDivWidth = thisCutDivHeight*ratio;
}else{
var thisCutDivWidth = thisCutImgWidth;
var thisCutDivHeight = thisCutDivWidth/ratio;
}
var hideWidth = (thisFullDiv.width()-thisCutDivWidth)/2;
showImg.siblings('.hideImgLeft').width(hideWidth);
showImg.siblings('.hideImgRight').width(hideWidth);
var hideHeight = (thisFullDiv.height()-thisCutDivHeight)/2;
showImg.siblings('.hideImgTop').width(thisCutDivWidth);
showImg.siblings('.hideImgBottom').width(thisCutDivWidth);
showImg.siblings('.hideImgTop').height(hideHeight);
showImg.siblings('.hideImgBottom').height(hideHeight);
if(hideWidth>0){
var cutRatioX = thisCutImgWidth/hideWidth;
}else{
var cutRatioX = 0
}
if(hideHeight>0){
var cutRatioY = thisCutImgHeight/hideHeight;
}else{
var cutRatioY = 0;
}
var coord = needWidth+'#'+needHeight+'#'+(cutRatioX)+'#'+(cutRatioY);
if(coordArr!=''){
coordArr.push(coord);
}else{
coordArr = [coord];
}
changeInput.siblings('.imgCoord').val(coordArr);
$('.fullDiv').on('mousedown',function(e){
var me = $(this);
var changeInput = me.parent().siblings('.CutImage');
var index = me.attr('index');
var oldx = e.pageX;
var oldy = e.pageY;
var imgleft = me.children('.cutImg').position().left;
var imgtop = me.children('.cutImg').position().top;
var maxw = me.children('.hideImgLeft').width();
var maxh = me.children('.hideImgTop').height();
var goordArr = changeInput.siblings('.imgCoord').val().split(',');
var cutDivSize = goordArr[index].split('#');
$(document).mousemove(function(e){
var newx = e.pageX;
var newy = e.pageY;
var movex = newx - oldx;
var movey = newy - oldy;
var x = movex + imgleft;
var y = movey + imgtop;
if(Math.abs(x)>maxw){
if(x>0) x = maxw;
if(x<0) x = -maxw;
}
if(Math.abs(y)>maxh){
if(y>0) y = maxh;
if(y<0) y = -maxh;
}
me.children('.cutImg').css('left',x+'px');
me.children('.cutImg').css('top',y+'px');
if(parseInt(maxw - x)>0){
var cutRatioX = me.children('.cutImg').width()/parseInt(maxw - x);
}else{
var cutRatioX = 0;
}
if(parseInt(maxh - y)>0){
var cutRatioY = me.children('.cutImg').height()/parseInt(maxh - y)
}else{
var cutRatioY = 0;
}
var cutImgPo = (cutRatioX) +'#'+ (cutRatioY);
var coordVal = cutDivSize[0]+'#'+cutDivSize[1]+'#'+cutImgPo;
goordArr[index] = coordVal;
changeInput.siblings('.imgCoord').val(goordArr);
});
});
$(document).on('mouseup',function(e){
$(document).unbind('mousemove');
});
}
$(".CutImage").change(function(){
$(this).siblings('.imgCoord').val('');
if($(this).prop('multiple')!=true){ //判断是否多文件上传
var objUrl = getObjectURL1(this.files[0]) ;
var showImgWidth = $(this).siblings('.showImgDiv').attr('showImgWidth');
if(!showImgWidth)
{
showImgWidth = '150';
}
if (objUrl) {
html = '';
html += '<div style="border:1px solid #000;position:relative;z-index:2;overflow:hidden;cursor:move;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;" index="0" class="fullDiv">';
html += '<div style="position:absolute;background:#ccc;top:0;z-index:4;opacity:0.95;left:0;right:0;margin:auto;" class="hideImgTop"></div>';
html += '<div style="position:absolute;background:#ccc;bottom:0;z-index:4;opacity:0.95;left:0;right:0;margin:auto;" class="hideImgBottom"></div>';
html += '<div style="position:absolute;height:100%;background:#ccc;left:0;z-index:4;opacity:0.95;" class="hideImgLeft"></div><div style="position:absolute;z-index:3;left:0;right:0;top:0;bottom:0;margin:auto;" class="cutDiv"></div>';
html += '<div style="position:absolute;height:100%;background:#ccc;right:0;z-index:4;opacity:0.95;" class="hideImgRight"></div>';
html += '<img style="position:absolute;z-index:1;width:'+showImgWidth+'px" onload="showCutImg(this)" class="cutImg" class="imgshover" src="'+objUrl+'" alt="图片加载失败" />';
html += '</div>';
$(this).siblings('.showImgDiv').html(html);
}
}else{
var objUrl = getObjectURL2($(this).get(0).files);
if (objUrl) {
var showImgWidth = $(this).siblings('.showImgDiv').attr('showImgWidth');
if(!showImgWidth)
{
showImgWidth = '150';
}
var html = '';
for(var i=0;i<objUrl.length;i++)
{
html += '<div style="margin-bottom:5px;border:1px solid #000;position:relative;z-index:2;overflow:hidden;cursor:move;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;" index="'+i+'" class="fullDiv">';
html += '<div style="position:absolute;background:#ccc;top:0;z-index:4;opacity:0.95;left:0;right:0;margin:auto;" class="hideImgTop"></div>';
html += '<div style="position:absolute;background:#ccc;bottom:0;z-index:4;opacity:0.95;left:0;right:0;margin:auto;" class="hideImgBottom"></div>';
html += '<div style="position:absolute;height:100%;background:#ccc;left:0;z-index:4;opacity:0.95;" class="hideImgLeft"></div><div style="position:absolute;z-index:3;left:0;right:0;top:0;bottom:0;margin:auto;" class="cutDiv"></div>';
html += '<div style="position:absolute;height:100%;background:#ccc;right:0;z-index:4;opacity:0.95;" class="hideImgRight"></div>';
html += '<img style="position:absolute;z-index:1;width:'+showImgWidth+'px" onload="showCutImg(this)" class="cutImg" class="imgshover" src="'+objUrl[i]+'" alt="图片加载失败" />';
html += '</div>'; //修改img标签的width样式可改变预览图大小
}
$(this).siblings('.showImgDiv').html(html);
}
//$('.fullDiv').css('float','left');
}
}) ;
//建立一個可存取到該file的url
function getObjectURL1(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
//建立一個可存取到該file的url
function getObjectURL2(file) {
var url = new Array();
if (window.createObjectURL!=undefined) { // basic
for(var i=0;i<file.length;i++)
{
url[i] = window.createObjectURL(file[i]) ;
}
} else if (window.URL!=undefined) { // mozilla(firefox)
for(var i=0;i<file.length;i++)
{
url[i] = window.URL.createObjectURL(file[i]) ;
}
} else if (window.webkitURL!=undefined) { // webkit or chrome
for(var i=0;i<file.length;i++)
{
url[i] = window.webkitURL.createObjectURL(file[i]) ;
}
}
return url ;
}
html代码（这些代码要放在同一级）
<!-- 文件上传标签，添加class属性CutImage --> <input class="CutImage" type="file" name="img" /> <!-- 传送图片裁剪比例等参数，要添加class属性imgCoord，ratio为裁剪后要保存的宽高width*height --> <input ratio="100*100" type="hidden" class="imgCoord" name="imgCoord"> <!-- 图片预览，要添加class属性showImgDiv，showImgWidth表示预览时的宽度 --> <div showImgWidth="100" class="showImgDiv"></div>
php代码
/*图片上传代码略 下面直接进行图片裁剪*/
/**
* [cut_img 图片裁剪函数]
* Author: 程威明
* @param array $imgs 图片路径数组
* @param array $info 裁剪信息數組，包括裁剪后要保存的宽高、图片大小与裁剪开始坐标之比
* @param bool $cover 是否覆盖原图，默认不覆盖
* @return array 若覆盖原图返回裁剪数量，不覆盖返回图片路径组成的数组
*/
function cut_img($imgs=array(),$infoarr=null,$cover=false)
{
if($infoarr==null) return $imgs;
//判断是否为数组（必须是一个以图片路径组成的数组）
$imgs = is_array($imgs)?$imgs:array($imgs);
//把多个裁剪信息切成单个信息组成的数组
$infoarr = explode(',', $infoarr);
$save_file = array();
$i=0;
foreach($imgs as $file){
//如果不覆盖原图，可重新定义图片保存路径
if(false==$cover){
$file = $file;
}
//把裁剪信息切割成数组，第一个为要保存的宽第二个为要保存的高，第三和第四个为图片宽高与裁剪起点的比例
$info = explode('#', $infoarr[$i]);
//裁剪宽高比
$ratio = $info[0]/$info[1];
//判断图片是否存在
if(!file_exists($file)) continue;
//获取图片信息
$imgize = getimagesize($file);
//图片宽度
$width = $imgize[0];
//图片高度
$height = $imgize[1];
//图片裁剪起点坐标
$x = $info[2]==0?0:$imgize[0]/$info[2];
$y = $info[3]==0?0:$imgize[1]/$info[3];
//判断图片原宽高比与裁剪宽高比的大小
if($width/$height>=$ratio){
$width = $height*$ratio;//如大于即为裁剪宽度
}else{
$height = $width/$ratio;//如小于即为裁剪高度
}
//裁剪的寬高不能超出圖片大小
if(($width+$x)>$imgize[0]){
$width = $width-($width+$x-$imgize[0]);
}
if(($height+$y)>$imgize[1]){
$height = $height-($height+$y-$imgize[1]);
}
//创建源图的实例
$src = imagecreatefromstring(file_get_contents($file));
//創建一個圖像
$new_image = imagecreatetruecolor($info[0], $info[1]);
//分配颜色
$color = imagecolorallocate($new_image,255,255,255);
//定义为透明色
imagecolortransparent($new_image,$color);
//填充图片
imagefill($new_image,0,0,$color);
//拷贝图片并保存成指定大小
imagecopyresized($new_image, $src, 0, 0, $x, $y, $info[0], $info[1], $width, $height);
//保存
if(false==$cover){
$file = rtrim(dirname($file),'/').'/c_'.basename($file);
$save_file[] = $file;
}
imagejpeg($new_image,$file);
imagedestroy($new_image);
imagedestroy($src);
$i++;
}
if(false==$cover){
return $save_file;
}else{
return $i;
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
jQuery没有直接支持form到json的序列化方法，目前网上有一个实现是这样的2010-12-12
这篇文章主要介绍了jquery操作checkbox实现全选和取消全选,需要的朋友可以参考下2014-05-05
这篇文章主要介绍了jQuery 实现扁平式小清新导航，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
本文给大家分享jquery中map函数的两种方式，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-04-04
在项目开发过程中，经常会遇到带有弹窗的页面，尤其是在移动端。下面通过本文给大家分享jQuery实现弹窗下底部页面禁止滑动效果，需要的朋友参考下吧2017-12-12
本文给大家分享一款简单但实用的多级垂直手风琴下拉菜单列表，完全使用css来制作多级手风琴菜单，通过该代码将不同的子菜单进行分组制作出多级菜单的效果，本文附效果演示和源码下载感兴趣的朋友一起学习吧2015-11-11
这篇文章主要为大家详细介绍了uploader秒传图片到服务器的完整代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
在实践中还是遇到了很多的问题，注意在input的checkbox中，用普通的attr属性来判断是不可以的，因为checked的值是checked，因此做个笔记2013-11-11
本文给大家分享的是使用jQuery插件Boxscroll来实现简单的图片轮播特效的代码，非常简单实用，有需要的小伙伴可以参考下。2015-07-07
这篇文章主要介绍了jQuery中可见性过滤器简单用法,结合实例形式简单分析了jQuery中可见性过滤器的原理及相关使用技巧,需要的朋友可以参考下2018-03-03
最新评论