Javascript konvertiert den absoluten Pfad des Bildes in die Base64-Kodierung

In diesem Artikel wird hauptsächlich die Javascript-Methode zum Konvertieren des absoluten Pfads eines Bildes in die Base64-Codierung vorgestellt. Ich denke, sie ist ziemlich gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und werfen wir einen Blick darauf. Ich hoffe, es hilft allen.

Wir können die Methode „canvas.toDataURL“ verwenden, um den absoluten Pfad des Bildes in Base64-Codierung umzuwandeln. Hier zitieren wir ein Bild auf der Taobao-Homepage wie folgt:

Der Code lautet wie folgt:

var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg";

Wir schreiben den Code wie folgt:

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, img.width, img.height);
    var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
    var dataURL = canvas.toDataURL("image/"+ext);
    return dataURL;
}
var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg";
var image = new Image();
image.src = img;
image.onload = function(){
  var base64 = getBase64Image(image);
  console.log(base64);
}

Chrome läuft so:

Durch die Suche haben wir herausgefunden, dass wir ein Bild auf dem Taobao-Server verwenden und unter dem lokalen Server darauf zugegriffen haben. Infolgedessen gab es ein domänenübergreifendes Problem mit dem Bild. Bisher können wir das Bild unter dem lokalen Server ablegen, um das domänenübergreifende Problem zu lösen. Ich kann es jetzt mit dem folgenden Code auf dem Taobao-Server speichern

var img = "http://127.0.0.1/base64/1.jpg";
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, img.width, img.height);
  var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
      var dataURL = canvas.toDataURL("image/"+ext);
  return dataURL;
}
var image = new Image();
image.src = img;
image.onload = function(){
  var base64 = getBase64Image(image);
  console.log(base64);
}

Aber manchmal: Wie sollen wir das Problem lösen, wenn wir auf Bilder von anderen Servern verweisen möchten? Wir können den folgenden Code verwenden, um unter Chrome und Firefox wirksam zu werden. Der folgende Code scheint derzeit nicht unterstützt zu werden:

image.crossOrigin = '';

Alle Codes lauten wie folgt:

var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg";
//var img = "http://127.0.0.1/base64/1.jpg";
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, img.width, img.height);
  var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
  var dataURL = canvas.toDataURL("image/"+ext);
  return dataURL;
}
var image = new Image();
image.crossOrigin = '';
image.src = img;
image.onload = function(){
  var base64 = getBase64Image(image);
  console.log(base64);
}

Der obige Code wurde unter Chrome und Firefox getestet und ist wirksam, wird jedoch derzeit in Safari nicht unterstützt

Verwandte Empfehlungen:

So verwenden Sie den absoluten Pfad und den relativen Pfad von HTML

So verwenden Sie den Verzeichnisnamen( __FILE__) in PHP, um den absoluten Pfad der aktuellen Datei zu erhalten

Detaillierte Erklärung des Unterschieds zwischen relativen Pfaden und absoluten Pfaden

Das obige ist der detaillierte Inhalt vonJavascript konvertiert den absoluten Pfad des Bildes in die Base64-Kodierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!