[英]How to display local image to console?
我剛剛注意到javascript with css
可以在開發人員控制台中顯示不同的樣式。 當然,這也使得在控制台中顯示圖像成為可能。
由於我可以很好地將這個功能用於我的項目,所以我想直接嘗試一下。 沒有成功。
使用下面的代碼(我從這篇文章中獲得: https : //stackoverflow.com/a/26286167 )我可以輸出帶有“URL”的圖像(即在線圖像)。
但是對於本地圖像,到目前為止,這不適用於 Safari。
有誰知道為什么它不適用於本地圖像,而適用於 URL? 有沒有人知道仍然能夠在控制台中顯示本地圖像的解決方法?
注意:請打開您的瀏覽器控制台以獲取以下代碼段:(或在此處找到: https : //jsfiddle.net/7wbnsp9u/3/ )
(function(url) { var image = new Image(); image.onload = function() { console.log('%c', [ 'font-size: 1px;', 'line-height: ' + this.height + 'px;', 'padding: ' + this.height * .5 + 'px ' + this.width * .5 + 'px;', 'background-size: ' + this.width + 'px ' + this.height + 'px;', 'background: url(' + url + ');' ].join(' ')); }; image.src = url; })('http://www.personal.psu.edu/users//w/z/wzz5072/mini.jpg');
> Please open your <b>developer console</b>.
這是它在 safari 中的樣子:
這工作正常: ('http://www.personal.psu.edu/users//w/z/wzz5072/mini.jpg');
...雖然這不是:( ('mini.jpg');
= (/Users/xy/project/mini.jpg)
為了安全起見,瀏覽器不允許像這樣訪問本地文件。 您將需要一個在 localhost 上運行的網絡服務器才能按您的意願工作。
您可以使用 Base64 編碼的圖像。
var º = "%c";
var consoleNormal = "font-family: sans-serif";
var consoleBold = "font-family: sans-serif;" +
"font-weight: bold";
var consoleCode = "background: #EEEEF6;" +
"border: 1px solid #B2B0C1;" +
"border-radius: 7px;" +
"padding: 2px 8px 3px;" +
"color: #5F5F5F;" +
"line-height: 22px;" +
"box-shadow: 0px 0px 1px 1px rgba(178,176,193,0.3)";
var consoleBackground = "background-image: url('data:image/png;base64,iVBO" +
"Rw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQ" +
"VQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAA" +
"BJRU5ErkJggg==')";
console.info(º+"Example: Normal", consoleNormal);
console.info(º+"Example: Bold", consoleBold);
console.info(º+"Example: Code", consoleCode);
console.info(º+"Example: Background", consoleBackground);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.