相信很多人都玩过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以后,我们就可以实现这个功能了。
#去除图片背景 #参数说明 #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