javascript image base64 和 php image base64_encode 是不同的答案

【问题标题】：javascript image base64 and php image base64_encode are differentjavascript image base64 和 php image base64_encode 是不同的
【发布时间】：2019-04-18 02:00:28
【问题描述】：

我有一个 jpeg 图像，我正在尝试使用 javascript 和 php 获取 base64 编码的字符串。

function getBase64Image(img) {
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL("image/jpg");
  return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

var base64 = getBase64Image(document.getElementById('myImg'));
console.log(base64)

这里是javascript fiddle。

现在，用 php 代码使用相同的图像

$url = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/SIPI_Jelly_Beans_4.1.07.tiff/lossy-page1-256px-SIPI_Jelly_Beans_4.1.07.tiff.jpg" 

var_dump(base64_encode(file_get_contents($url));

// The Javascript result:
"iVBORw0KGgoAAAANSUh......LGoT8H4JpIaDthj+xAAAAAElFTkSuQmCC"

// The PHP result:
"/9j/4AAQSkZJRgABAQA......nbKBwJCElGEDnboCdvdE5pDlGThLlNC/9k="

我制作了@JaromandaX 建议的changes in Javascript，现在 Javascript 字符串的开头看起来相似但不是结尾。

var dataURL = canvas.toDataURL("image/jpeg");
return dataURL.replace(/^data:image\/(png|jpeg);base64,/, "");

新的 Javascript 输出： "/9j/4AAQSkZJRgABAQA......A4EhCSjCBzt0BO3uic0hyjccJcpoX//2Q=="

【问题讨论】：

Encode Base64 in JavaScript, send with GET, decode in PHP的可能重复
您在 javascript 中有一个 PNG，在 php 中有一个 JPEG - 所以，它们当然会有所不同
如果您想要 jpeg，请尝试使用 "image/jpeg" 类型 - 您还需要 /^data:image\/(png|jpeg);base64,/
@JaromandaX 我做了你建议的改变（检查 OP），但结局仍然不一样。
一个是源文件（PHP）的直接文件......另一个是画布 - 所以，一些“处理”很可能已经完成

标签： javascript php base64

【解决方案1】：

问题是，您正在将 jpeg 读取到画布中，然后从画布中生成 jpeg ...因此正在进行一些处理（例如 jpeg 质量设置会有所不同）

要在 javascript 中获得相同的结果，只需不要使用画布 - 获取图像，并使用 Blob + FileReader 提取 base64

fetch('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/SIPI_Jelly_Beans_4.1.07.tiff/lossy-page1-256px-SIPI_Jelly_Beans_4.1.07.tiff.jpg').then(r => r.blob()).then(blob => {
    var reader = new FileReader();
    reader.onload = function() {
        var b64 = reader.result.replace(/^data:.+;base64,/, '');
        console.log(`${b64.slice(0,20)}...${b64.slice(-20)}`);
    };
    reader.readAsDataURL(blob);
});

【讨论】：

您的解决方案更好！非常感谢
这也适用于 SVG 吗？我的意思是 SVG 到 PNG 的转换？

【解决方案2】：

正如@JaromandaX 在 cmets 中建议的那样，

“一个是源文件（PHP）的直接文件......另一个是画布 - 所以，一些“处理”很可能已经完成”

使用这个块得到完全相同的 base64 字符串：

var url = document.getElementById('myImg').getAttribute('src')
var xmlHTTP = new XMLHttpRequest();
xmlHTTP.open('GET', url, true);
xmlHTTP.responseType = 'arraybuffer';
xmlHTTP.onload = function(e) {
  var arr = new Uint8Array(this.response);
  var raw = String.fromCharCode.apply(null,arr);
  var b64 = btoa(raw);
  var dataURL="data:image/png;base64," + b64;
  console.log(b64)
};
xmlHTTP.send();

【讨论】：