JSFiddle - React, Tailwind, and code Playground
by Owen Hartley
JavaScript
var width = 64;
var height = 64;
var image = new Image(width, height);
image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAANHSURBVHhe7d3BSmpRFIDhjIrCgua+eg/Qazg3okkGBUENnAQFaUQp907WcOOCs9ho/P83uWtiafx3g9t9PKObm5t/B3/YcrmMaTfOz89j2k/Z3+cw/hWUAcAZAJwBwBkAnAHAGQBcug/w+PgYU9vv729MbcfHxzENc3p6GtNufH9/xzTMarWKqe3k5CSmYbK/73w+j6nNFQDOAOAMAM4A4AwAzgDgDAAu3Qe4v7+Pqe3n5yemYXq/D872KXqr7oNULRaLmNpcAeAMAM4A4AwAzgDgDADOAODSfYDX19eY+vj8/Iyprff76N7nDarnCar7GG9vbzG1uQLAGQCcAcAZAJwBwBkAnAHAla8LyPT+PL56HiB7/K6vS6juk3geQFsZAJwBwBkAnAHAGQCcAcCVzwNUP+/+67J9huy6iey6iOrjn56eYmpzBYAzADgDgDMAOAOAMwA4A4Drfh6g9+fp2eflFxcXMQ3T+1x/7+seZrNZTG2uAHAGAGcAcAYAZwBwBgBnAHCjq6urrfsADw8PMbVNJpOYhvn4+IhpmMvLy5j6yJ5fdj+AqvF4HFNb9vqz5+8KAGcAcAYAZwBwBgBnAHAGAJeeB8hk96fP7q9ffXwm+/lV1eeXqf59svs9uALAGQCcAcAZAJwBwBkAnAHAdb8uoLd9/x7A7LqC3r//9vY2pjZXADgDgDMAOAOAMwA4A4AzALjyPkD1fXj2+Ez2PXqZ7Hv2Mr1fX/Xne99AbWUAcAYAZwBwBgBnAHAGALf35wF2fd++TPV7BHu/vufn55jaXAHgDADOAOAMAM4A4AwAzgDgRtPpdOs+wMvLS0x99D63X73//r6fV8ie/2KxiKnNFQDOAOAMAM4A4AwAzgDgDAAu3Qd4f3+Pqe3r6yumts1mE9Mw2fvcqqOjo5ja1ut1TH1Ur6vIzOfzmNpcAeAMAM4A4AwAzgDgDADOAODS6wKy75vPZO+zz87OYuqjem4/+zz+8HD7/6Hs91fPG2Tu7u5ianMFgDMAOAOAMwA4A4AzADgDgBtdX19v3QeYzWYxtU0mk5iGye5vn8nun1+VPb/VahVTH+PxOKa27PVnz98VAM4A4AwAzgDgDADOAOAMAO3g4D97hhHQAIEXKwAAAABJRU5ErkJggg==";
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height * height;
var ctx = canvas.getContext("2d");
var canvasImg = document.createElement("canvas");
canvasImg.width = width;
canvasImg.height = height * 2;
var ctximg = canvasImg.getContext("2d");
document.body.appendChild( canvas );
document.body.appendChild( canvasImg );
image.onload = function() {
ctximg.drawImage( image, 0, 0 );
ctximg.drawImage( image, 0, height );
for (i = 0; i < height; i++) {
var imgData = ctximg.getImageData( 0, i, width, height );
ctx.putImageData( imgData, 0, i * height );
}
}