PHP实现图片格式(png,jpg,jpeg)转换成webp

薛弘壮
2023-12-01

基本原理:前端使用ajax上传图片,后台php接收图片数据,进行处理,使用php扩展gd库将图片格式转换成webp,返回给前端。当然不使用ajax也可以,不是重点。ajax异步请求对用户更友好一些。300K左右的图片会被压缩2/3,等待时间不到1s。

技术难点:php,ajax异步请求,gd库。base64编码,主要用于提升性能。

前端上传代码

<!DOCTYPE html>
<html lang="zh_CN">
<head>
	<meta charset="UTF-8">
	<title>图片(jpg,jpeg,png)转webp</title>
	<style>
		.center{
			text-align: center;
		}
		.bt{
			font-size: 25px;
			font-weight: 700;
		}
		.xz{
			color: red;
		}
		.loading{
			display:none;
		}
	</style>
</head>
<body>
	<section>
		<p class="bt center">图片(jpg/jpeg/png)转webp格式</p>
	</section>
	<section class="center"><!-- 业务核心代码 -->
		<form id="form1">
			<input type="file" multiple name="file" accept="image/png,image/gif,image/jpg,image/jpeg">
			<input type="button" value="提交" onclick="loadXMLDoc()" disabled="true">
		</form>
		<br>
		<div>
			<img class="loading" src="loading.gif" alt="loading" width="200" height="200">
			<img id="myDiv" src="" width="300">
			<p class="center"><a class="xz" id="xiazai" href="" download="webp.webp">点击下载</a>或者右击另存为,保存图片</p>  
		</div>		
	</section>
	<script>
	//设置未选择上传文件时,禁用提交按钮
	var a = document.getElementsByTagName('input')[0];
	var b = document.getElementsByTagName('input')[1];
	a.oninput = function(){
		if (a!=null&&a!="") {
			b.disabled = false;
		}
	}		
	// ajax异步请求服务器
	function loadXMLDoc()
	{	
		var loading = document.getElementsByClassName('loading')[0];
		loading.style.display = "inline";
		var form=document.getElementById("form1");
        var fd =new FormData(form);
	var xmlhttp;
	if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{	
			loading.style.display = "none";
			document.getElementById("xiazai").href = xmlhttp.responseText;
			document.getElementById("myDiv").src = xmlhttp.responseText;			
		}
	}
	xmlhttp.open("post","webp.php",true);
	xmlhttp.send(fd);
	}
</script>
</body>
</html>

后端PHP代码

<?php 
$name = $_FILES['file']['name'];//文件名
$dizhi = $_FILES['file']['tmp_name'];//图片临时地址,脚本结束则销毁
$houzhui = $_FILES['file']['type'];//图片类型
$str = md5(uniqid(mt_rand(), true));//生成唯一ID  
$zz = base64EncodeImage($houzhui,$dizhi,$str);
echo "data:image/webp;base64,".$zz;
function base64EncodeImage($houzhui,$dizhi,$str)
{
	switch ($houzhui) {
	case 'image/png':
		$im = imagecreatefrompng($dizhi);
		break;
	case 'image/gif':
		$im = imagecreatefromgif($dizhi);
		break;
	case 'image/jpeg':
		$im = imagecreatefromjpeg($dizhi);
		break;
	case 'image/jpg':
		$im = imagecreatefromjpeg($dizhi);
		break;	
	default:
		exit("上传文件格式不正确");
		break;
	}
	header("Content-type:image/webp");
	imagewebp($im,'img/'.$str.'.webp');
	imagedestroy($im);
	return base64_encode(file_get_contents('img/'.$str.'.webp'));//先将文件写入字符串,在进行base64编码
}
?>

 

 类似资料: