Skip to content

Instantly share code, notes, and snippets.

/Alpha-transparent-JPEGs.html

Created November 10, 2010 14:53
Show Gist options
  • Save anonymous/670942 to your computer and use it in GitHub Desktop.
Save anonymous/670942 to your computer and use it in GitHub Desktop.
Download ZIP
Using <canvas> element to enable JPEG transparency by using one as the source and the other for a bitmap mask.
Raw
Alpha-transparent-JPEGs.html
<!DOCYTPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Alpha blender</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<style type="text/css">
html { background: black; }
</style>
</head>
<body>
<img src="bird.jpg" data-alpha="bird-alpha.jpg" alt="Twitter Bird, with alpha" id="source"/>
<script>
(function($) {
$(function() {
var loaded = 0;
var c = $('<canvas/>').attr({
width: $("#source").width(),
height: $("#source").height()
}).insertAfter("#source");
var canvas = c.get(0);
var ctx = c.get(0).getContext("2d");
var canvasData = ctx.createImageData(canvas.width, canvas.height);
var original = $('<canvas/>').attr({
width: canvas.width,
height: canvas.height
}).insertAfter(canvas);
var originalImage = new Image();
originalImage.src = $("#source").attr("src");
$(originalImage).load(function() { if(++loaded == 2) { drawAlpha(); } });
var alpha = $('<canvas/>').attr({
width: canvas.width,
height: canvas.height
}).insertAfter(original);
var alphaImage = new Image();
alphaImage.src = $("#source").attr("data-alpha");
$(alphaImage).load(function() { if(++loaded == 2) { drawAlpha(); } });
var drawAlpha = function() {
var octx = original.get(0).getContext('2d');
var actx = alpha.get(0).getContext('2d');
octx.drawImage(originalImage, 0, 0);
actx.drawImage(alphaImage, 0, 0);
var ogd = octx.getImageData(0, 0, original.get(0).width, original.get(0).height);
var agd = actx.getImageData(0, 0, alpha.get(0).width, alpha.get(0).height);
for(var y = 0; y < canvasData.height; y++) {
for(var x = 0; x < canvasData.width; x++) {
var idx = (x + y * canvasData.width) * 4;
canvasData.data[idx + 0] = ogd.data[idx + 0];
canvasData.data[idx + 1] = ogd.data[idx + 1];
canvasData.data[idx + 2] = ogd.data[idx + 2];
canvasData.data[idx + 3] = (agd.data[idx + 0] + agd.data[idx + 1] + agd.data[idx + 2]) / 3;
}
}
ctx.putImageData(canvasData, 0, 0);
original.remove();
alpha.remove();
};
});
})(jQuery);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment