如何使用php将图像文件作为数据url读取

问题描述：

In javascript, I read the file data by binding the on-change method to the file input and saving the file data into another input using the following code

$("#release_cover_custom").on('change', function (evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

        // Only process image files.
        if (!f.type.match('image.*')) {
            continue;
        }

        var reader = new FileReader();

        // Closure to capture the file information.
        reader.onload = (function (theFile) {
            return function (e) {
                $("#release_cover_custom_data").val(e.target.result);
            };
        })(f);

        // Read in the image file as a data URL.
        reader.readAsDataURL(f);
    }


});

why i use the above code?, to store the image data, because i have a form where i provide settings for the email template that would be sent later and there i have to provide the background image to be used inside the email, i need to preview the email with all the settings and along with the background image provided to upload before saving the form or uploading the image, so i read the image data, save it to an input and then open a modal window to preview email and post all the necessary variables there including the image data which is then used in the following way inside the css to apply the background-image like below in my php view file

background-image:url('" . $background_image . "') !important;

Now i want to do the achieve the same thing via php, means if i have the image saved to a path and i want to read the image data and use it in the same way i did using javascript to futher pass it to the css property,

i tried to use base64_encode(file_get_contents('path/to/file'))

but the encoding seems to be different for the image data, as the background image is not shown should i be using some other method to achieve it in php.

在javascript中，我通过将on-change方法绑定到文件输入并保存文件数据来读取文件数据使用以下代码进入另一个输入 p>

  $（“＃release_cover_custom”）。on（'change'，function（evt）{
 var files = evt.target.files  ; // FileList对象
 
 //循环遍历FileList并以缩略图的形式呈现图像文件。
 for（var i = 0，f; f = files [i]; i ++）{
 
 //仅限 处理图像文件。
 if（！f.type.match（'image。*'））{
 continue; 
} 
 
 var reader = new FileReader（）; 
 
 //关闭到 捕获文件信息。
 reader.onload =（function（theFile）{
 return function（e）{
 $（“＃release_cover_custom_data”）。val（e.target.result）; 
}; 
  }）（f）; 
 
 //在图像文件中读取数据URL。
 reader.readAsDataURL（f）; 
} 
 
 
}）; 
  code>  
 
 为什么我使用上面的代码？ 存储图像数据，因为我有一个表单，我提供了稍后发送的电子邮件模板的设置，我必须提供在电子邮件中使用的背景图像，我需要预览具有所有设置的电子邮件 并且在保存表格或上传图像之前提供上传的背景图像，所以我读取图像数据，将其保存到输入，然后打开模态窗口预览电子邮件并发布所有必要的变量，包括图像数据 然后在css中使用以下方式在我的php视图文件中应用如下所示的背景图像 p> 
 
 
  background-image：url（'“。  $ background_image。  “'）！important;  code>  p> 
 
 
现在我想通过php实现相同的功能，意味着如果我将图像保存到路径并且我想阅读 图像数据和使用它我使用javascript进一步传递给css属性， p> 
 
 

我试图使用 base64_encode（file_get_contents（'path / to / file）  '）） code>  p> 
 
 
但是图像数据的编码似乎有所不同，因为我没有显示背景图像，我应该使用其他方法在php中实现它。   p> 
  div>

答

@quagaar reply helped me solve the problem and replaced the following

$background_image=base64_encode(file_get_content('/path/to/file'));

with

$background_image='data:image/png;base64,'.base64_encode(file_get_content('/path/to/file'));

and everything works fine as expected.

EDIT:

between i was dealing with images only and if you are working with Images only and you need mime type (e.g. for headers, or like my case), then this is a fast and reliable technique:

$file = 'path/to/image.jpg';
$image_mime = image_type_to_mime_type(exif_imagetype($file));

It will output true image mime type even if you rename your image file.

如何使用php将图像文件作为数据url读取

相关推荐