使画布中的白色像素透明
Making white pixels in canvas transparent?
im试图创建一个改变图像颜色的脚本,我找到了一种改变颜色的方法,但由于图像有白色背景,它会改变所有图像,有可能以某种方式忽略白色像素吗?
这是迄今为止的代码:
<!doctype html>
<html>
<head>
</head>
<body>
<h4>Original Image</h4>
<img id="testImage" src='../src/test.png'/>
<h4>Image copied to canvas</h4>
<canvas id="canvas" width="500" height="500"></canvas>
<h4>Modified Image copied to an image tag</h4>
<img id="imageData"/>
<script>
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
image = document.getElementById("testImage");
ctx.drawImage(image,0,0);
var imgd = ctx.getImageData(0, 0, 128, 128),
pix = imgd.data,
uniqueColor = [0,0,150]; // Blue for an example, can change this value to be anything.
// Loops through all of the pixels and modifies the components.
for (var i = 0, n = pix.length; i <n; i += 4) {
pix[i] = uniqueColor[0]; // Red component
pix[i+1] = uniqueColor[1]; // Blue component
pix[i+2] = uniqueColor[2]; // Green component
//pix[i+3] is the transparency.
}
ctx.putImageData(imgd, 0, 0);
var savedImageData = document.getElementById("imageData");
savedImageData.src = canvas.toDataURL("image/png");
</script>
</body>
</html>
这样的东西适合你吗?
if (pix[i] == 255 &&
pix[i+1] == 255 &&
pix[i+2] == 255)
{
//pixel is white
}
else
{
//pixel is not white, modify it.
}
相关文章:
- 如何通过溢出来判断元素被切断了多少像素:隐藏在父级上
- 点击facebook像素跟踪注册(JS/JQUERY代码)
- 点击(右键点击)使用传单地图库获取图像覆盖的像素坐标
- 如何使线条的边缘像素保持半透明
- 画布:逐像素绘制图像并请求动画帧计时
- 如何's css标记"-webkit最小设备像素比”;在Javascript中实现
- javascript mootools平滑滚动'x'像素数量
- 从 JavaScript 中的图像中读取像素数据会返回半透明像素的意外结果
- 使用HTML5画布和getImageData的透明像素
- 使画布中的白色像素透明
- 仅将不透明像素复制到HTML5画布
- 找到透明像素,而不使用画布
- 使用画布将不透明像素变为白色
- 如果源设置为透明像素,图像标签背景图像不显示
- 如何在js中从透明像素中获取rgb
- 点击通过透明图像像素
- 从图像读取透明像素
- 图像处理-Javascript生成dataURL格式的透明1X1像素
- 透明PNG的唯一彩色像素区域的多边形形状的减少
- 只有当所单击的像素不透明时,才会在图像上注册事件