Chrome DevTools snippet to print out a element

PrintElement.js

/* Attempts to screen-shot a element onto a canvas */
var css = function(el, styles){
    for (var style in styles) {
        if(!styles.hasOwnProperty(style)) continue;
        el.style[style] = styles[style];
    }
    return el;
};
var selectElement = function(callback){
    var selection = document.createElement("div");
    css(selection, {
        "pointer-events": "none",
        "transition-property": "top, left, width, height",
        "transition-duration": "0.1s",
        "transition-timing-function": "linear"
    });
    document.body.appendChild(selection);
    var mouseMoveListener =  function(e){
        var bounds = e.target.getBoundingClientRect();
        css(selection, {
            "position": "fixed",
            "z-index": 1000,
            "background": "rgba(255,0,0,0.5)",
            "top": bounds.top+"px",
            "left": bounds.left+"px",
            "height": bounds.height+"px",
            "width": bounds.width+"px"
        });
        e.stopPropagation();
        e.preventDefault();
        return false;
    };
    var mouseDownListener = function(e){
        try {
            callback(e.target);
        }catch(e){
            console.log("Problem occurred in callback: ", e);
        }
        document.body.removeChild(selection);
        document.removeEventListener("mousemove", mouseMoveListener);
        document.removeEventListener("mousedown", mouseDownListener);
        e.preventDefault();
        e.stopPropagation();
        return false;
    };
    document.addEventListener("mousemove", mouseMoveListener);
    document.addEventListener("mousedown", mouseDownListener);
};
var tokenize = function(str, separator, leftBound, rightBound) {
  var start = 0;
  var result = [];
  var b = 0;
  for(var i = 0; i < str.length; i++){
    if(str[i] == leftBound)b++;
    if(str[i] == rightBound)b--;
    if(separator.indexOf(str[i])!==-1 && b === 0){
      if(i-start !== 0)
        result.push(str.substr(start, i-start));
      start = i+1;
    }
  }
  if(start !== i){
      result.push(str.substr(start, i-start));
  }
  return result;
};
//Collapse whitespace
var collapse = function(str, whitespace) {
    return str.replace(/\s+/g, " ");
};
var drawElement = function(ctx, element){
    var b = element.getBoundingClientRect();
    var s = window.getComputedStyle(element);
    if(element instanceof HTMLImageElement){
        /*ctx.beginPath();
        ctx.moveTo(element.offsetLeft, element.offsetTop);
        ctx.lineTo(element.offsetLeft+element.clientWidth, element.offsetTop+element.clientHeight);
        ctx.moveTo(element.offsetLeft+element.clientWidth, element.offsetTop);
        ctx.lineTo(element.offsetLeft, element.offsetTop+element.clientHeight);
        ctx.stroke();
        ctx.closePath();*/
        ctx.drawImage(element, b.left, b.top, b.width, b.height);
        return;
    }
    //ctx.strokeRect(b.left, b.top, b.width, b.height);
    ctx.fillStyle = s.backgroundColor;
    //console.log(s.backgroundColor, s.backgroundImage);
    ctx.fillRect(b.left, b.top, b.width, b.height);
    //Draw the borders TODO: border radius
    ctx.beginPath();
    if(parseInt(s.borderLeftWidth, 10) > 0) {
        var lw = ctx.lineWidth;
        var ls = ctx.strokeStyle;
        ctx.moveTo(b.left, b.top);ctx.lineTo(b.left, b.top+b.height);
        ctx.lineWidth = parseInt(s.borderLeftWidth, 10);
        ctx.strokeStyle = s.borderLeftColor;
        ctx.stroke();
        ctx.lineWidth = lw;
        ctx.strokeStyle = ls;
    }
    var bounds = element.getBoundingClientRect();
    for(var i = 0; i < element.childNodes.length; i++){
        var child = element.childNodes[i];
        if(child.nodeType == 1){
            drawElement(ctx, child);
        }
        if(child.nodeType == 3){
            var range = document.createRange();
            range.selectNodeContents(child);
            var rects = range.getClientRects();
            ctx.font = s.font;
            var textHeight = parseInt(s.fontSize, 10);
            var text = collapse(child.textContent);
            var lineStart = 0;
            for(var j = 0; j < rects.length; j++){
                ctx.fillStyle = s.color;
                for(var w = 1; w < text.length; w++){
                    if(ctx.measureText(text.substr(lineStart, w)).width >= rects[j].width) break;
                }
                ctx.fillText(collapse(text.substr(lineStart, w)).trim(), rects[j].left, rects[j].top+textHeight);
                lineStart += w;
            }
        }
    }
};
selectElement(function(element){
    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");
    var bounds = element.getBoundingClientRect();
    canvas.width = bounds.width;
    canvas.height = bounds.height;
    context.translate(-bounds.left, -bounds.top);
    
    drawElement(context, element);
    var container = document.createElement("div");
    var close = document.createElement("a");
    close.href="#";
    container.appendChild(close);
    css(close, {
        "position": "absolute",
        "top": "-0.5em",
        "right": "-0.5em",
        "width": "1em",
        "height": "1em",
        "display": "block",
        "background": "black",
        "border": "3px solid white",
        "box-shadow": "0 3px 10px black",
        "text-align": "center",
        "font-family": "arial",
        "color": "white",
        "text-decoration": "none",
        "border-radius": "100%",
        "line-height": "1.1",
        "font-size": "19px",
        "font-weight": "bold"
    });
    close.addEventListener("click", function(e){
        container.parentNode.removeChild(container);
        e.preventDefault();
        e.stopPropagation();
        return false;
    });
    close.appendChild(document.createTextNode("\u00d7"));
    css(canvas, {
        "width": "100%",
        "height": "100%"
    });
    container.appendChild(canvas);

    let imgAspect = canvas.width / canvas.height,
        frameAspect = window.innerWidth / window.innerHeight;
  
    // allow ~32px margin
    let maxWidth = Math.min(canvas.width, window.innerWidth) - 64;
    let maxHeight = Math.min(canvas.height, window.innerHeight) - 64;
  
    let [width, height] = imgAspect < frameAspect ? [
        maxHeight * imgAspect,
        maxHeight
    ] : [
        maxWidth,
        maxWidth / imgAspect
    ];
    
    //We can't call toDataURL on a canvas that has cross-domain images on it
    // So slap it on the screen and call it good
    css(container, {
        "position": "fixed",
        "left": 0,
        "right": 0,
        "top": 0,
        "bottom": 0,
        "width": `${width}px`,
        "height": `${height}px`,
        "background": "white",
        "padding": "12px",
        "border": "1px solid #eee",
        "border-radius": "5px",
        "box-shadow": "0 5px 50px black",
        "margin": "auto",
        "z-index": 10000
    });
    document.body.appendChild(container);
});