defektive/image.html

## image.html
<!DOCTYPE html><html class=''>
<head><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/anon/pen/vOaeyK" />


<style class="cp-pen-styles"></style></head><body>
<div id="playground">
  <style id="styles">
  .main {
  font: bold 100px "avenir";
  color: #111;
  letter-spacing: 0px;
  }

  .logo {
  height: 100px;
  overflow: hidden;
  border: 10px solid #333;
  display: inline-block;
  }

  .logo-contents {
  position: relative;
  top: -12px;
  }

  .lowlight {
  padding: 10px 0 10px 10px;
  position: relative;
  background: #f33;
  }

  .highlight {
  position: relative;
  top: -10px;
  display: inline-block;
  font-size: 60%;
  color: #f33;
  text-decoration: underline;
  background: #111;
  padding: 20px 10px 20px 5px;
  display:none;
  }
</style>
  <div id="logo" class="logo">
    <div class="logo-contents">
      <span class="main">
      <span class='lowlight'>d</span><span class="highlight">efektive</span></span>
    </div>
  </div>
</div>


<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script>
<script>
var ElementImager = function () {
    function ElementImager(element) {
        this.element = element.cloneNode(true);
        this._originalElement = element;
        this.canvas = document.createElement('canvas');
        this.context = this.canvas.getContext('2d', { preserveDrawingBuffer: true });
        this.canvas.height = this.height();
        this.canvas.width = this.width();
        this.silo = document.createElement('div');
        document.body.appendChild(this.silo);
    }
    ElementImager.prototype.height = function () {
        return this._originalElement.offsetHeight;
    };
    ElementImager.prototype.width = function () {
        return this._originalElement.offsetWidth;
    };
    ElementImager.prototype.toImage = function () {
        var myElements = this.element.querySelectorAll('*'), origElements = this._originalElement.querySelectorAll('*'), length = myElements.length;
        var container = document.createElement('div');
        for (var i = 0; i < document.styleSheets.length; i++) {
            if (window.CP.shouldStopExecution(1)) {
                break;
            }
            container.appendChild(document.styleSheets[i].ownerNode.cloneNode(true));
        }
        window.CP.exitedLoop(1);
        container.appendChild(this.element);
        var contents = container.innerHTML;
        var data = '<svg xmlns="http://www.w3.org/2000/svg" width="' + this.width() + '" height="' + this.height() + '">' + '<foreignObject width="100%" height="100%">' + '<div xmlns="http://www.w3.org/1999/xhtml">' + contents + '</div>' + '</foreignObject>' + '</svg>';
        var DOMURL = window.URL || window.webkitURL || window;
        var img = new Image();
        var svg = new Blob([data], { type: 'image/svg+xml;charset=utf-8' });
        var fileReader = new FileReader();
        var url = DOMURL.createObjectURL(svg);
        var context = this.context;
        img.onload = function () {
            console.log('DRAW');
            context.drawImage(img, 0, 0);
        };
        fileReader.onloadend = function () {
            img.src = fileReader.result;
        };
        fileReader.readAsDataURL(svg);
        return false || this.canvas;
    };
    ElementImager.prototype.download = function () {
        var canvasImage = this.toImage(), silo = this.silo;
        silo.appendChild(canvasImage);
        var load = function () {
            console.log('LOAD:');
            var a = document.createElement('a');
            a.download = 'generated.png';
            a.href = canvasImage.toDataURL('image/png');
            a.textContent = 'R';
            silo.appendChild(a);
            console.log(silo);
            a.click();
        };
        setTimeout(load, 100);
    };
    return ElementImager;
}();
function exportElement(element) {
    var ei = new ElementImager(element);
    ei.download();
}
exportElement(document.getElementById('logo'));
//@ sourceURL=pen.js
</script>
<script src='//codepen.io/assets/editor/live/css_live_reload_init.js'></script>
</body></html>
	<!DOCTYPE html><html class=''>
	<head><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/anon/pen/vOaeyK" />


	<style class="cp-pen-styles"></style></head><body>
	<div id="playground">
	<style id="styles">
	.main {
	font: bold 100px "avenir";
	color: #111;
	letter-spacing: 0px;
	}

	.logo {
	height: 100px;
	overflow: hidden;
	border: 10px solid #333;
	display: inline-block;
	}

	.logo-contents {
	position: relative;
	top: -12px;
	}

	.lowlight {
	padding: 10px 0 10px 10px;
	position: relative;
	background: #f33;
	}

	.highlight {
	position: relative;
	top: -10px;
	display: inline-block;
	font-size: 60%;
	color: #f33;
	text-decoration: underline;
	background: #111;
	padding: 20px 10px 20px 5px;
	display:none;
	}
	</style>
	<div id="logo" class="logo">
	<div class="logo-contents">
	<span class="main">
	<span class='lowlight'>d</span><span class="highlight">efektive</span></span>
	</div>
	</div>
	</div>


	<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script>
	<script>
	var ElementImager = function () {
	function ElementImager(element) {
	this.element = element.cloneNode(true);
	this._originalElement = element;
	this.canvas = document.createElement('canvas');
	this.context = this.canvas.getContext('2d', { preserveDrawingBuffer: true });
	this.canvas.height = this.height();
	this.canvas.width = this.width();
	this.silo = document.createElement('div');
	document.body.appendChild(this.silo);
	}
	ElementImager.prototype.height = function () {
	return this._originalElement.offsetHeight;
	};
	ElementImager.prototype.width = function () {
	return this._originalElement.offsetWidth;
	};
	ElementImager.prototype.toImage = function () {
	var myElements = this.element.querySelectorAll(''), origElements = this._originalElement.querySelectorAll(''), length = myElements.length;
	var container = document.createElement('div');
	for (var i = 0; i < document.styleSheets.length; i++) {
	if (window.CP.shouldStopExecution(1)) {
	break;
	}
	container.appendChild(document.styleSheets[i].ownerNode.cloneNode(true));
	}
	window.CP.exitedLoop(1);
	container.appendChild(this.element);
	var contents = container.innerHTML;
	var data = '<svg xmlns="http://www.w3.org/2000/svg" width="' + this.width() + '" height="' + this.height() + '">' + '<foreignObject width="100%" height="100%">' + '<div xmlns="http://www.w3.org/1999/xhtml">' + contents + '</div>' + '</foreignObject>' + '</svg>';
	var DOMURL = window.URL \|\| window.webkitURL \|\| window;
	var img = new Image();
	var svg = new Blob([data], { type: 'image/svg+xml;charset=utf-8' });
	var fileReader = new FileReader();
	var url = DOMURL.createObjectURL(svg);
	var context = this.context;
	img.onload = function () {
	console.log('DRAW');
	context.drawImage(img, 0, 0);
	};
	fileReader.onloadend = function () {
	img.src = fileReader.result;
	};
	fileReader.readAsDataURL(svg);
	return false \|\| this.canvas;
	};
	ElementImager.prototype.download = function () {
	var canvasImage = this.toImage(), silo = this.silo;
	silo.appendChild(canvasImage);
	var load = function () {
	console.log('LOAD:');
	var a = document.createElement('a');
	a.download = 'generated.png';
	a.href = canvasImage.toDataURL('image/png');
	a.textContent = 'R';
	silo.appendChild(a);
	console.log(silo);
	a.click();
	};
	setTimeout(load, 100);
	};
	return ElementImager;
	}();
	function exportElement(element) {
	var ei = new ElementImager(element);
	ei.download();
	}
	exportElement(document.getElementById('logo'));
	//@ sourceURL=pen.js
	</script>
	<script src='//codepen.io/assets/editor/live/css_live_reload_init.js'></script>
	</body></html>