js实现修改图片的底色

以下代码主要实现修改png/jpg图片的底色,就目前使用到的而言作用不大,主要用于学习。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modify Image Color</title>
</head>
<body>
  <img id="originalImage" src="./test.png">
  <canvas id="canvas" style="display: none;"></canvas>

  <script>
    var img = document.getElementById('originalImage');
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    img.onload = function() {

      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

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

      // 修改像素数据中的颜色,这里简单地对每个像素进行颜色调整
      for (var i = 0; i < data.length; i += 4) {
        // 将每个像素的红色通道设置为0,绿色通道设置为当前值,蓝色通道设置为0,保留透明通道值不变
        data[i] = 255;        // Red
        data[i + 1] = 0;    // Green
        data[i + 2] = 0;    // Blue

      }

      // 将修改后的像素数据重新绘制到canvas上
      ctx.putImageData(imageData, 0, 0);
      // 将canvas转换为DataURL以便在<img>标签中显示修改后的图像
      var modifiedImageURL = canvas.toDataURL();

      // 将修改后的图像显示在页面上
      var modifiedImgElement = document.createElement('img');
      modifiedImgElement.src = modifiedImageURL;
      document.body.appendChild(modifiedImgElement);
    };
  </script>
</body>
</html>

相关推荐

  1. js实现修改图片底色

    2024-03-21 17:32:03       44 阅读
  2. js实现图片放大镜

    2024-03-21 17:32:03       41 阅读
  3. js修改hash方法

    2024-03-21 17:32:03       18 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-21 17:32:03       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-21 17:32:03       106 阅读
  3. 在Django里面运行非项目文件

    2024-03-21 17:32:03       87 阅读
  4. Python语言-面向对象

    2024-03-21 17:32:03       96 阅读

热门阅读

  1. jupyter | jupyter里执行shell命令

    2024-03-21 17:32:03       37 阅读
  2. 人工智能在心理健康评估和干预中的应用

    2024-03-21 17:32:03       44 阅读
  3. 单片机复位问题分析

    2024-03-21 17:32:03       41 阅读
  4. 深入理解 Linux 函数参数

    2024-03-21 17:32:03       48 阅读
  5. 常用数据库比较

    2024-03-21 17:32:03       45 阅读
  6. Tabulator-tables5.6版本升级6.0版本

    2024-03-21 17:32:03       40 阅读
  7. Python一句话生成九九乘法表

    2024-03-21 17:32:03       44 阅读