基本原理：前端使用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编码}?>
