jQuery+PHP實現(xiàn)上傳裁剪圖片
更新時間：2020年06月29日 17:03:12 作者：威明
這篇文章主要為大家詳細介紹了jQuery+PHP實現(xiàn)上傳裁剪圖片，以及圖片的預覽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文是一個簡單的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" /> <!-- 傳送圖片裁剪比例等參數(shù)，要添加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 圖片裁剪函數(shù)]
* Author: 程威明
* @param array $imgs 圖片路徑數(shù)組
* @param array $info 裁剪信息數(shù)組，包括裁剪后要保存的寬高、圖片大小與裁剪開始坐標之比
* @param bool $cover 是否覆蓋原圖，默認不覆蓋
* @return array 若覆蓋原圖返回裁剪數(shù)量，不覆蓋返回圖片路徑組成的數(shù)組
*/
function cut_img($imgs=array(),$infoarr=null,$cover=false)
{
if($infoarr==null) return $imgs;
//判斷是否為數(shù)組（必須是一個以圖片路徑組成的數(shù)組）
$imgs = is_array($imgs)?$imgs:array($imgs);
//把多個裁剪信息切成單個信息組成的數(shù)組
$infoarr = explode(',', $infoarr);
$save_file = array();
$i=0;
foreach($imgs as $file){
//如果不覆蓋原圖，可重新定義圖片保存路徑
if(false==$cover){
$file = $file;
}
//把裁剪信息切割成數(shù)組，第一個為要保存的寬第二個為要保存的高，第三和第四個為圖片寬高與裁剪起點的比例
$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]);
}
//創(chuàng)建源圖的實例
$src = imagecreatefromstring(file_get_contents($file));
//創(chuàng)建一個圖像
$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+ThinkPHP實現(xiàn)圖片上傳
- jquery+ajax實現(xiàn)上傳圖片并顯示上傳進度功能【附php后臺接收】
- PHP結合jquery ajax實現(xiàn)上傳多張圖片，并限制圖片大小操作示例
- thinkphp jquery實現(xiàn)圖片上傳和預覽效果
- JQuery PHP圖片在線裁剪實例
- php+flash+jQuery多圖片上傳源碼分享
- PHP+jQuery+Ajax實現(xiàn)多圖片上傳效果
- jquery+php+ajax顯示上傳進度的多圖片上傳并生成縮略圖代碼
- PHP結合JQueryJcrop實現(xiàn)圖片裁切實例詳解
- jQuery+PHP實現(xiàn)圖片上傳并提交功能
相關文章
jQuery沒有直接支持form到json的序列化方法，目前網(wǎng)上有一個實現(xiàn)是這樣的2010-12-12
jquery操作checkbox實現(xiàn)全選和取消全選
這篇文章主要介紹了jquery操作checkbox實現(xiàn)全選和取消全選,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了jQuery 實現(xiàn)扁平式小清新導航，文中示例代碼非常詳細，幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-07-07
本文給大家分享jquery中map函數(shù)的兩種方式，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-04-04
在項目開發(fā)過程中，經(jīng)常會遇到帶有彈窗的頁面，尤其是在移動端。下面通過本文給大家分享jQuery實現(xiàn)彈窗下底部頁面禁止滑動效果，需要的朋友參考下吧2017-12-12
本文給大家分享一款簡單但實用的多級垂直手風琴下拉菜單列表，完全使用css來制作多級手風琴菜單，通過該代碼將不同的子菜單進行分組制作出多級菜單的效果，本文附效果演示和源碼下載感興趣的朋友一起學習吧2015-11-11
這篇文章主要為大家詳細介紹了uploader秒傳圖片到服務器的完整代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
在實踐中還是遇到了很多的問題，注意在input的checkbox中，用普通的attr屬性來判斷是不可以的，因為checked的值是checked，因此做個筆記2013-11-11
jQuery插件boxScroll實現(xiàn)圖片輪播特效
本文給大家分享的是使用jQuery插件Boxscroll來實現(xiàn)簡單的圖片輪播特效的代碼，非常簡單實用，有需要的小伙伴可以參考下。2015-07-07
這篇文章主要介紹了jQuery中可見性過濾器簡單用法,結合實例形式簡單分析了jQuery中可見性過濾器的原理及相關使用技巧,需要的朋友可以參考下2018-03-03