使 Canvas 透明

Question

我有一个 ID 为 #cnv 的 canvas。

<canvas id="cnv"></canvas>
<img id="img" src=""></img>

我使用以下代码将 canvas 转换为图像：

var a = document.getElementById("img");
a.src = document.getElementById("cnv").toDataURL();

这样做之后，我将图像保存在物理中disk.Below是结果图像：

它的背景是白色的，不透明。我想让图像透明，除了绘制到 it.How 中的线条，我可以这样做吗？

Answer 1

您可以使用 context.getImageData 获取绘制到 canvas 的图像的 rgba 像素数据。然后剔除白色值——只留下黑色线条。

这是带注释的代码和演示：

// load the image into a new image object
var img=new Image();
img.crossOrigin='anonymous';
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/bk.png";
function start(){

  // create a canvas element
  var canvas=document.createElement("canvas");
  var ctx=canvas.getContext("2d");

  // size the canvas to the image size
  canvas.width=img.width;
  canvas.height=img.height;

  // draw the image onto the canvas
  ctx.drawImage(img,0,0);

  // get the pixel data of the canvas
  var imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
  var data=imgData.data;

  // make any pure white pixel transparent: data[i+3]=0
  // Note: if needed, lower threshold slightly to catch "off-whites" 
  var threshold=255;
  for(var i=0;i<data.length;i++){
    if(data[i]==threshold && data[i+1]==threshold && data[i+2]==threshold){
      data[i+0]=0;
      data[i+1]=0;
      data[i+2]=0;
      data[i+3]=0;
    }
  }

  // put the modified pixels back on the canvas
  ctx.putImageData(imgData,0,0);

  // create an image from the canvas contents
  // and add that image to the page
  var img1=new Image();
  img1.onload=function(){
    document.body.appendChild(img1);
  }
  img1.src=canvas.toDataURL();


}

<h4>Image with pure white knocked out</h4>
<br>

使 Canvas 透明

Make a Canvas Transparent

javascript

html5-canvas