作为程序员一定要保持良好的睡眠,才能好编程

base64转换为图片-图片转换为base64

发布时间:2020-04-28

在项目中,我们经常会使用到 base64的数据,那么base64传输图片是怎么进行传递的?



跨域问题
当img的地址存在跨域时,而且服务器不允许跨域,这样是转换不了的,当服务器允许跨域时,前端的图片也要设置跨域image.crossOrigin = 'anonymous';



PHP

<?php
$img = 'test.jpg';
$base64_img = base64EncodeImage($img);
  
echo '<img src="' . $base64_img . '" />';

function base64EncodeImage ($image_file) {
  $base64_image = '';
  $image_info = getimagesize($image_file);
  $image_data = fread(fopen($image_file, 'r'), filesize($image_file));
  $base64_image = 'data:' . $image_info['mime'] . ';base64,' . chunk_split(base64_encode($image_data));
  return $base64_image;
}


读取远程图片并转换成 base64

  public static function img2Base64($imageFile)
    {
        $base64Image = '';
        if (empty($imageFile)) {
            return $base64Image;
        }
        $image_info = getimagesize($imageFile);
        $imgContent = file_get_contents($imageFile);
        $base64Image = 'data:' . $image_info['mime'] . ';base64,' . base64_encode($imgContent);
        return $base64Image;

    }
    
    
   //调用方式
   
   img2Base64('http://www.baidu.com/ab.jpg');



在http中传输base64编码的字符串需要注意事项是什么?


这是一个base64的图片url



$pic = 'data:image/png;base64,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
Lz7MQwEACBAAAAGCS4ADrwEQIFiQsSDFDYAAQQVmr6OpdNcvABAgV7nsrM0gP2sPacI2eDEACBDM
bcwpL96RUHGHOQBcDOxEfxEbnHVo3qZRV289wgF0AAgQzONIXbF4gwVf7+hNcvQ1AAIElQdIXc7T
x/Yk1DHJIl4ABAgq5AYMfeaZiYqPMQeAanAWFgBgQViFBQAgQAAABAgAgAABABAgAAAQIAAAAgQA
QIAAAAgQAAABAgAAAQIAIEAAAAQIAIAAAQAQIAAAECAAAAIEAECAAAAIEAAAAQIAAAECACBAAAAE
CACAAAEAECAAABAgAAACBABAgAAACBAAAAECAAABAgAgQAAABAgAgAABABAgAAAQIAAAAgQAQIAA
AAgQAAAIEAAAAQIAIEAAAAQIAIAAAQCAAAEAECAAAAIEAECAAAAIEAAACBAAAAECACBAAAAECACA
AAEAgAABABAgAAACBABAgAAACBAAAAgQAAABAgAgQAAABAgAgAABAIAAAQAQIAAAAgQAQIAAAAgQ
AAAIEAAAAQIAIEAAAAQIAIAA4RUAAAgQAAABAgAgQAAAL0L/D9VrkTUjIj29AAAAAElFTkSuQmCC';




在base64需要  chunk_split(base64_encode($image_data));

$base64_image = 'data:'.$imgInfo['mime'].';base64,' . chunk_split(base64_encode($image_data));



符合RFC 2045 语义




data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据