이 글은 주로 여러 이미지 업로드를 처리하기 위한 PHP 압축 코드 기능을 소개합니다. 매우 훌륭하고 참고할만한 가치가 있습니다. 필요한 친구는 참고할 수 있습니다.
온라인에서 일부 정보를 읽고 이미지 압축에 대한 대부분의 정보를 찾았습니다. 단일 프런트엔드든 백엔드든 단일 이미지 압축이므로 프런트엔드와 백엔드 압축을 직접 구성하고 다중 이미지 압축 이미지 인스턴스를 지원했습니다. 코드가 많아서 에디터에 직접 복사해 보면 더 명확해집니다
1. 먼저 간단한 업로드 페이지 upload.php를 만듭니다. 먼저 프론트 엔드 코드를 통해 이미지를 압축하고 코드를 직접 업로드하세요
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<title>实名验证</title>
<script type="text/javascript">
/*
三个参数
file：一个是文件(类型是图片格式)，
w：一个是文件压缩的后宽度，宽度越小，字节越小
objp：一个是容器或者回调函数
photoCompress()
*/
function photoCompress(file,w,objp){
var ready=new FileReader();
/*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
ready.readAsDataURL(file);
ready.onload=function(){
var re=this.result;
canvasDataURL(re,w,objp)
}
}
function canvasDataURL(path, obj, callback){
var img = new Image();
img.src = path;
img.onload = function(){
var that = this;
// 默认按比例压缩
var w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = obj.height || (w / scale);
var quality = 0.7; // 默认图片质量为0.7
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 创建属性节点
var anw = document.createAttribute("width");
anw.nodeValue = w;
var anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
ctx.drawImage(that, 0, 0, w, h);
// 图像质量
if(obj.quality && obj.quality <= 1 && obj.quality > 0){
quality = obj.quality;
}
// quality值越小，所绘制出的图像越模糊
var base64 = canvas.toDataURL('image/jpeg', quality);
// 回调函数返回base64的值
callback(base64);
}
}
/**
* 将以base64的图片url数据转换为Blob
* @param urlData
* 用url方式表示的base64图片数据
*/
function convertBase64UrlToBlob(urlData){
var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
}
var xhr;
//上传文件方法
function uploadClick() {
document.getElementsByClassName("uploadbtn")[0].value = '上传中...';
document.getElementsByClassName("uploadbtn")[0].disabled=true;
var obj = document.getElementsByClassName("myfile");
for(var i=0;i<2;i++){
UploadFile(obj[i].files[0],'file'+i);
}
}
function UploadFile(fileObj,filed){
var shopid = document.getElementById('shopid').value;
var adminid = document.getElementById('adminid').value;
var url = "newshimingupload.php"; // 接收上传文件的后台地址
var form = new FormData(); // FormData 对象
if(fileObj.size/1024 > 100) { //大于100k，进行压缩上传
photoCompress(fileObj, {
quality: 0.2
}, function(base64Codes){
//console.log("压缩后：" + base.length / 1024 + " " + base);
var bl = convertBase64UrlToBlob(base64Codes);
form.append("file", bl, "file_"+Date.parse(new Date())+".jpg"); // 文件对象
form.append("shopid", shopid); // 文件对象
form.append("adminid", adminid); // 文件对象
form.append("filed", filed); // 文件对象
xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
xhr.open("post", url, false); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
xhr.onload = uploadComplete; //请求完成
xhr.onerror = uploadFailed; //请求失败
// xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】
xhr.upload.onloadstart = function(){//上传开始执行方法
ot = new Date().getTime(); //设置上传开始时间
oloaded = 0;//设置上传开始时，以上传的文件大小为0
};
xhr.send(form); //开始上传，发送form数据
});
}else{ //小于等于1M 原图上传
form.append("file", fileObj); // 文件对象
form.append("shopid", shopid); // 文件对象
form.append("adminid", adminid); // 文件对象
form.append("filed", filed); // 文件对象
xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
xhr.open("post", url, false); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
xhr.onload = uploadComplete; //请求完成
xhr.onerror = uploadFailed; //请求失败
xhr.upload.onloadstart = function(){//上传开始执行方法
ot = new Date().getTime(); //设置上传开始时间
oloaded = 0;//设置上传开始时，以上传的文件大小为0
};
xhr.send(form); //开始上传，发送form数据
}
}
//上传成功响应
function uploadComplete(evt) {
//服务断接收完文件返回的结果
var data = JSON.parse(evt.target.responseText);
console.log(data);
if(data.status){
alert(data.msg);
if(data.msg == '门店照上传成功'){
window.location.href = "/dd_admin/index.php";
}
}
}
//上传失败
function uploadFailed(evt) {
alert("网络不稳定，请重新上传！");
}
</script>
</head>
<body>
<style type="text/css">
.main{text-align: center;padding-top: 50px;}
.main .myfile{margin-bottom: 15px;}
</style>
<p class="main">
营业执照：
<input type="file" class="myfile" id="file1" name="file1" accept="image/x-png, image/jpg, image/jpeg, image/gif"/><br>
门店照：
<input type="file" class="myfile" id="file2" name="file2" accept="image/x-png, image/jpg, image/jpeg, image/gif"/><br>
<input type="hidden" id="shopid" name="shopid" value="<?php echo $_GET['shopid']; ?>" maxlength="15">
<input type="hidden" id="adminid" name="adminid" value="<?php echo $_GET['adminid']; ?>" maxlength="15">
<input style="margin-top: 25px;" class="uploadbtn" type="button" onclick="uploadClick()" value="上传" /><br>
</p>
</body>
</html>
2、前端图片压缩后，请求到自定义的接口upload_deal.php.代码如下
<?php
require_once('public_func.php');
actionUpload('uploads/','file'); //参数分别代表图片存储的路径和上传的文件名
}
3、在第二部引入public_func.php,这块代码主要是对后端处理图片压缩
function actionUpload($path = '/uploads/',$filename='myFile')
{
// $path = 'uploads/'; //图片存放根目录 根据自己项目路径而定
$file = $_FILES[$filename]['name'];
$folder = $path.date('Ymd')."/";
$pre = rand(999,9999).time();
$ext = strrchr($file,'.');
$newName = $pre.$ext;
$out = array(
'msg'=>'',
'status'=>'error',
'img_url'=>''
);
if(!is_dir($folder))
{
if(!mkdir($folder, 0777, true)){
$out['msg'] = '图片目录创建失败！';
echo json_encode($out);
exit;
}
}
$im = $_FILES[$filename]['tmp_name']; //上传图片资源
$maxwidth="1056"; //设置图片的最大宽度
$maxheight="500"; //设置图片的最大高度
$imgname = $folder.$newName; //图片存放路径 根据自己图片路径而定
$filetype=$_FILES[$filename]['type'];//图片类型
$result = thumbImage($im,$maxwidth,$maxheight,$imgname,$filetype);
if($result){
$out['msg'] = '图片上传成功';
$out['status'] = 'success';
$out['img_url'] = $folder.$newName;
}else{
$out['msg'] = '图片上传失败';
}
return json_encode($out);
exit;
}
//压缩图片
function thumbImage($im,$maxwidth,$maxheight,$name,$filetype)
{
switch ($filetype) {
case 'image/pjpeg':
case 'image/jpeg':
$im = imagecreatefromjpeg($im); //PHP图片处理系统函数
break;
case 'image/gif':
$im = imagecreatefromgif($im);
break;
case 'image/png':
$im = imagecreatefrompng($im);
break;
case 'image/wbmp':
$im = imagecreatefromwbmp($im);
break;
}
$resizewidth_tag = $resizeheight_tag = false;
$pic_width = imagesx($im);
$pic_height = imagesy($im);
if(($maxwidth && $pic_width > $maxwidth) || ($maxheight && $pic_height > $maxheight))
{
$resizewidth_tag = $resizeheight_tag = false;
if($maxwidth && $pic_width>$maxwidth)
{
$widthratio = $maxwidth / $pic_width;
$resizewidth_tag = true;
}
if($maxheight && $pic_height>$maxheight)
{
$heightratio = $maxheight / $pic_height;
$resizeheight_tag = true;
}
if($resizewidth_tag && $resizeheight_tag)
{
if($widthratio < $heightratio)
$ratio = $widthratio;
else
$ratio = $heightratio;
}
if($resizewidth_tag && !$resizeheight_tag)
$ratio = $widthratio;
if($resizeheight_tag && !$resizewidth_tag)
$ratio = $heightratio;
$newwidth = $pic_width * $ratio;
$newheight = $pic_height * $ratio;
if(function_exists("imagecopyresampled"))
{
$newim = imagecreatetruecolor($newwidth,$newheight);//PHP图片处理系统函数
imagecopyresampled($newim,$im,0,0,0,0,$newwidth,$newheight,$pic_width,$pic_height);//PHP图片处理系统函数
}
else
{
$newim = imagecreate($newwidth,$newheight);
imagecopyresized($newim,$im,0,0,0,0,$newwidth,$newheight,$pic_width,$pic_height);
}
switch ($filetype) {
case 'image/pjpeg' :
case 'image/jpeg' :
$result = imagejpeg($newim,$name);
break;
case 'image/gif' :
$result = imagegif($newim,$name);
break;
case 'image/png' :
$result = imagepng($newim,$name);
break;
case 'image/wbmp' :
$result = imagewbmp($newim,$name);
break;
}
imagedestroy($newim);
}
else
{
switch ($filetype) {
case 'image/pjpeg' :
case 'image/jpeg' :
$result = imagejpeg($im,$name);
break;
case 'image/gif' :
$result = imagegif($im,$name);
break;
case 'image/png' :
$result = imagepng($im,$name);
break;
case 'image/wbmp' :
$result = imagewbmp($im,$name);
break;
}
}
return $result;
}위 내용은 모두의 학습에 도움이 되기를 바랍니다. PHP 중국어 웹사이트로!
관련 권장 사항:
PHPEXCEL을 사용하여 데이터 및 그림 코드 내보내기
위 내용은 PHP를 사용하여 여러 이미지를 업로드하고 압축하는 기능을 처리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
