Skip to content

Instantly share code, notes, and snippets.

@joews

joews/index.html

Created January 17, 2015 18:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save joews/fc8d5816532fa78b3847 to your computer and use it in GitHub Desktop.
Save joews/fc8d5816532fa78b3847 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script id="jsbin-javascript">
var imageEl = new Image();
imageEl.onload = function() {
drawImage(this);
}
imageEl.src = 'http://static.jsbin.com/images/dave.min.svg';
var context = canvas.getContext('2d');
function drawImage(imageEl) {
var width = imageEl.width,
height = imageEl.height;
canvas.width = width;
canvas.height = height;
context.drawImage(imageEl, 0, 0);
var imageData = context.getImageData(0, 0, width, height);
var outData = context.createImageData(imageData);
for(var i = 0; i < imageData.length; i += 4) {
var r = imageData[i],
g = imageData[i + 1],
b = imageData[i + 2],
a = imageData[i + 3];
var rn = 255 - r,
gn = 255 - g,
bn = 255 - b;
outData[i] = rn;
outData[i + 1] = gn;
outData[i + 2] = bn;
outData[i+ 3] = a;
}
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">var imageEl = new Image();
imageEl.onload = function() {
drawImage(this);
}
imageEl.src = 'http://static.jsbin.com/images/dave.min.svg';
var context = canvas.getContext('2d');
function drawImage(imageEl) {
var width = imageEl.width,
height = imageEl.height;
canvas.width = width;
canvas.height = height;
context.drawImage(imageEl, 0, 0);
var imageData = context.getImageData(0, 0, width, height);
var outData = context.createImageData(imageData);
for(var i = 0; i < imageData.length; i += 4) {
var r = imageData[i],
g = imageData[i + 1],
b = imageData[i + 2],
a = imageData[i + 3];
var rn = 255 - r,
gn = 255 - g,
bn = 255 - b;
outData[i] = rn;
outData[i + 1] = gn;
outData[i + 2] = bn;
outData[i+ 3] = a;
}
}</script></body>
</html>
Raw
jsbin.yaxaka.js
var imageEl = new Image();
imageEl.onload = function() {
drawImage(this);
}
imageEl.src = 'http://static.jsbin.com/images/dave.min.svg';
var context = canvas.getContext('2d');
function drawImage(imageEl) {
var width = imageEl.width,
height = imageEl.height;
canvas.width = width;
canvas.height = height;
context.drawImage(imageEl, 0, 0);
var imageData = context.getImageData(0, 0, width, height);
var outData = context.createImageData(imageData);
for(var i = 0; i < imageData.length; i += 4) {
var r = imageData[i],
g = imageData[i + 1],
b = imageData[i + 2],
a = imageData[i + 3];
var rn = 255 - r,
gn = 255 - g,
bn = 255 - b;
outData[i] = rn;
outData[i + 1] = gn;
outData[i + 2] = bn;
outData[i+ 3] = a;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment