js控制台 console 打印图片-自定义文字样式

使用 JS 实现在浏览器控制台打印图片 console.image() 在前端开发过程中,调试的时候,我门会使用 console.log 等方式查看数据。但对于图片来说,仅靠展示的数据与结构,是无法想象出图片最终呈现的样子的。虽然我们可以把图片数据通过 img 标签展示到页面上,或将图片下载下来进行预览。但这样的调试过程实在是复杂,何不实现一个 console.image() 呢? 阅读详情

自定义文字样式

console.log 中可以通过 %c 表示 css 样式
代码:

		let a = 'background: red; color: #fff;'
		let b = 'background: rgba(0,0,255,1); color: #fff;'
		let c = 'background: #1475B2; color: #fff; '
		console.log(`%c UF %c 携手优联 %c 共享前端  `, a, b, c)

		console.log('%c 携手优联 共享前端', 'color: #43bb88;font-size: 24px;font-weight: bold;text-decoration: underline;');

控制台输出:

图片

打印(输出)图片

注意:%c 后面有个空格
代码:

console.log("%c ", `background: url('${location.origin}/console/console_log_cn.png') no-repeat center; padding-left:305px;padding-bottom: 195px`);

控制台输出:

图片

 

js点击图片打印图像 为了打印图像,我们可以将图像元素插入到假元素中,并在iframe的窗口上。当用户开始打印图像或关闭打印窗口时,动态iframe将被删除。尽管iframe源是一个简单的HTML,而不是。在macOS上)来打印网页。函数提供了打印整个页面的相同结果。当iframe准备好时插入图像。您可以通过单击浏览器的打印。创建一个假的iframe。打印图像可以在按钮的。...... 阅读详情

相关推荐

通过调用 JS 打印图片信息

通过调用 JS 打印图片信息,可以直接通过调用图片地址进行图片打印,解决谷歌浏览器第一次打印不显示图像的问题,增加去除IE页眉页脚的功能

js打印照片或网页内容

【代码】js打印照片或网页内容。

wangaiwen的博客 1476

FPGA+CMV4000实战:从零搭建20fps成像系统的5个关键步骤(附避坑指南)

本文详细介绍了如何从零搭建基于FPGA和CMV4000传感器的20fps成像系统,涵盖硬件选型、SPI通信优化、LVDS数据采集、DDR2内存管理及系统集成等5个关键步骤。特别针对CMV4000传感器的SPI配置和高速数据处理的常见问题提供实用解决方案,帮助开发者避免常见陷阱,提升成像系统性能。

weixin_42628688的博客 427

使用JavaScript优雅实现每页一图的打印功能

步骤二:生成打印HTML内容 接下来,定义buildPrintContent函数,它负责根据图片数据生成HTML字符串,确保每张图片被包裹在一个具有.invoice-page类的中,以便于应用打印样式。

人民有信仰民族有希望国家有力量 1344

L3 级自动驾驶 2025:法规突破与车企技术路线竞争

2025年L3级自动驾驶迎来规模化商业落地关键期。全球主要经济体在法规、技术、市场三方面取得突破:中国通过《北京市自动驾驶汽车条例》明确责任划分,欧盟设立严格技术认证标准。技术路线呈现"多传感器融合为主流,纯视觉为补充"格局,华为、特斯拉等企业展开硬件军备竞赛与算法架构革新。中国车企在技术验证和规模化应用方面领先,而欧美车企侧重生态整合。尽管面临成本控制、责任认定和用户信任等挑战,随着技术进步和车路协同发展,L3自动驾驶正从高端选配向大众化普及迈进,为L4级奠定基础。

2301_77933942的博客 3098

科研软件|Adobe Photoshop 2024 (PS 2024)

科研软件|Adobe Photoshop 2024 (PS 2024)

m0_55499682的博客 5514

js控制台 console 骚操作-打印图片-自定义样式-字符画

