前端项目控制台(F12)打印出带样式的文字、图片(像百度一下一样)

控制台打印各种信息(图片、文字)

前言:我们再访问百度时,懂行的人都会调出控制台来,我们发现百度控制台有一个鼓励的话,像这样,这次我来实现一下这样的效果
百度一下控制台

1.先来看看最终实现的效果

代码实现效果

  • 以上这就是我们最终要实现的样式,接下来说说具体怎么写

2. 先实现一个有颜色文字并带下划线的

  • 逗号前放的是显示的文本,后面是样式
    注意在写这类代码,不管是打印样式文字,还是图片都要在前面加%c,
  console.log(
       "%c橙色文字带下划线",
       "color: #ff6700;font-size: 24px;font-weight: bold;text-decoration: underline;"
  );
  • 效果图橙色文字效果图

3. 实现打印图片

注意%c的写法

打印图片:%c 后面有个空格,padding的值可以换算下(通过把font-size设置为0,让字体不占空间,不然空格也会撑出一个空间的)

   //注意%c后有一位空格
    console.log(
        "%c ",
        'padding:133px 184px; font-size: 0; background:url("https://picsum.photos/id/1/368/268"); no-repeat;'
      );
  • 效果图
    打印图片

4. 打印页面相关信息(更新时间)

  • 我们还可以利用变量+模板字符串(反引号)来实现,更便捷
let date = new Date();
//把样式赋给变量
let a = "background: #606060; color: #fff; border-radius: 3px 0 0 3px;";
let b = "background: #1475B2; color: #fff; border-radius: 0 3px 3px 0;";
//通过模板拼接date,第一个样式a对应第一个%c,第二个样式b对应第二个%c,一一对应
console.log(`%c Now Time : %c ${date} `, a, b);
  • 效果图
    打印更新时间

5. 实现最终需要的打印信息

  • 实现hello 要用到ascll art,推荐一个转化这个的网站:转化ASCLL ART,这里能把想要的英文变为字符图形形式;
  • 注意:从网站复制过来后,要转义一下,不然打印不出来你想要的效果(转义:把所有的单斜杠替换成双斜杠 \->\\)
  • 项目中如果需要的话就把代码引入到一个全局的js文件就可以
//用模版字符串
var hello = `
    __  __     ____         ____                  _            
   / / / ___  / / ____     / __ \\___  ____  _____(_____  ____ _
  / /_/ / _ \\/ / / __ \\   / /_/ / _ \\/ __ \\/ ___/ / __ \\/ __  /
 / __  /  __/ / / /_/ /  / ____/  __/ /_/ (__  / / / / / /_/ / 
/_/ /_/\\___/_/_/\\____/  /_/    \\___/\\____/____/_/_/ /_/\\__, /  
                                                      /____/                                             
`;
console.log(hello);
//样式变量
var styleTitle1 = ` font-size: 20px; font-weight: 600; color: rgb(244,167,89); `;
var styleTitle2 = ` font-style: oblique; font-size:14px; color: rgb(244,167,89); font-weight: 400; `;
var styleContent = ` color:rgb(30,152,255);margin-top:15px `;
/* 内容代码 */
var title1 = "普歌Peosing";
var title2 = "打造趣味学习生态";
//用模版字符串
var content = `
普歌致言:
任何没有走心的努力,都只是在表演。
真正的努力不是做给别人看,而是用专注和热情持续浇灌。
说自己做到的,做自己说过的。
因为梦想,所以选择远方;因为无所依靠,所以选择坚强。
欢迎来到普歌!
`;
//最终打印,对应好相关的样式,一个样式对应一个%c
console.log(
  `%c${title1} %c${title2} %c${content}`,
  styleTitle1,
  styleTitle2,
  styleContent
);

效果图:
普歌效果图

最后学到的小伙伴给个三连,点赞、关注、收藏哦

更多推荐:wantLG的《普歌-码上鸿鹄团队:element ui中实现upload文件、图片上传功能(el-upload))


  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
这是一个完整可用的Java代码示例,展示了如何使用百度智能云接口来识别图片中的文字,并将识别结果打印控制台。同时,我还提供了Maven依赖,你可以将其添加到你的项目中。 代码示例: ```java import com.baidu.aip.ocr.AipOcr; import org.json.JSONArray; import org.json.JSONObject; import java.util.HashMap; public class BaiduOCR { // 设置APPID/AK/SK public static final String APP_ID = "your_app_id"; public static final String API_KEY = "your_api_key"; public static final String SECRET_KEY = "your_secret_key"; public static void main(String[] args) { // 初始化AipOcr AipOcr client = new AipOcr(APP_ID, API_KEY, SECRET_KEY); // 设置网络连接参数 client.setConnectionTimeoutInMillis(2000); client.setSocketTimeoutInMillis(60000); // 调用接口 String filePath = "your_image_path"; JSONObject result = client.basicGeneral(filePath, new HashMap<String, String>()); JSONArray wordsResult = result.getJSONArray("words_result"); for (int i = 0; i < wordsResult.length(); i++) { JSONObject obj = wordsResult.getJSONObject(i); System.out.println(obj.getString("words")); } } } ``` Maven依赖: ```xml <dependencies> <!-- 百度AI Java SDK --> <dependency> <groupId>com.baidu.aip</groupId> <artifactId>java-sdk</artifactId> <version>4.14.3</version> </dependency> </dependencies> ``` 请确保将`your_app_id`、`your_api_key`、`your_secret_key`和`your_image_path`替换为你自己的应用信息和待识别的图片路径。 在代码中,我们使用了百度智能云接口的`basicGeneral`方法,它可以识别图片中的通用文字,并返回识别结果。然后,我们遍历识别结果并将其打印控制台。 在使用百度智能云接口之前,请确保已经在百度智能云控制台上创建了OCR应用,并获取了相应的API Key和Secret Key。另外,确保引入了百度AI的Java SDK依赖。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wantLG

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值