js实现任意更改base64字符串图片的颜色，封装函数

这篇文章距离上次修改已过221天，其中的内容可能已经有所变动。

在JavaScript中，可以通过Canvas API来修改base64编码的图片颜色。以下是一个简单的函数，用于将base64字符串的图片转换为灰度图像，并返回新的base64字符串。

function convertToGrayscale(base64Image) {
  // 创建Image对象
  var img = new Image();
  img.src = base64Image;

  // 等待图片加载完成
  img.onload = function() {
    // 创建Canvas元素
    var canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;

    // 获取Canvas 2D上下文
    var ctx = canvas.getContext('2d');

    // 绘制图片到Canvas
    ctx.drawImage(img, 0, 0);

    // 获取图片数据
    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

    // 转换为灰度图
    for (var i = 0; i < imageData.data.length; i += 4) {
      var r = imageData.data[i];
      var g = imageData.data[i + 1];
      var b = imageData.data[i + 2];

      // 计算灰度值
      var gray = 0.3 * r + 0.59 * g + 0.11 * b;

      // 设置新的颜色值
      imageData.data[i] = gray; // Red channel
      imageData.data[i + 1] = gray; // Green channel
      imageData.data[i + 2] = gray; // Blue channel
    }

    // 将修改后的图片数据放回Canvas
    ctx.putImageData(imageData, 0, 0);

    // 导出为base64字符串
    var newBase64Image = canvas.toDataURL();

    // 返回新的base64字符串
    return newBase64Image;
  };
}

// 使用示例
var base64Image = 'data:image/png;base64,...'; // 这里是原始的base64字符串
var grayscaleBase64Image = convertToGrayscale(base64Image);

这个函数首先创建了一个Image对象，然后在图片加载完成后，创建了一个Canvas，并将图片绘制到Canvas上。使用getImageData获取到图片的像素数据，然后通过计算转换为灰度图像，最后使用putImageData将转换后的图像数据放回Canvas，并使用toDataURL方法获取新的base64字符串。

注意：这个函数是异步执行的，因为它依赖于图片加载完成的事件。如果需要在图片加载完成之前执行其他操作，可以使用Promise或者其他异步处理方式来改写这个函数。

js实现任意更改base64字符串图片的颜色，封装函数

评论已关闭

推荐阅读