七夕节特辑,浏览器桌面太无聊,为什么不做个挂件来陪自己呢?

简介: 七夕节特辑,浏览器桌面太无聊,为什么不做个挂件来陪自己呢?

相信很多人都玩过QQ宠物吧,QQ宠物停运之后,说实话心里还是有点不舍的,所以一直有着自己制作一只桌面宠物的想法,现在先在浏览器中试着实现了一下,感觉还是挺有趣的,如果有人喜欢,后续还可以加入更多的操作。

1、 准备工作

(1)需要准备自己想要的展示gif图包;

(2)将gif图包拆分成图片帧;

(3)对图片帧进行去除背景操作;

(4)将处理好的图片帧嵌入网页组成动图展示。

2、准备gif图包

这个比较简单,可以从视频中截取或者是直接从网上查找。

这里我以网上找的 第四代火影波风水门 的动图为例,如下图。

3、将动图拆分为帧图片

这里我使用了python来对动图进行处理。

#提取帧图片
#参数说明
#video_path:动图(视频)路径
#dst_folder:帧图片存放路径
#index:拆分帧数
def extract_frames(video_path, dst_folder, index):
    import cv2
    #这里需要用到opencv库
    #pip install opencv-python
    video = cv2.VideoCapture()
    if not video.open(video_path):
        print("无法打开文件")
        exit(1)
    count = 1
    while True:
        _, frame = video.read()
        if frame is None:
            break
        if count % EXTRACT_FREQUENCY == 0:
            save_path = "{}/{:>03d}.jpg".format(dst_folder, index)
            print(save_path)
            cv2.imwrite(save_path, frame)
            index += 1
        count += 1
    video.release()
    # 打印出所提取帧的总数
    print("Totally save {:d} pics".format(index - 1))
    return index

4、去除图片帧背景(抠图)

这里使用了removebg这个库来进行处理,要想实现这个功能,我们首先要登陆主页注册一下,然后获得一个他们的API,得到API以后,我们就可以实现这个功能了。

主页:https://www.remove.bg

#去除图片背景
#参数说明
#index:转换图片总数
from removebg import RemoveBg
#pip install removebg
import os
def removeBg(index):
    for i in range(1,index):
        print("正在转换第%d张"%i)
        try:
            imgpath = EXTRACT_FOLDER + '/00' + str(i) +'.jpg'
            saveimg = NOBG_FOLDER + '/no-bg' + str(i) +'.png'
            response = requests.post(
                'https://api.remove.bg/v1.0/removebg',
                files={'image_file': open(imgpath, 'rb')},
                data={'size': 'auto'},
                headers={'X-Api-Key': '你申请的key'},
            )
            if response.status_code == requests.codes.ok:
                with open(saveimg, 'wb') as out:
                    out.write(response.content)
                    print(imgpath+"已去除背景")
            else:
                print("Error:", response.status_code, response.text)
        except:
            print(imgpath+'无法转换')

5、插件脚本制作

let imglist = [
  "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-b06b1ef6-bb41-4224-9b73-8d3e34b7ed2f/d1a674bf-3374-49f6-a2fc-1598e5c22fb4.png",
  "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-b06b1ef6-bb41-4224-9b73-8d3e34b7ed2f/d8ba8a51-1994-40f7-8eac-9b6dab45dc68.png",
  "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-b06b1ef6-bb41-4224-9b73-8d3e34b7ed2f/5a8ac4a2-05a8-4fcb-9207-5b2f21f2be94.png",
  "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-b06b1ef6-bb41-4224-9b73-8d3e34b7ed2f/ae03fab6-cb00-421b-bb74-83279fddf16d.png",
  "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-b06b1ef6-bb41-4224-9b73-8d3e34b7ed2f/3c911ff3-ea69-408f-92cf-91aacd3d41cd.png",
  "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-b06b1ef6-bb41-4224-9b73-8d3e34b7ed2f/b9ba30b2-6c3a-4b40-9f0a-636aafb8c3e7.png",
  "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-b06b1ef6-bb41-4224-9b73-8d3e34b7ed2f/492ddfb1-a25d-47ea-aafe-ff6ceb2ffbc3.png",
  "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-b06b1ef6-bb41-4224-9b73-8d3e34b7ed2f/4a5d7408-801b-419c-9afa-2e716d8d4db3.png",
  "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-b06b1ef6-bb41-4224-9b73-8d3e34b7ed2f/8b23a55a-306c-4ab9-a304-2e66bd71f0fe.png",
  "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-b06b1ef6-bb41-4224-9b73-8d3e34b7ed2f/21df1eea-34b8-4f5a-8bdd-c74943782374.png"
];
let body = document.getElementsByTagName('body')[0];
let myimgbox = document.createElement('div');
myimgbox.id = 'myimgbox';
myimgbox.style.position = 'fixed';
myimgbox.style.right = '40px';
myimgbox.style.top = '50%';
myimgbox.style.opacity = '0.9';
myimgbox.style.zIndex = 1000;
body.appendChild(myimgbox);
var html="";
function changeimg(i,min,max,file){
  html ='<img id = "mypet" style="width:250px !important;heigth:134px !important;" src="' + imglist[i] + '"/>';
  document.getElementById("myimgbox").innerHTML=html;
  // console.log(html);
  if(i < max){
    i++;
  }else{
    i = min;
  }
  setTimeout(function(){
    changeimg(i,min,max,file)
  },200);
}
changeimg(0,0,imglist.length-1,"水门");
var gmove=false;
var startX
var startY
var endX
var endY
var _gx,_gy;
//按钮拖拽功能
$("#myimgbox").mousedown(function(e){
  gmove=true;
  startX = e.pageX
  startY = e.pageY
  console.log("move",gmove);
  _gx=e.pageX-parseInt($("#myimgbox").css("left"));
  _gy=e.pageY-parseInt($("#myimgbox").css("top"));
});
$(document).mousemove(function(e){
  if(gmove){
    var x=e.pageX-_gx;//控件左上角到屏幕左上角的相对位置
    var y=e.pageY-_gy;
    $("#myimgbox").css({"top":y,"left":x});
  }
}).mouseup(function(e){
  endX = e.pageX;
  endY = e.pageY;
  let d = Math.sqrt((startX - endX) * (startX - endX) + (startY - endY) * (startY - endY));
  console.log("d:",d);
  if (d === 0 || d < 7) {
    console.log("执行了点击事件");
  } else {
    console.log("执行了拖拽事件");
  }
  gmove=false;
});

