javascript image base64 и php image base64_encode отличаются

Question

У меня есть изображение в формате jpeg, и я пытаюсь получить строку в кодировке base64 с использованием javascript и php.

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 .

---

Теперь, с тем же изображением с 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="

---

Я сделал изменения в Javascript , которые предложил @JaromandaX, теперьНачало строки 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();