在项目中,我们经常会使用到 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图片数据