6、效果展示

7、插件下载

码云Gitee:https://gitee.com/zheng_yongtao/chrome-plug-in.git

8、体验

下载后直接拉进插件中心即可,不懂的可以参照之前的blog中的使用教程:https://blog.csdn.net/Twinkle_sone/article/details/115561476

相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
API Windows
浅尝浏览器桌面通知 Notification
浅尝浏览器桌面通知 Notification
266 0
|
数据采集 Web App开发 编解码
在 Linux 服务器中创建假桌面运行模拟浏览器有头模式
在 Linux 服务器中创建假桌面运行模拟浏览器有头模式
214 0
|
移动开发 JavaScript 前端开发
【浏览器&exe桌面应用】用nw.js &Electron -HTML和JavaScript制作exe桌面程序-打造浏览器,查询机客户端,大屏展示客户端
【浏览器&exe桌面应用】用nw.js &Electron -HTML和JavaScript制作exe桌面程序-打造浏览器,查询机客户端,大屏展示客户端
183 0
|
数据可视化
浏览器 Notification 桌面推送通知
可视化桌面通知,跟遗忘说再见
376 3
浏览器 Notification 桌面推送通知
|
Web App开发 HTML5 移动开发
浏览器桌面通知Notification实践
  一言不合就上图:   最近常常在浏览器看到这样的消息推送,还有QQ.com的推送,现在我对这个不了解,不知道叫消息自动推送对不对,这个时chrome浏览器的截图,出现在右下角,其他浏览器的样式可能有些微差别。
2898 0
|
Web App开发 移动开发 前端开发
H5 notification浏览器桌面通知
Notification是HTML5新增的API,用于向用户配置和显示桌面通知。上次在别的网站上看到别人的通知弹窗,好奇之余也想知道如何实现的。实际去查一下发现并不复杂,且可以说比较简单,故写篇博客分享给大家,希望能帮你们了解这个API。 npm包: 我还发了一个npm包:notification-Koro1,非常轻量简洁,觉得不错的话,点个Star吧~ chrome下Notification的表现: 以谷歌为例,一开始需要用户允许通知:
444 0
H5 notification浏览器桌面通知
|
移动开发 前端开发 API
Notification 浏览器桌面通知
Notification是HTML5新增的API,用于想用户配置和现实桌面通知。这些通知的外观和特定功能因平台而异。 Notification通知是脱离浏览器的,即使用户没有停留在当前的标签页,甚至最小化了浏览器,也会在主屏幕的右下角显示通知,然后过一段时间后消失。 Notification在操作中也可以监听通知的显示,点击,关闭等事件。
365 0
|
Java
Java 自动化 - 调用sikuli实现图像识别桌面自动化:打开浏览器查询天气实例演示,java调用图形化脚本语言sikuli实现自动化
Java 自动化 - 调用sikuli实现图像识别桌面自动化:打开浏览器查询天气实例演示,java调用图形化脚本语言sikuli实现自动化
514 0
Java 自动化 - 调用sikuli实现图像识别桌面自动化:打开浏览器查询天气实例演示,java调用图形化脚本语言sikuli实现自动化
|
Web App开发
Chrome 插件篇-Unsplash插件:浏览器背景桌面设置,漂亮的背景桌面插件,时时更新
Chrome 插件篇-Unsplash插件:浏览器背景桌面设置,漂亮的背景桌面插件,时时更新
289 0
Chrome 插件篇-Unsplash插件:浏览器背景桌面设置,漂亮的背景桌面插件,时时更新
|
监控 网络协议 前端开发
如何从Web浏览器远程监视Linux服务器和桌面
当你要监视一台Linux机器时,你会有很多的选择。虽然现在有很多产品质量监控方案(比如 Nagios、 Zabbix、 Zenoss),它们拥有华丽的UI,可扩展监控,易于理解的报告等等,这些方案对于大多数终端用户都太过于强大了。如果你只需检查Linux服务器或桌面的基本状态(比如,CPU负载、内存使用、活跃进程),就请考虑一下linux-dash。
456 0
如何从Web浏览器远程监视Linux服务器和桌面