7月122022
PHP上传png,jpg,jpeg图片格式并转换成webp代码
前段
<!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="" target="_blank" rel="external nofollow noopener" 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>
后端webp.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编码
}
?>
-
日历
-
存档
- 2024年10月(1)
- 2023年2月(1)
- 2022年11月(1)
- 2022年10月(10)
- 2022年9月(13)
- 2022年8月(2)
- 2022年7月(14)
- 2022年6月(2)
- 2022年5月(8)
- 2022年4月(7)
- 2022年3月(13)
- 2022年2月(2)
- 2022年1月(9)
- 2021年12月(2)
- 2021年11月(4)
- 2021年10月(2)
- 2021年9月(6)
- 2021年7月(4)
- 2021年6月(3)
- 2021年5月(3)
- 2021年4月(11)
- 2021年3月(13)
- 2021年2月(2)
- 2021年1月(1)
- 2020年12月(1)
- 2020年4月(5)
- 2019年9月(1)
- 2019年8月(1)
- 2019年5月(3)
- 2018年3月(1)
- 2017年10月(1)
- 2016年7月(1)
- 2016年4月(1)
- 2015年12月(1)
- 2015年11月(3)
- 2015年9月(1)
- 2015年8月(10)
- 2015年7月(1)
- 2015年6月(1)
- 2015年4月(1)
- 2015年3月(3)
- 2015年2月(8)
- 2015年1月(4)
- 2014年12月(1)
- 2014年11月(27)
- 2014年10月(13)
- 2014年9月(14)
- 2014年8月(26)
- 2014年7月(21)
-
最新评论
- 令狐江:
喜欢这首歌是因为可以引起共鸣！
-
链接
-
搜索
发表评论
木有头像就木JJ啦！还木有头像吗？点这里申请属于你的个性Gravatar头像吧！