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

相信很多人都玩过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-pythonvideo = cv2.VideoCapture()if not video.open(video_path):print("无法打开文件")exit(1)count = 1while True:_, frame = video.read()if frame is None:breakif count % EXTRACT_FREQUENCY == 0:save_path = "{}/{:>03d}.jpg".format(dst_folder, index)print(save_path)cv2.imwrite(save_path, frame)index += 1count += 1video.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.pageXstartY = e.pageYconsole.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