laravel - 在laravel中将.heic图像转换为jpg图像格式

Question

我添加了干预/图像包来转换 laravel 中的图像格式。

图像转换成功，但上传后图像质量太差了。

原始图像

上传图片

$img =(string) Image::make($image['base64'])
    ->resize(500, 500)->encode('jpg',100);;
$img = base64_encode($img);

Answer 1

要转换 Heic 图像，您必须使用 imagick，您可以使用它来代替吗

这是如何安装https://ourcodeworld.com/articles/read/645/how-to-install-imagick-for-php-7-in-ubuntu-16-04

try {
    $image = new \Imagick();
    $image->readImageBlob($image['base64']));
    $image->setImageFormat("jpeg");
    $image->setImageCompressionQuality(100);
    $image->writeImage($targetdir.$uid.".jpg"); 
} 
catch (\ImagickException $ex) {
    /**@var \Exception $ex */
    return new JSONResponse(["error" => "Imagick failed to convert the images, check if you fulfill all requirements." , "details" => $ex->getMessage()], Http::STATUS_INTERNAL_SERVER_ERROR);
}

Answer 2

heic2any js 库帮助我完成了这个（https://github.com/alexcorvi/heic2any/blob/master/docs/getting-started.md）

在客户端，我将图片转换，然后将其提供给服务器输入。服务器看到它，因为它最初是作为 PNG 上传的。

    $('#files').on('change' , function(){
          var total_file=document.getElementById("files").files.length;
 
        for(var i=0;i<total_file;i++)
        {
          files = event.target.files[i];
          var fileName = files.name;
          var fileNameExt = fileName.substr(fileName.lastIndexOf('.') + 1);
          objURL = URL.createObjectURL(event.target.files[i]);
          if(fileNameExt == "heic") {
            objURL = await convertHeicToJpg(input , i);
       
         }
        })
        
        async function convertHeicToJpg(input , i)
                {
                        var blobfile = $(input)[0].files[i]; //ev.target.files[0];
            
                        let blobURL = URL.createObjectURL(blobfile);
                    
                        // convert "fetch" the new blob url
                        let blobRes = await fetch(blobURL)
            
                        // convert response to blob
                        let blob = await blobRes.blob()
            
                        // convert to PNG - response is blob
                        let resultBlob = await heic2any({ blob })
            
                        console.log(resultBlob)
                        var url = URL.createObjectURL(resultBlob);
                               
                        let fileInputElement = $(input)[0];
                        let container = new DataTransfer();
                        let file = new File([resultBlob], "heic"+".png",{type:"image/png", lastModified:new Date().getTime()});
                        container.items.add(file);
            
                        fileInputElement.files[0] = container.files;
                        uploadFile(container.files);
                        console.log("added");
                        console.log(url);
                        
                        return url ;
               
                }
            
            function uploadFile(files)
            {
              
              console.log(files);
              var error = '';
              var form_data = new FormData();
              for(var count = 0; count<files.length; count++)
              {
               var name = files[count].name;
               var extension = name.split('.').pop().toLowerCase();
               form_data.append("files[]", files[count]);
              }
               $.ajax({
                url:"<?php echo base_url(); ?>Property/upload", 
                method:"POST",
                data:form_data,
                contentType:false,
                cache:false,
                processData:false,
                dataType:'JSON',
                beforeSend:function(){
                    //..processing  
                },
                success:function(data)
                {
                  
                  alert('image uploade')
                }
               })
             
            }    

Answer 3

有点晚了，但我遇到了同样的问题。我设法用 heic2any js 库（https://github.com/alexcorvi/heic2any/blob/master/docs/getting-started.md）做到了

我在客户端转换了图片，然后将其提供给客户端的输入。服务器看到它，因为它最初是作为 jpg 上传的。

    function convertHeicToJpg(input)
    {
        var fileName = $(input).val();
        var fileNameExt = fileName.substr(fileName.lastIndexOf('.') + 1);
        if(fileNameExt == "heic") {
            var blob = $(input)[0].files[0]; //ev.target.files[0];
            heic2any({
                blob: blob,
                toType: "image/jpg",
            })
                .then(function (resultBlob) {

                    var url = URL.createObjectURL(resultBlob);
                    $(input).parent().find(".upload-file").css("background-image", "url("+url+")"); //previewing the uploaded picture
                    //adding converted picture to the original <input type="file">
                    let fileInputElement = $(input)[0];
                    let container = new DataTransfer();
                    let file = new File([resultBlob], "heic"+".jpg",{type:"image/jpeg", lastModified:new Date().getTime()});
                    container.items.add(file);

                    fileInputElement.files = container.files;
                    console.log("added");
                })
                .catch(function (x) {
                    console.log(x.code);
                    console.log(x.message);
                });
        }
    }

    $("#input").change(function() {
            convertHeicToJpg(this);

     });

我正在做的是将heic图片转换为jpg，然后预览它。之后，我将其添加到原始输入中。服务器端会将其视为上传的 jpg。转换时可能会出现一些延迟，因此我在上传时放置了一个加载器 gif。