将图片从URL转换为base64

Question

我有一个图片网址，我需要将其转换为base 64

我正在尝试图像加载，但是在base64中却无法获取

var url = "http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png";

var image = new Image();
image.onload = function(e) {
  console.log("herE", e);
};
image.src = url;

这是演示

Answer 1

您尝试使用FileReader Api吗？

 function base64FromUrl(url){ return new Promise(function(resolve, reject) { var xhr = new XMLHttpRequest(); xhr.responseType = 'blob'; xhr.onload = function() { var reader = new FileReader(); reader.onloadend = function () { resolve(reader.result); } reader.readAsDataURL(xhr.response); }; xhr.open('GET', url); xhr.send(); }); } base64FromUrl("http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png") .then(function(res) { document.write(res); }) 

Answer 2

• 创建canvas元素
• 在画布上绘制图像
• 使用HTMLCanvasElement.toDataURL() ，返回包含image表示形式的data URI 。

 var url = "http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png"; var image = new Image(); image.setAttribute('crossOrigin', 'anonymous'); image.onload = function(e) { var canvas = document.createElement('canvas'); var ctx = canvas.getContext("2d"); canvas.width = this.width; canvas.height = this.height; ctx.drawImage(image, 0, 0, image.width, image.height); console.log(canvas.toDataURL()); }; image.src = url;