javascript从image转换为base64位编码的String

下面是JavaScript将Image转换为Base64位编码的字符串的完整攻略：

一、背景介绍

在JavaScript中，将图片转换为Base64编码的字符串可以非常方便地实现图片预加载、图片上传、图片存储等多种功能，而不必通过服务器进行处理。

二、步骤说明

1. 创建一个Image对象

var img = new Image();

1. 指定Image对象的src属性为需要转换的图片的url

img.src = 'https://example.com/image.png';

1. 将Image对象渲染到Canvas画布上

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);

1. 获取Canvas画布上的ImageData对象

var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

1. 将ImageData对象转换为Base64编码的字符串

var base64String = canvas.toDataURL('image/png');

1. 截取Base64编码的字符串中的实际内容

var base64Content = base64String.split(',')[1];

至此，我们完成了JavaScript将Image转换为Base64编码的字符串的过程。

三、示例演示

示例一：将图片转换为Base64编码的字符串，并在控制台打印输出

var img = new Image();
img.src = 'https://example.com/image.png';
img.onload = function() {
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0, img.width, img.height);
  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  var base64String = canvas.toDataURL('image/png');
  var base64Content = base64String.split(',')[1];
  console.log(base64Content);
}

示例二：将多张图片转换为Base64编码的字符串，并在控制台打印输出

var urls = ['https://example.com/image1.png', 'https://example.com/image2.png', 'https://example.com/image3.png'];
var base64Contents = [];
var count = 0;
for (var i = 0; i < urls.length; i++) {
  var img = new Image();
  img.src = urls[i];
  img.onload = function() {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0, img.width, img.height);
    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    var base64String = canvas.toDataURL('image/png');
    var base64Content = base64String.split(',')[1];
    base64Contents.push(base64Content);
    count++;
    if (count === urls.length) {
      console.log(base64Contents);
    }
  }
}