From 4faf629b146aaadfcb1de18b82f98e4a78da09a0 Mon Sep 17 00:00:00 2001 From: lengbing Date: Mon, 21 Mar 2016 18:32:29 +0800 Subject: [PATCH] 1. add another transparent background image because `background: url(...)` is *not working* idea from [jakearchibald(At)chromium.org](https://bugs.chromium.org/p/chromium/issues/detail?id=495643#c8) 2. add no-repeat --- console.image.js | 6 +++++- console.image.min.js | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/console.image.js b/console.image.js index a3c29db..9c32b51 100644 --- a/console.image.js +++ b/console.image.js @@ -164,7 +164,11 @@ img.onload = function() { var dim = getBox(this.width * scale, this.height * scale); - console.log("%c" + dim.string, dim.style + "background: url(" + url + "); background-size: " + (this.width * scale) + "px " + (this.height * scale) + "px; color: transparent;"); + // 1. add another transparent background image + // because background: url(...) is not working + // @see https://bugs.chromium.org/p/chromium/issues/detail?id=495643#c8 + // 2. add no-repeat + console.log("%c" + dim.string, dim.style + "background: linear-gradient(to top, transparent, transparent), url(" + url + ") no-repeat; background-size: " + (this.width * scale) + "px " + (this.height * scale) + "px; color: transparent;"); }; img.src = url; diff --git a/console.image.min.js b/console.image.min.js index d955ff6..75a934a 100644 --- a/console.image.min.js +++ b/console.image.min.js @@ -1,4 +1,4 @@ /** * Dubiously created by Adrian Cooney * http://dunxrion.github.io - */(function(e){"use strict";function n(e,t){return{string:"+",style:"font-size: 1px; padding: "+Math.floor(t/2)+"px "+Math.floor(e/2)+"px; line-height: "+t+"px;"}}function r(e,t,n,r,o){n=n.toUpperCase();if(n.length<24){var u=Math.max(0,n.length-12),a=70+u*-3;i(e,a,n,r/2,o)}else if(n.length<29)i(e,40,n,r/2,o);else{var f=s(n,27);f.forEach(function(n,s){i(e,40,n,r/2,t=="lower"?o-(f.length-1)*40+s*40:o+s*40)})}}function i(e,t,n,r,i){e.font="bold "+t+"px Impact";e.fillStyle="#fff";e.textAlign="center";e.textBaseline="middle";e.lineWidth=7;e.strokeStyle="#000";e.strokeText(n,r,i);e.fillText(n,r,i)}function s(e,t){var n=[],r=e.split(" "),i=[];for(var s=0,o=r.length;s "+Object.keys(t).join("\n> "));var a=document.createElement("canvas"),f=a.getContext("2d"),o=o||500,u=o||500,l=500,c=500,h=new Image;h.setAttribute("crossOrigin","anonymous");h.onload=function(){a.width=o;a.height=u;var t=n.toUpperCase();f.scale(o/500,u/500);f.drawImage(this,0,0,l,c);r(f,"upper",n,l,50);r(f,"lower",i,l,c-50);e.image(a.toDataURL())};if(t[s])var p=t[s];else var p=s;h.src=p};e.image=function(t,r){r=r||1;var i=new Image;i.onload=function(){var i=n(this.width*r,this.height*r);e.log("%c"+i.string,i.style+"background: url("+t+"); color: transparent;")};i.src=t;i.style.background="url("+t+")"}})(console); +*/!function(a){"use strict";function b(a,b){return{string:"+",style:"font-size: 1px; padding: "+Math.floor(b/2)+"px "+Math.floor(a/2)+"px; line-height: "+b+"px;"}}function c(a,b,c,f,g){if(c=c.toUpperCase(),c.length<24){var h=Math.max(0,c.length-12),i=70+-3*h;d(a,i,c,f/2,g)}else if(c.length<29)d(a,40,c,f/2,g);else{var j=e(c,27);j.forEach(function(c,e){d(a,40,c,f/2,"lower"==b?g-40*(j.length-1)+40*e:g+40*e)})}}function d(a,b,c,d,e){a.font="bold "+b+"px Impact",a.fillStyle="#fff",a.textAlign="center",a.textBaseline="middle",a.lineWidth=7,a.strokeStyle="#000",a.strokeText(c,d,e),a.fillText(c,d,e)}function e(a,b){for(var c=[],d=a.split(" "),e=[],f=0,g=d.length;g>f;f++)(e+d[f]).length "+Object.keys(f).join("\n> "));var i=document.createElement("canvas"),j=i.getContext("2d"),g=g||500,h=g||500,k=500,l=500,m=new Image;if(m.setAttribute("crossOrigin","anonymous"),m.onload=function(){i.width=g,i.height=h;b.toUpperCase();j.scale(g/500,h/500),j.drawImage(this,0,0,k,l),c(j,"upper",b,k,50),c(j,"lower",d,k,l-50),a.image(i.toDataURL())},f[e])var n=f[e];else var n=e;m.src=n},a.image=function(c,d){d=d||1;var e=new Image;e.onload=function(){var e=b(this.width*d,this.height*d);a.log("%c"+e.string,e.style+"background: linear-gradient(to top, transparent, transparent), url("+c+") no-repeat; background-size: "+this.width*d+"px "+this.height*d+"px; color: transparent;")},e.src=c}}(console);