关于网页版伪春菜橘花shell的加载方法研究

最新推荐文章于 2024-06-14 15:02:13 发布

fancyang

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量93

点赞数

分类专栏：萌动精灵从01到图灵文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/fancyang/article/details/129978984

版权

萌动精灵同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

从01到图灵

13 篇文章 0 订阅

订阅专栏

橘花shell的同一表情的PNG分为两部分，一是黑色背景彩色shell图案的PNG文件，一是黑色背景白色shell蒙版的PNA文件（改了扩展名的PNG文件）。当ssp加载shell时，会自动的用PNA给PNG的彩色shell添加遮罩，原理是用PNA的白色蒙版保留PNG的彩色内容，PNA的黑色部分则以透明方式给PNG的黑色部分裁剪出来不予显示，大家来看看示例

用PHOTOSHOP打开PNA和PNG，复制PNA图层到PNG图层上，并按ctrl+j复制PNG图层

在PNA的图层面板的通道选项中按ctrl点选红色通道，出现选区，右键选择反选

切换到PNG的图层会看到选区内容会将整个黑色背景选中。此时按Del键，黑色背景就去掉了。

如图：

以上试验表明，能否通过一个方法，比如JS脚本，使其在不改变原shell内容的基础上，实现shell的透明轮廓及半透明阴影的加载？

答案是肯定的，我这里的思路就是先将PNA的黑色背景用JS或html5+canvas抠掉，再用-webkit-mask-image将抠掉背景的内容添加mask蒙版给PNG遮罩。

下面给出了人物鼠标拖动和-webkit-mask-image遮罩的代码，关于抠图算法还在研究中

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>


<title>触摸屏拖动图片</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<SCRIPT language=JavaScript>
function init() {


    window.document.onmousemove = mouseMove
    window.document.onmousedown = mouseDown
    window.document.onmouseup = mouseUp
    window.document.ondragstart = mouseStop


   var mypic = document.getElementById("mypic");
   mypic['draging'] = false;
   mypic.addEventListener('touchstart', dragStart, false);
   mypic.addEventListener('touchmove', dragMove, false);

}
function mouseDown() {
    if (drag) {
        clickleft = window.event.x - parseInt(dragObj.style.left)
        clicktop = window.event.y - parseInt(dragObj.style.top)
        dragObj.style.zIndex += 1
        move = 1
    }
}
function mouseStop() {
    window.event.returnValue = false
}
function mouseMove() {
    if (move) {
        dragObj.style.left = window.event.x - clickleft
        dragObj.style.top = window.event.y - clicktop
    }
}
function mouseUp() {
    move = 0
}


function info(text) {
   document.getElementById("info").innerText = "调试信息:"+text;
}
 
function dragStart(e) {
   var e = e || window.event;
   var mypic = document.getElementById("mypic");
   mypic['ori_x'] = e.targetTouches[0].clientX;
   mypic['ori_y'] = e.targetTouches[0].clientY;
   mypic['ori_left'] = parseInt(mypic.style.left);
   mypic['ori_top'] = parseInt(mypic.style.top);
   info("touch start");
}
 
function dragMove(e){
   e.preventDefault();                       //避免默认的事件处理
   var e = e || window.event;                //获取真实的事件变量
   var myElement = e.srcElement || e.target; //获取事件的源DOM
 
   var mypic = document.getElementById("mypic");
   mypic['draging'] = true;
 
   myElement.ontouchend= function(){
      mypic['draging'] = false;
   info("touch end");
   }
 
   document.ontouchmove= function(eMove){
      var eMove = eMove || window.event;
      info("touch move");
      if(mypic['draging'] == true){
         myElement.style.left = eMove.targetTouches[0].clientX - mypic['ori_x'] + mypic['ori_left'] + "px";
         myElement.style.top = eMove.targetTouches[0].clientY - mypic['ori_y'] + mypic['ori_top'] + "px";
         return false;
      }
   }
}
</SCRIPT>
</head>
<body onload="init()">
<h1 id="info"></h1>
<div id="mypic" onMouseOut="drag=0" onMouseOver="dragObj=mypic; drag=1;" style="height: 60; left: 200; position: absolute; top: 200; width: 120">
  <link href="" style="text/css" rel="stylesheet"/>
<dd>    <meta charset="utf-8">
  <title> mask遮罩蒙版 </title>
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
 img{-webkit-mask-image:url('skin/Taromati/miku(初音)/surface0000 - 副本1.png');"Obj=shell"}
  </style><img  alt border="0"style="left:80px;top:80px;position:absolute"   src="skin/Taromati/miku(初音)/surface0000.png"></dd></div>
 </body>
</html>

fancyang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于网页版伪春菜橘花shell的加载方法研究

橘花shell的同一表情的PNG分为两部分，一是黑色背景彩色shell图案的PNG文件，一是黑色背景白色shell蒙版的PNA文件（改了扩展名的PNG文件）。当ssp加载shell时，会自动的用PNA给PNG的彩色shell添加遮罩，原理是用PNA的白色蒙版保留PNG的彩色内容，PNA的黑色部分则以透明方式给PNG的黑色部分裁剪出来不予显示，大家来看看示例。以上试验表明，能否通过一个方法，比如JS脚本，使其在不改变原shell内容的基础上，实现shell的透明轮廓及半透明阴影的加载？
复制链接

扫一扫