目录控制台打印骚操作自定义样式打印(输出)图片借助平台打印字符(符号组成)Lunicode 平台操作图片转字符打印控制台打印骚操作二效果图代码实现错误案例方式一(感觉有点乱)方式二(改进版-最终版,比较贴近前端开发)扩展版(更低耦合,推荐)参考博客控制台打印骚操作 预备知识:console | MDN 可以直接搜 为js控制台定义样式 自定义样式 console.log 中可以...

RealizeInnerSelf丶 3579

RK3588 EVB开发板原理图讲解【六】

该原理图展示了eMMC Flash与主控芯片之间的连接关系,以及相关的电源、信号线路和去耦电容等。

weixin_48721556的博客 1173

浏览器上有趣的Console命令都了解吗?

序 作为用过JavaScript的各位来说,一定都知道使用console.log输出信息吧 (不知道也没关系 ) 不过对于console,各位都了解全了吗? 上手操作 按下F12键,就会出现浏览器上控制台了,如下图 这里我使用的是Chrome浏览器,不同浏览器控制台可能会有所不同 接下来让我们使用一下console.log打印一下信息,看看效果 111被直接打印了出来,arr因为未定义,所以报错了 console命令 console的命令有很多,并不局限于我们常用的log日志命令 MDN参

苦作舟的空城机 2931

经典的YOLOv3和YOLOV5算法详解及代码复现

yolov3和yolov5算法详解及代码复现

hasakie的博客 771

高通IPA硬件加速介绍

‌ 高通IPA (Internet Protocol Accelerator)模块是一种硬件加速模块,由高通公司(Qualcomm)提供,主要用于优化移动设备上的网络数据传输,特别是通过 LTE 、 5G 等移动网络的数据传输‌‌。IPA模块通过硬件加速,显著提高了数据传输的速度和效率,同时降低了设备的功耗,并提供了更稳定的网络连接,减少了数据传输中的丢包和延迟‌。

四儿家的小祖宗的博客 1624

Console控制台讲解

Console控制台讲解 控制台(Console)是JS开发里最重要的面板,主要作用是显示网页加载过程中产生各类信息。 之前的开发经常用Firebug进行JS代码调试,Firebug是firefox下的一个扩展,能够调试所有网站语言,如Html,Css等,最吸引人的就是javascript调试功能,使用起来非常方便,而且在各种浏览器下正常使用,但是目前为止Firebug 官网宣布已停止开发更新。 ...

lwaner的博客 4197

【硬件的单元测试 UT 3】PCIe 3.0及信号完整性测试方法

PCIe标准自从推出以来,1代和2代标准已经在PC和Server上逐渐普及,用于满足高速显卡、高速存储设备对于高速数据传输的要求。出于支持更高总线数据吞吐率的目的,PCI-SIG组织在2010年制定了PCIe 3.0,即PCIe 3代的规范,数据速率达到8Gbps。

qq_43416206的博客 1415

【JavaScript】console控制台调试技巧 | JavaScript调试技巧

对于前端开发者来说,在开发过程中需要监控某些表达式或变量的值的时候,用 debugger 会显得过于笨重,取而代之则是会将值输出到控制台上方便调试。最常用的语句就是console.log(expression)了。   然而对于作为一个全局对象的console对象来说,大多数人了解得还并不全面,当然我也是,经过我的一番学习,现在对于这个能玩转控制台的 JS 对象有了一定的认识,与大家分享一下。

'Ablaze 的专栏 2090

【打卡帖】7日玩转ESP32——(第4日) 串口的输入输出

【福利帖】7日玩转ESP32——(第4日) 串口的输入输出

1377

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

如何用console.log打印图文?

1.console console是全局变量window(或global)下的一个对象,在控制台打印console,可以发现他提供了很多方法。 console.log(console) 2.占位符 console.log("打印的字符串是:%s", "123"); console.log("%o", document.body); console.log("打印的整数是:%d", 111.00); console.log("打印的浮点数是:%f", 111.00); 3.打印文字和图片

苏苏就是小苏苏的博客 2047

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

