canvas处理图像改色（透明度、黑白）

最新推荐文章于 2024-02-09 08:49:51 发布

KatyLight

最新推荐文章于 2024-02-09 08:49:51 发布

阅读量3.5k

点赞数 2

分类专栏： Canvas 插件文章标签： canvas

本文链接：https://blog.csdn.net/qq_33014695/article/details/122257295

版权

插件同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

Canvas

12 篇文章 0 订阅

订阅专栏

支持对黑白图片和透明的抠图后上色，适合批量制作小样式，后期改一下就可以复制完整的图片大小不多不少（制造一个隐藏canvas复制使用）；

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>
    let c;
    let ctx;
    let image;
    let src='花纹.png';
    let color=[100,100,200];
    let imageChange=true;
    let imageData;
    let isWeb=false;
    let model='1';
    window.onload=()=>{
       c=document.getElementById('c');
      ctx=c.getContext('2d');
     draw();

    }
    function draw(){
      if(imageChange){
        image=new Image();
        if(isWeb){
          image.src=src+'?v=' + Math.random();
        }
        image.src=src;
        image.crossOrigin = "*";

        image.onload=()=>{

          dataFun();
          imageChange=false;

        }
      }else{
        dataFun();
        imageChange=false;
      }

    }
    function dataFun(){
      ctx.clearRect(0,0,c.width,c.height);
      ctx.drawImage(image,0,0);
      imageData=ctx.getImageData(0,0,image.width,image.height);
      switch (model){
        case '1':
          for(let i=0;len=imageData.data.length,i<len;i+=4){
            imageData.data[i]=color[0];
            imageData.data[i+1]=color[1];
            imageData.data[i+2]=color[2];
          }
          break;
        case '2':
          for(let i=0;len=imageData.data.length,i<len;i+=4){
            imageData.data[i+3]=getGray(imageData.data[i],imageData.data[i+1],imageData.data[i+2]);
            imageData.data[i]=color[0];
            imageData.data[i+1]=color[1];
            imageData.data[i+2]=color[2];

          }
          break;
        case '3':
          for(let i=0;len=imageData.data.length,i<len;i+=4){
            imageData.data[i+3]=getGray2(imageData.data[i],imageData.data[i+1],imageData.data[i+2]);
            imageData.data[i]=color[0];
            imageData.data[i+1]=color[1];
            imageData.data[i+2]=color[2];

          }
          break;
      }

      console.log(imageData)
      ctx.clearRect(0,0,c.width,c.height);
      ctx.putImageData(imageData,0,0);
    }
    // 灰度转换
    function getGray(R, G, B) {

      return 256- (R * 299 + G * 587 + B * 114 + 500) / 1000;

    }
    // 灰度转换
    function getGray2(R, G, B) {
/*
      return   (R+G+B)/3;
      //灰度计算公式*/
      return (R * 299 + G * 587 + B * 114 + 500) / 1000;
    }
    function SrcIn(e){
      isWeb=true;
      src=e.target.value;
      imageChange=true;
      draw();

    }
    function fileIn(e){
      let file = e.target.files[0];
      isWeb=false;
      src= URL.createObjectURL(file);
      imageChange=true;
     draw();
    }

    function setColor(e){

      color=JSON.parse( e.target.value);
      imageChange=false;
      draw();
    }
    function selectChange(  e) {
      console.log(e);
      let i=e.target.selectedIndex;
      model=e.target.options[i].value;
      imageChange=false;
      draw();
    }
  </script>
</head>
<body>
<canvas width="2000" height="1000" id="c" style="border:1px solid black;"></canvas>
<input type="file" accept="image/*" onchange="fileIn(event)"/>
<span>图片网址：</span>
<input  onchange="SrcIn(event)"/>
<span>颜色数组[红色，绿色，蓝色]：</span>
<input onchange="setColor(event)"/>
<span>模式：</span>
<select onchange="selectChange(event)">
  <option value="1">透明底</option>
  <option value="2">白底黑字</option>
  <option value="3">黑底白字</option>
</select>
</body>
</html>