下面填充虚拟透明内容
我想在JPEG图像中蒙版一个全白色(R:255,G:255,B:255)区域，所以当在浏览器中查看时，在全白色区域中我将看到下面的内容(这些区域将是透明的)。我不介意使用JQuery, css3或Canvas，无论什么工作来实现这一点。由于
好的，代码:
<body style="background-color:red;">
<canvas id="myCanvas" width="228" height="454"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = 0;
var y = 0;
var width = 228;
var height = 454;
var imageObj = new Image();
imageObj.onload = function ()
{
context.drawImage(imageObj, x, y, width, height);
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var imgData = ctx.getImageData(0, 0, width, height);
var pixels = imgData.data; // get pixel data
for (var i = 0; i < pixels.length; i +=4)
{
var r = pixels[i ];
var g = pixels[i + 1]
var b = pixels[i + 2];
if (r === 255 && g === 255 && b === 255) {
pixels[i + 3] = 1;
}
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.putImageData(imgData, 0, 0);
};
imageObj.src = 'img/test_image.jpg';
</script>
</body>
这段代码似乎完成了工作，但是我得到一些分散的白点在全白的区域
您的代码看起来相当正确，但我建议您进行以下更改:
您将画布大小设置为228x454，但是如果您的图像稍微不同的大小，那么当您将绘制到画布时，您可能会不小心缩放源图像。因此，将画布缩放到图像大小:
imageObj.onload=function(){
canvas.width=imageObj.width; // be sure canvas is *exactly* image sized to prevent
canvas.height=imageObj.height; // accidental scaling which might skew pixel colors
你把"透明"像素设置为1，而你应该把它们设置为0来实现完全透明:
pixels[i+3]=0; // 0 instead of 1 for pure transparency
你只屏蔽纯白色——rgb(255,255,255)。有可能你的图像中的一些像素是"接近"白色的，所以你也可以试着屏蔽一些接近白色的像素。
var nearWhite=250; // try experimenting with different “near white” values
if(r>nearWhite && g>nearWhite && b>nearWhite)
[编辑:提供完整代码]
这是代码(在我的电脑上为我工作)。
确保您的图像源在本地域上，否则您将遇到安全违规，图像将绘制，但白色像素将不透明。所以没有http://otherDomain.com/picture.jpg!
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function () {
canvas.width=imageObj.width;
canvas.height=imageObj.height;
ctx.drawImage(imageObj, 0,0);
var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var pixels = imgData.data; // get pixel data
for (var i = 0; i < pixels.length; i +=4)
{
var r = pixels[i ];
var g = pixels[i + 1]
var b = pixels[i + 2];
if (r>250 && g>250 && b>250) {
pixels[i + 3] = 0;
count++;
}
}
ctx.putImageData(imgData, 0, 0);
}
imageObj.src="car.jpg";
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
可以创建一个画布，并使用图像中的相应像素值填充像素值。如果像素是白色的rgb(255,255,255)，则将alpha设置为1。我不确定这是否可行，只是一个想法。
像素处理教程
有一个解决方案可以为现有的JPEG图像添加alpha通道并在浏览器中呈现:https://jim.studt.net/jpeg-alpha/.
据我所知，jpeg没有透明度选项。你需要使用PNG或者你需要在