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建议的changes in 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();

javascript图像base64和php图像base64_encode不同

2 个答案: