webp文件上传格式转换前端解决方案及php端解决方案

最新推荐文章于 2024-04-22 19:31:22 发布

vitasa

最新推荐文章于 2024-04-22 19:31:22 发布

阅读量843

点赞数

分类专栏： js php tp 文章标签： php html5 javascript

本文链接：https://blog.youkuaiyun.com/vitasa/article/details/120731566

版权

php 同时被 3 个专栏收录

3 篇文章

订阅专栏

1 篇文章

订阅专栏

1 篇文章

订阅专栏

博客讲述了在处理webp格式图片时遇到的问题，即使用GD库进行尺寸压缩时getimagesize函数无法获取文件信息。提出了两种解决方案：1) 前端通过canvas将webp转为base64编码再提交；2) 后端通过读取文件前16字节判断文件类型，然后用GD库转换为其他格式。但第二种方法可能使图片质量发生变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webp文件上传到服务端后，本来所有的图片文件都使用的GD库进行尺寸压缩，但getimagesize函数获取webp文件信息失败，导致脚本运行异常中断

尝试了两种解决方案

1.前端监听文件选择后，将文件直接通过canvas转换成base64编码后提交，后端另存成png文件

function convertImgToBase64(input, callback) {
    var file=input.files[0],url = null;
    if (window.createObjectURL != undefined) {
        url = window.createObjectURL(file);
    } else if (window.URL != undefined) {
        url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) {
        url = window.webkitURL.createObjectURL(file);
    }
    var canvas = document.createElement('CANVAS'),
        ctx = canvas.getContext('2d'),
        img = new Image;
    img.onload = function() {
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0, 0);
        var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
        var dataURL = canvas.toDataURL('image/' + ext);
        callback(dataURL);
    };
    img.src = url;
}

$('#input').on('change',function(){
       convertImgToBase64(this, function(imgdata){
            //dosomething
        })
});

2.文件上传后，读取文件前16字节判断是否包含webp字符串，有则判定为webp文件，用GD库进行转换，转换为jpeg或png格式保存，但这个方法转换的图片前后有变化，有知道怎么搞的请留言给我，多谢

$file='a.webp';
$newfile='a.jpeg';
if(strpos(strtolower(file_get_contents('.' . $file,false,null,0,16)), 'webp')){
    if($webp = imagecreatefromwebp('.' . $file)){
       imagejpeg($webp,'.' . $newfile,100);
       imagedestroy($webp);
    }
}