Javascript convertit le chemin absolu de l'image en codage base64

Cet article présente principalement la méthode Javascript pour convertir le chemin absolu d'une image en encodage base64. Je pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l’éditeur et jetons un coup d’œil. J'espère que cela aide tout le monde.

Nous pouvons utiliser la méthode canvas.toDataURL pour convertir le chemin absolu de l'image en codage base64 ; nous citons ici une image sur la page d'accueil de Taobao comme suit :

Le code est comme suit :

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

Nous écrivons le code comme suit :

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 fonctionne comme ceci :

Grâce à la recherche, nous avons découvert que nous utilisions une image sur le serveur Taobao et y avons accédé sous le serveur local. En conséquence, il y a eu un problème inter-domaines avec l'image ; jusqu'à présent, nous pouvons mettre l'image sous le serveur local pour résoudre le problème ci-dessus. Par exemple, j'enregistre maintenant les images sur le serveur Taobao sur le serveur local ;

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

Mais parfois, comment doit-on résoudre le problème lorsque l'on souhaite référencer des images provenant d'autres serveurs ? Nous pouvons utiliser le code suivant pour prendre effet sous chrome et firefox Il ne semble pas être supporté sous safari6 actuellement :

image.crossOrigin = '';

. Tous les codes sont les suivants :

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

Le code ci-dessus a été testé et efficace sous Chrome et Firefox, mais n'est actuellement pas pris en charge dans Safari

Recommandations associées :

Comment utiliser le chemin absolu et le chemin relatif du html

Comment utiliser dirname( __FILE__) en php pour obtenir le chemin absolu du fichier actuel

Explication détaillée de la différence entre les chemins relatifs et les chemins absolus

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!