Is there a way to use JavaScript to convert a PNG's white background to a transparent background?
I have a bunch of .pngs that have nothing but black text on a white background. Until now these have all been displayed on a white background on the screen, so there has been no problem; but now, I am changing the coloring of the background. The problem is that the text looks a bit off when set against an off-white background, so I'm开发者_如何学运维 interested in knowing whether JavaScript (jQuery is fine) is capable of converting a .png's white background to a transparent background on the fly. I am not interested in a server-side solution to this problem (e.g., a script to run through all images and do it programmatically with an image library) and the shear number of images makes a do-it-by-hand approach impractical.
Does anyone know of a way to do this? Searching didn't reveal anything. Note that I am not looking for the IE .png fix!
If there is a way, what would be the overhead associated with such a process?
Thanks for any help!
The closest thing I can think is IE specific, there is a chroma filter that might be able to do what you want (sort of like blue screen, where anything blue will be transparent, in your case, anything white will be transparent)... see: http://www.ssi-developer.net/css/visual-filters.shtml. Haven't find any equivalent for this in other browsers, nor in CSS3.
It might be possible to create a script that look for all images in the document, replace it with a canvas element, paint the image on the canvas, go through the image data pixel by pixel and if the pixel is of a certain color, change its alpha to 0 (transparent).
Here is a quick POC on that concept... You need to run this in a web server for it to work on Chrome & FF, it can run locally on IE9 beta.
Just change the image to anything with some pure white RGB(255, 255, 255) in it. It will make any white pixel in the image transparent by setting its alpha channel to 0.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
body { background-color: #00f; margin: 0px; padding: 0px; }
</style>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
</head>
<body>
<img src="test.png">
<img src="test.png">
</body>
<script type="text/javascript">
$(function() {
$("img").each(function() {
var $this = $(this);
var tim = $this.get(0);
var idx = $this.index();
var canvas = null;
var ctx = null;
var img = new Image();
img.onload = function() {
copyImageToCanvas(img);
};
img.setAttribute("src", tim.src);
function copyImageToCanvas(aImg) {
canvas = document.createElement("canvas");
var w = typeof aImg.naturalWidth == "undefined" ? aImg.width : aImg.naturalWidth;
var h = typeof aImg.naturalHeight == "undefined" ? aImg.height : aImg.naturalHeight;
canvas.id = "img" + idx;
canvas.width = w;
canvas.height = h;
$this.replaceWith(canvas);
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, w, h);
ctx.drawImage(aImg, 0, 0);
makeTransparent(aImg);
}
function makeTransparent(aImg) {
var w = typeof aImg.naturalWidth == "undefined" ? aImg.width : aImg.naturalWidth;
var h = typeof aImg.naturalHeight == "undefined" ? aImg.height : aImg.naturalHeight;
var imageData = ctx.getImageData(0, 0, w, h);
for (var x = 0; x < imageData.width; x++)
for (var y = 0; y < imageData.height; y++) {
var offset = (y * imageData.width + x) * 4;
var r = imageData.data[offset];
var g = imageData.data[offset + 1];
var b = imageData.data[offset + 2];
//if it is pure white, change its alpha to 0
if (r == 255 && g == 255 && b == 255)
imageData.data[offset + 3] = 0;
};
ctx.putImageData(imageData, 0, 0);
}
});
});
</script>
</html>
The only option I know for js image processing is Pixastic and it doesn't have the feature you want. You have to do it server side as far as I know
加载中,请稍侯......
精彩评论