├── README.md
├── .gitattributes
├── .gitignore
└── box-shadow.html


/README.md:
--------------------------------------------------------------------------------
 1 | image shown by box-shadow
 2 | ===============
 3 | We can use CSS3 property box-shadow to show any image, it's funny!
 4 | 
 5 | How to use?
 6 | ---------------
 7 | <ol>
 8 | 	<li>Visit [here](http://rawgithub.com/zhangxinxu/boxShadow/master/box-shadow.html).</li>
 9 | 	<li>Select a image;</li>
10 | 	<li>Done!</li>
11 | </ol>
12 | 
13 | Good luck for you!


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
 1 | # Auto detect text files and perform LF normalization
 2 | * text=auto
 3 | 
 4 | # Custom for Visual Studio
 5 | *.cs     diff=csharp
 6 | *.sln    merge=union
 7 | *.csproj merge=union
 8 | *.vbproj merge=union
 9 | *.fsproj merge=union
10 | *.dbproj merge=union
11 | 
12 | # Standard to msysgit
13 | *.doc	 diff=astextplain
14 | *.DOC	 diff=astextplain
15 | *.docx diff=astextplain
16 | *.DOCX diff=astextplain
17 | *.dot  diff=astextplain
18 | *.DOT  diff=astextplain
19 | *.pdf  diff=astextplain
20 | *.PDF	 diff=astextplain
21 | *.rtf	 diff=astextplain
22 | *.RTF	 diff=astextplain
23 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | #################
  2 | ## Eclipse
  3 | #################
  4 | 
  5 | *.pydevproject
  6 | .project
  7 | .metadata
  8 | bin/
  9 | tmp/
 10 | *.tmp
 11 | *.bak
 12 | *.swp
 13 | *~.nib
 14 | local.properties
 15 | .classpath
 16 | .settings/
 17 | .loadpath
 18 | 
 19 | # External tool builders
 20 | .externalToolBuilders/
 21 | 
 22 | # Locally stored "Eclipse launch configurations"
 23 | *.launch
 24 | 
 25 | # CDT-specific
 26 | .cproject
 27 | 
 28 | # PDT-specific
 29 | .buildpath
 30 | 
 31 | 
 32 | #################
 33 | ## Visual Studio
 34 | #################
 35 | 
 36 | ## Ignore Visual Studio temporary files, build results, and
 37 | ## files generated by popular Visual Studio add-ons.
 38 | 
 39 | # User-specific files
 40 | *.suo
 41 | *.user
 42 | *.sln.docstates
 43 | 
 44 | # Build results
 45 | 
 46 | [Dd]ebug/
 47 | [Rr]elease/
 48 | x64/
 49 | build/
 50 | [Bb]in/
 51 | [Oo]bj/
 52 | 
 53 | # MSTest test Results
 54 | [Tt]est[Rr]esult*/
 55 | [Bb]uild[Ll]og.*
 56 | 
 57 | *_i.c
 58 | *_p.c
 59 | *.ilk
 60 | *.meta
 61 | *.obj
 62 | *.pch
 63 | *.pdb
 64 | *.pgc
 65 | *.pgd
 66 | *.rsp
 67 | *.sbr
 68 | *.tlb
 69 | *.tli
 70 | *.tlh
 71 | *.tmp
 72 | *.tmp_proj
 73 | *.log
 74 | *.vspscc
 75 | *.vssscc
 76 | .builds
 77 | *.pidb
 78 | *.log
 79 | *.scc
 80 | 
 81 | # Visual C++ cache files
 82 | ipch/
 83 | *.aps
 84 | *.ncb
 85 | *.opensdf
 86 | *.sdf
 87 | *.cachefile
 88 | 
 89 | # Visual Studio profiler
 90 | *.psess
 91 | *.vsp
 92 | *.vspx
 93 | 
 94 | # Guidance Automation Toolkit
 95 | *.gpState
 96 | 
 97 | # ReSharper is a .NET coding add-in
 98 | _ReSharper*/
 99 | *.[Rr]e[Ss]harper
100 | 
101 | # TeamCity is a build add-in
102 | _TeamCity*
103 | 
104 | # DotCover is a Code Coverage Tool
105 | *.dotCover
106 | 
107 | # NCrunch
108 | *.ncrunch*
109 | .*crunch*.local.xml
110 | 
111 | # Installshield output folder
112 | [Ee]xpress/
113 | 
114 | # DocProject is a documentation generator add-in
115 | DocProject/buildhelp/
116 | DocProject/Help/*.HxT
117 | DocProject/Help/*.HxC
118 | DocProject/Help/*.hhc
119 | DocProject/Help/*.hhk
120 | DocProject/Help/*.hhp
121 | DocProject/Help/Html2
122 | DocProject/Help/html
123 | 
124 | # Click-Once directory
125 | publish/
126 | 
127 | # Publish Web Output
128 | *.Publish.xml
129 | *.pubxml
130 | 
131 | # NuGet Packages Directory
132 | ## TODO: If you have NuGet Package Restore enabled, uncomment the next line
133 | #packages/
134 | 
135 | # Windows Azure Build Output
136 | csx
137 | *.build.csdef
138 | 
139 | # Windows Store app package directory
140 | AppPackages/
141 | 
142 | # Others
143 | sql/
144 | *.Cache
145 | ClientBin/
146 | [Ss]tyle[Cc]op.*
147 | ~$*
148 | *~
149 | *.dbmdl
150 | *.[Pp]ublish.xml
151 | *.pfx
152 | *.publishsettings
153 | 
154 | # RIA/Silverlight projects
155 | Generated_Code/
156 | 
157 | # Backup & report files from converting an old project file to a newer
158 | # Visual Studio version. Backup files are not needed, because we have git ;-)
159 | _UpgradeReport_Files/
160 | Backup*/
161 | UpgradeLog*.XML
162 | UpgradeLog*.htm
163 | 
164 | # SQL Server files
165 | App_Data/*.mdf
166 | App_Data/*.ldf
167 | 
168 | #############
169 | ## Windows detritus
170 | #############
171 | 
172 | # Windows image file caches
173 | Thumbs.db
174 | ehthumbs.db
175 | 
176 | # Folder config file
177 | Desktop.ini
178 | 
179 | # Recycle Bin used on file shares
180 | $RECYCLE.BIN/
181 | 
182 | # Mac crap
183 | .DS_Store
184 | 
185 | 
186 | #############
187 | ## Python
188 | #############
189 | 
190 | *.py[co]
191 | 
192 | # Packages
193 | *.egg
194 | *.egg-info
195 | dist/
196 | build/
197 | eggs/
198 | parts/
199 | var/
200 | sdist/
201 | develop-eggs/
202 | .installed.cfg
203 | 
204 | # Installer logs
205 | pip-log.txt
206 | 
207 | # Unit test / coverage reports
208 | .coverage
209 | .tox
210 | 
211 | #Translations
212 | *.mo
213 | 
214 | #Mr Developer
215 | .mr.developer.cfg
216 | 


--------------------------------------------------------------------------------
/box-shadow.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | <meta charset="utf-8">
 5 | <meta http-equiv="description" content="任意图片使用CSS3 box-shadow生成 » 张鑫旭-鑫空间-鑫生活" />
 6 | <meta name="description" content="张鑫旭web前端学习实例页面 任意图片使用CSS3 box-shadow生成" />
 7 | <meta name="keywords" content="box-shadow, canvas, 图片, 像素" />
 8 | <meta name="author" content="张鑫旭, zhangxixnu" />
 9 | <title>任意图片使用CSS3 box-shadow表示</title>
10 | <style>
11 | body { margin: 0; }
12 | input[type=file] { width: 100%; font-size: 80px; position: absolute; }
13 | label { display: block; height: 100px; border: 5px solid #a0b3d6; background-color: #f0f3f9; font: bold 60px/100px 'microsoft yahei'; text-align: center; position: relative;  -webkit-transition:  background-color .35s; transition:  background-color .35s; }
14 | label:hover { background-color: #cad5eb; cursor: pointer; }
15 | pre { display: none; font-size: 12px; background-color: #f5f5f5; border: 1px solid #ddd; padding: 5px 10px; font-family: Monaco, monospace; white-space: pre-wrap; word-wrap: break-word; }
16 | .show_image { -webkit-transition: all .35s; transition: all .35s; }
17 | .show_image i { display: block; width: 1px; height: 1px; margin: -1px 0 0 -1px; }
18 | </style>
19 | </head>
20 | 
21 | <body>
22 | <input id="file" type="file"><label for="file">请选择图片(小于100K)</label>
23 | <p id="showImage" class="show_image"><i></i></p>
24 | <pre></pre>
25 | 
26 | <script>
27 | if (window.addEventListener) {
28 | 	var eleFile = document.querySelector("#file"), eleShow = document.querySelector("#showImage"), elePre = document.querySelector("pre");
29 | 	var canvas = document.createElement("canvas");
30 | 	var context = canvas.getContext("2d");
31 | 	
32 | 	eleFile.addEventListener("change", function(event) {
33 | 		var file = event.target.files[0];
34 | 		if (!file) { return; }
35 | 		if (file.type.indexOf("image") == 0 || (!file.type && /\.(?:jpg|png|gif)$/.test(file.name) /* for IE10 */)) {
36 | 			if (file.size >= 100 * 1024) {
37 | 				alert('您这张"'+ file.name +'"图片大小过大，应小于100k');	
38 | 			} else {
39 | 				var reader = new FileReader()
40 | 				reader.onload = function(e) {
41 | 					var image = new Image();
42 | 					image.onload = function() {
43 | 						var width = this.width, height = this.height;
44 | 						canvas.width = width;
45 | 						canvas.height = height;
46 | 						
47 | 						context.drawImage(this, 0, 0, width, height);
48 | 						var imageData = context.getImageData(0, 0, width, height);
49 | 						var arrBoxShadow = [], length = imageData.data.length;
50 | 						// 遍历颜色参数值
51 | 						for (var index = 0; index < length; index++) {		
52 | 							if (index % 4 === 0) {
53 | 								var x = index / 4 % width + 1, y = Math.floor(index / 4 / width) + 1, alpha = Math.round(imageData.data[index + 3] / 255 * 100) / 100;
54 | 								if (imageData.data[index + 3] == 255) {
55 | 									var hex1 = imageData.data[index].toString(16), hex2 = imageData.data[index + 1].toString(16), hex3 = imageData.data[index + 2].toString(16);
56 | 									if (hex1.length == 1) hex1 = "0" + hex1;
57 | 									if (hex2.length == 1) hex2 = "0" + hex2;
58 | 									if (hex3.length == 1) hex3 = "0" + hex3;
59 | 									
60 | 									var hex = hex1 + hex2 + hex3;
61 | 									if (hex1.slice(0,1) == hex1.slice(-1) && hex2.slice(0,1) == hex2.slice(-1) && hex3.slice(0,1) == hex3.slice(-1)) {
62 | 										hex = hex1.slice(-1) + hex2.slice(-1) + hex3.slice(-1);
63 | 									}									
64 | 									
65 | 									arrBoxShadow.push(x + "px " + y + "px #" + hex);
66 | 								} else if (alpha > 0) {
67 | 									arrBoxShadow.push(x + "px " + y + "px rgba(" + 
68 | 										[imageData.data[index], imageData.data[index + 1], imageData.data[index + 2], alpha].join() + 
69 | 									")");
70 | 								}									
71 | 							}
72 | 						};
73 | 						
74 | 						eleShow.style.width = width + "px";
75 | 						eleShow.style.height = height + "px";
76 | 						
77 | 						// 盒阴影图片显示
78 | 						eleShow.querySelector("i").style.boxShadow = arrBoxShadow.join();
79 | 						
80 | 						// 代码显示
81 | 						elePre.style.display = "block";
82 | 						elePre.innerHTML = "box-shadow: " + arrBoxShadow.join(",");
83 | 					};
84 | 					image.src = e.target.result;
85 | 				}
86 | 				reader.readAsDataURL(file);	
87 | 			}			
88 | 		} else {
89 | 			alert('文件"' + file.name + '"不是图片。');	
90 | 		}
91 | 	});
92 | }
93 | </script>
94 | </body>
95 | </html>
96 | 


--------------------------------------------------------------------------------