Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* 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){
- //console.log("MOVEMENT");
- 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)), 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"));
- container.appendChild(canvas);
- //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": canvas.width+"px",
- "height": canvas.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);
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement