A-A+

box阴影生成图片

2016年05月04日 htmlcss 暂无评论 阅读 72 次
box阴影生成图片
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>box阴影生成图片</title>
  6.     <style>
  7.         .box{
  8.             width: 1px;
  9.             height: 1px;
  10.             border: 1px solid red;
  11.             margin: 100px;
  12.             box-shadow: 0px 0px 1px rgba(255,255,0,1), 0px 1px 1px rgba(0,255,0,1), 0px 2px 1px rgba(255,0,0,1);
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <img src="demo.png" alt="" id="baseImg">
  18.     <!--[if gt IE 8]>
  19.     <![endif]-->
  20.     <script>
  21.         window.onload = function(){
  22. //取得原始图像和宽高信息
  23. var baseImg = document.getElementById('baseImg'),
  24.                 w = baseImg.width,
  25.                 h = baseImg.height;
  26. //新建canvas元素并设置大小
  27. var canvas = document.createElement('canvas'),
  28.                 ct = canvas.getContext('2d');
  29.             canvas.width = w;
  30.             canvas.height = h;
  31. //把图像复制到canvas并取得图像的每一像素的元素信息
  32.             ct.drawImage(baseImg, 0, 0, w, h);
  33. var imgData = ct.getImageData(0, 0, w, h).data;
  34. //遍历imageData,并将信息拼接成css字符串,作为box-shadow的值使用
  35. var col = row = i = p = 0,
  36.                 arr = [],
  37.                 dataLen = imgData.length;
  38. for(; i < dataLen; i++){
  39. //p表示第几个像素点,imgData里面每4个数据表示一个像素点,分别为像素的r、g、b、a值
  40. if(i % 4 === 0){
  41.                     p = Math.floor(i / 4);
  42.                     col = p % w;
  43.                     row = Math.floor(p / w);
  44. var t = (col + 1) + 'px ' + (row + 1) + 'px 0px rgba(' + imgData[i] + ',' + imgData[i + 1] + ',' + imgData[i + 2] + ',' + imgData[i + 3] + ')';
  45.                     arr.push(t);
  46.                 }
  47.             }
  48. //新建一个1*1像素的盒子,后面利用其阴影产生图片
  49. var box = document.createElement('div');
  50. //设置box的大小及阴影样式
  51. var boxShadowTxt = arr.join(',');
  52.             box.style.cssText = 'width: 1px!important;height: 1px!important;border: none!important;background: none!important;position:relative;top:-1px;left:-1px;box-shadow:' + boxShadowTxt;
  53. //把box的代码考下来,可以愉快的放到其他地方装逼了~~
  54. var code = box.outerHTML;
  55. //将box插入到body里,看看效果
  56.             document.body.innerHTML = code;
  57.         }
  58.     </script>
  59.     <!--[if lt IE 9]>
  60.         <p>浏览器不支持</p>
  61.     <![endif]-->
  62. </body>
  63. </html>
标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录