javascript 图像 base64 和 php 图像 base64_encode 不同

Question

我有一个 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 建议的Javascript进行了更改，现在 Javascript 字符串的开头看起来很相似，但不是结尾。

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

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

Answer 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); });

Answer 2

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

“一个是来自源代码 (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();