有趣的console.log(console.log输出彩色字,图片等)


 亲们支持我的新博客哦==》原文地址
 (欢迎加群一起玩耍:575180837)
 逛网站的时候经常发现很多网站控制台打印了很好玩的内容
 比如我的网站 →calamus
 
  或者知乎→
 
  
 平时是不是只用console调试或者打印别的信息了,没有试过上面这种呢?感觉很有趣有没有
 ...

Calamus 1万+

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

控制台怎么查看错误的详细信息_Chrome(谷歌)控制台,console实用教程

来源 |https://www.jianshu.com/p/24b9f50dc520大家在调试程序的时候,经常会用到控制台,在console下调试各种bug,在此整理了控制台console的一些用法,希望能够帮到你,话不多说,上干货。一、先简单的介绍一下chrome的控制台1.Windows:打开chrome浏览器,按f12就可以轻松的打开控制台(这里着重介绍下mac的,其实都一样,只...

weixin_31742871的博客 9968

什么浏览器有html控制台,让Console漂亮起来,在浏览器控制台添加网站说明

为了让喜欢按F12的访客不至于看到空空的控制台,写了点代码充实了下内容,也顺便复习下这部分内容。console打印的文字是可以添加样式的,不过不是全部css效果都有效,这里只介绍一小部分样式。是换行,可以将一个字符串设置成多行%c标记之后的内容使用对应样式,格式如 console.log(’%c第一个样式%c第二个样式’,’css1’,’css2’); 如此对应样式和普通的css效果基本一致,可以...

weixin_29501693的博客 415

JavaScript小记—console的用法

JavaScript小记—console的用法 在工作过程中,console是我们最用到的打印日志的方法,但是除了console.log,他还有其他更多的妙用。 log info warn error 在控制台中,info和log的打印效果相同,因此用到的很少。而warn和error比较明显,可以第一眼看到。但是在编码过程中,有时候框架会报一些警告和错误也会导致难以分辨,因此还需要一种更清晰的展示方式更快的找到自己在控制台打印的东西。 占位符%c 使用占位符%c输出的文字会以你指定的样式显示在控制台中,包括

逆光如雪的博客 480

js技巧 console.log使用

js技巧 console.log使用

debug 2万+

要被玩坏的console大全

花式console

山有木兮木有枝 心悦君兮君不知 832

console 输出信息美化

  不久前在一些前端的网站上看到的效果,以前觉得console只是拿来做做调试,不过现在看到别人网站的console美化效果,这个还可以作为一种网站个性来显示的.. 以%c开头,后面的文字就打印的信息,后面一个参数就是样式属性;可以尝试多个样式,每碰到一个%c开头就会应用对应的样式: console.log("%c 第一个信息 %c 第二个信息 %c 第三个信息", "color...

anba7411的博客 564

【F12】Console命令,让js调试更简单

Console命令,让js调试更简单 一、显示信息的命令 console.log("normal"); // 用于输出普通信息 console.info("information"); // 用于输出提示性信息 console.error("error"); // 用于输出错误信息 console.warn("warn"...

alexlau2016的博客 637

js 打印指定内容_JS-那些不了解的Console属性

在日常的编码过程中,对于console属性知道得最多,用得最多的都是console.log属性,其实console也有其他许多不同的属性,分别有着不同的作用assert(断言)接收两个参数,第一个参数是表达式,第二个参数是字符串。当第一个参数为false才会执行第二个参数console.assert(assertion, msg);assertion:表达式,如果assertion为假,则会在控制...

weixin_39639698的博客 325

console js刷新页面_【F12】Console命令,让js调试更简单

一、显示信息的命令console.log("normal"); // 用于输出普通信息console.info("information"); // 用于输出提示性信息console.error("error"); // 用于输出错误信息console.warn("warn"); // 用于输出警示信息二、点位符:字符(%s)、整...

weixin_32744173的博客 938
上一篇: ThreeJS实现3D星空隧道效果
下一篇: ThreeJS:图像波动及破碎消失效果shader中的应用
优联前端
博客等级 码龄5年 1832粉丝 171原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值