Ben Coleman
5 年前
共有 7 个文件被更改，包括 203 次插入 和 77 次删除
分列视图
Diff 选项
-
+29 -11_tools/gallery.js
-
+29 -11azure-docs/index.html
-
+29 -11azure-dotcom/index.html
-
+29 -11azure-patterns/index.html
-
+29 -11learning-site/index.html
-
+29 -11logos/index.html
-
+29 -11other/index.html
+ 29
- 11
_tools/gallery.js
查看文件
| @@ -22,7 +22,7 @@ body { | |||
| margin: 0; | |||
| } | |||
| .bg0 { | |||
| background-image: url("../_tools/background.png") | |||
| background-image: url("https://github.com/benc-uk/icon-collection/raw/master/_tools/background.png") | |||
| } | |||
| .bg1 { | |||
| background-color: #333; | |||
| @@ -65,6 +65,16 @@ h1 { | |||
| top: -2rem; | |||
| font-size: 1.5rem; | |||
| } | |||
| .pngbox { | |||
| position: absolute; | |||
| top: 2rem; | |||
| right: 1rem; | |||
| font-size: 1.5rem; | |||
| } | |||
| input[type="checkbox"] { | |||
| width: 1.6em; | |||
| height: 1.6em; | |||
| } | |||
| .label { | |||
| height: 2.5em; | |||
| line-height: 1em; | |||
| @@ -80,7 +90,8 @@ h1 { | |||
| <body> | |||
| <div class="top"> | |||
| <h1>${TITLE}</h1> | |||
| <span class="find">Finder: <input onkeyup="search()" id="finder"><br></span> | |||
| <span class="find">Finder: <input onkeyup="search()" id="finder"><br></span> | |||
| <div class="pngbox"><input type="checkbox" id="pngcheck"><label for="pngcheck">Download as PNG</label></div> | |||
| <button onclick="toggleBg()">Change Background</button> | |||
| </div> | |||
| <div class="grid"> | |||
| @@ -120,19 +131,26 @@ function search() { | |||
| } | |||
| function download(f, e) { | |||
| let a = document.createElement('a') | |||
| a.href = f | |||
| a.download = f | |||
| //a.click() | |||
| console.log(getBase64Image(e)) | |||
| var downloadPNG = document.getElementById("pngcheck").checked; | |||
| if(downloadPNG) { | |||
| var data = getBase64Image(e); | |||
| let a = document.createElement('a') | |||
| a.href = "data:application/octet-stream;base64," + data | |||
| a.download = f.replace('.svg', '.png') | |||
| a.click() | |||
| } else { | |||
| let a = document.createElement('a') | |||
| a.href = f | |||
| a.download = f | |||
| a.click() | |||
| } | |||
| } | |||
| function getBase64Image(img) { | |||
| var canvas = document.createElement("canvas"); | |||
| canvas.width = img.width; | |||
| canvas.height = img.height; | |||
| canvas.width = img.naturalWidth; | |||
| canvas.height = img.naturalHeight; | |||
| console.log(canvas.width , canvas.height) | |||
| var ctx = canvas.getContext("2d"); | |||
| ctx.drawImage(img, 0, 0); | |||
| var dataURL = canvas.toDataURL("image/png"); | |||
+ 29
- 11
azure-docs/index.html
查看文件
| @@ -10,7 +10,7 @@ body { | |||
| margin: 0; | |||
| } | |||
| .bg0 { | |||
| background-image: url("../_tools/background.png") | |||
| background-image: url("https://github.com/benc-uk/icon-collection/raw/master/_tools/background.png") | |||
| } | |||
| .bg1 { | |||
| background-color: #333; | |||
| @@ -53,6 +53,16 @@ h1 { | |||
| top: -2rem; | |||
| font-size: 1.5rem; | |||
| } | |||
| .pngbox { | |||
| position: absolute; | |||
| top: 2rem; | |||
| right: 1rem; | |||
| font-size: 1.5rem; | |||
| } | |||
| input[type="checkbox"] { | |||
| width: 1.6em; | |||
| height: 1.6em; | |||
| } | |||
| .label { | |||
| height: 2.5em; | |||
| line-height: 1em; | |||
| @@ -68,7 +78,8 @@ h1 { | |||
| <body> | |||
| <div class="top"> | |||
| <h1>Azure Docs</h1> | |||
| <span class="find">Finder: <input onkeyup="search()" id="finder"><br></span> | |||
| <span class="find">Finder: <input onkeyup="search()" id="finder"><br></span> | |||
| <div class="pngbox"><input type="checkbox" id="pngcheck"><label for="pngcheck">Download as PNG</label></div> | |||
| <button onclick="toggleBg()">Change Background</button> | |||
| </div> | |||
| <div class="grid"> | |||
| @@ -288,19 +299,26 @@ function search() { | |||
| } | |||
| function download(f, e) { | |||
| let a = document.createElement('a') | |||
| a.href = f | |||
| a.download = f | |||
| //a.click() | |||
| console.log(getBase64Image(e)) | |||
| var downloadPNG = document.getElementById("pngcheck").checked; | |||
| if(downloadPNG) { | |||
| var data = getBase64Image(e); | |||
| let a = document.createElement('a') | |||
| a.href = "data:application/octet-stream;base64," + data | |||
| a.download = f.replace('.svg', '.png') | |||
| a.click() | |||
| } else { | |||
| let a = document.createElement('a') | |||
| a.href = f | |||
| a.download = f | |||
| a.click() | |||
| } | |||
| } | |||
| function getBase64Image(img) { | |||
| var canvas = document.createElement("canvas"); | |||
| canvas.width = img.width; | |||
| canvas.height = img.height; | |||
| canvas.width = img.naturalWidth; | |||
| canvas.height = img.naturalHeight; | |||
| console.log(canvas.width , canvas.height) | |||
| var ctx = canvas.getContext("2d"); | |||
| ctx.drawImage(img, 0, 0); | |||
| var dataURL = canvas.toDataURL("image/png"); | |||
+ 29
- 11
azure-dotcom/index.html
查看文件
| @@ -10,7 +10,7 @@ body { | |||
| margin: 0; | |||
| } | |||
| .bg0 { | |||
| background-image: url("../_tools/background.png") | |||
| background-image: url("https://github.com/benc-uk/icon-collection/raw/master/_tools/background.png") | |||
| } | |||
| .bg1 { | |||
| background-color: #333; | |||
| @@ -53,6 +53,16 @@ h1 { | |||
| top: -2rem; | |||
| font-size: 1.5rem; | |||
| } | |||
| .pngbox { | |||
| position: absolute; | |||
| top: 2rem; | |||
| right: 1rem; | |||
| font-size: 1.5rem; | |||
| } | |||
| input[type="checkbox"] { | |||
| width: 1.6em; | |||
| height: 1.6em; | |||
| } | |||
| .label { | |||
| height: 2.5em; | |||
| line-height: 1em; | |||
| @@ -68,7 +78,8 @@ h1 { | |||
| <body> | |||
| <div class="top"> | |||
| <h1>Azure.com Various</h1> | |||
| <span class="find">Finder: <input onkeyup="search()" id="finder"><br></span> | |||
| <span class="find">Finder: <input onkeyup="search()" id="finder"><br></span> | |||
| <div class="pngbox"><input type="checkbox" id="pngcheck"><label for="pngcheck">Download as PNG</label></div> | |||
| <button onclick="toggleBg()">Change Background</button> | |||
| </div> | |||
| <div class="grid"> | |||
| @@ -111,19 +122,26 @@ function search() { | |||
| } | |||
| function download(f, e) { | |||
| let a = document.createElement('a') | |||
| a.href = f | |||
| a.download = f | |||
| //a.click() | |||
| console.log(getBase64Image(e)) | |||
| var downloadPNG = document.getElementById("pngcheck").checked; | |||
| if(downloadPNG) { | |||
| var data = getBase64Image(e); | |||
| let a = document.createElement('a') | |||
| a.href = "data:application/octet-stream;base64," + data | |||
| a.download = f.replace('.svg', '.png') | |||
| a.click() | |||
| } else { | |||
| let a = document.createElement('a') | |||
| a.href = f | |||
| a.download = f | |||
| a.click() | |||
| } | |||
| } | |||
| function getBase64Image(img) { | |||
| var canvas = document.createElement("canvas"); | |||
| canvas.width = img.width; | |||
| canvas.height = img.height; | |||
| canvas.width = img.naturalWidth; | |||
| canvas.height = img.naturalHeight; | |||
| console.log(canvas.width , canvas.height) | |||
| var ctx = canvas.getContext("2d"); | |||
| ctx.drawImage(img, 0, 0); | |||
| var dataURL = canvas.toDataURL("image/png"); | |||
+ 29
- 11
azure-patterns/index.html
查看文件
| @@ -10,7 +10,7 @@ body { | |||
| margin: 0; | |||
| } | |||
| .bg0 { | |||
| background-image: url("../_tools/background.png") | |||
| background-image: url("https://github.com/benc-uk/icon-collection/raw/master/_tools/background.png") | |||
| } | |||
| .bg1 { | |||
| background-color: #333; | |||
| @@ -53,6 +53,16 @@ h1 { | |||
| top: -2rem; | |||
| font-size: 1.5rem; | |||
| } | |||
| .pngbox { | |||
| position: absolute; | |||
| top: 2rem; | |||
| right: 1rem; | |||
| font-size: 1.5rem; | |||
| } | |||
| input[type="checkbox"] { | |||
| width: 1.6em; | |||
| height: 1.6em; | |||
| } | |||
| .label { | |||
| height: 2.5em; | |||
| line-height: 1em; | |||
| @@ -68,7 +78,8 @@ h1 { | |||
| <body> | |||
| <div class="top"> | |||
| <h1>Azure Patterns Collection</h1> | |||
| <span class="find">Finder: <input onkeyup="search()" id="finder"><br></span> | |||
| <span class="find">Finder: <input onkeyup="search()" id="finder"><br></span> | |||
| <div class="pngbox"><input type="checkbox" id="pngcheck"><label for="pngcheck">Download as PNG</label></div> | |||
| <button onclick="toggleBg()">Change Background</button> | |||
| </div> | |||
| <div class="grid"> | |||
| @@ -798,19 +809,26 @@ function search() { | |||
| } | |||
| function download(f, e) { | |||
| let a = document.createElement('a') | |||
| a.href = f | |||
| a.download = f | |||
| //a.click() | |||
| console.log(getBase64Image(e)) | |||
| var downloadPNG = document.getElementById("pngcheck").checked; | |||
| if(downloadPNG) { | |||
| var data = getBase64Image(e); | |||
| let a = document.createElement('a') | |||
| a.href = "data:application/octet-stream;base64," + data | |||
| a.download = f.replace('.svg', '.png') | |||
| a.click() | |||
| } else { | |||
| let a = document.createElement('a') | |||
| a.href = f | |||
| a.download = f | |||
| a.click() | |||
| } | |||
| } | |||
| function getBase64Image(img) { | |||
| var canvas = document.createElement("canvas"); | |||
| canvas.width = img.width; | |||
| canvas.height = img.height; | |||
| canvas.width = img.naturalWidth; | |||
| canvas.height = img.naturalHeight; | |||
| console.log(canvas.width , canvas.height) | |||
| var ctx = canvas.getContext("2d"); | |||
| ctx.drawImage(img, 0, 0); | |||
| var dataURL = canvas.toDataURL("image/png"); | |||
+ 29
- 11
learning-site/index.html
查看文件
| @@ -10,7 +10,7 @@ body { | |||
| margin: 0; | |||
| } | |||
| .bg0 { | |||
| background-image: url("../_tools/background.png") | |||
| background-image: url("https://github.com/benc-uk/icon-collection/raw/master/_tools/background.png") | |||
| } | |||
| .bg1 { | |||
| background-color: #333; | |||
| @@ -53,6 +53,16 @@ h1 { | |||
| top: -2rem; | |||
| font-size: 1.5rem; | |||
| } | |||
| .pngbox { | |||
| position: absolute; | |||
| top: 2rem; | |||
| right: 1rem; | |||
| font-size: 1.5rem; | |||
| } | |||
| input[type="checkbox"] { | |||
| width: 1.6em; | |||
| height: 1.6em; | |||
| } | |||
| .label { | |||
| height: 2.5em; | |||
| line-height: 1em; | |||
| @@ -68,7 +78,8 @@ h1 { | |||
| <body> | |||
| <div class="top"> | |||
| <h1>Microsoft Learning Site</h1> | |||
| <span class="find">Finder: <input onkeyup="search()" id="finder"><br></span> | |||
| <span class="find">Finder: <input onkeyup="search()" id="finder"><br></span> | |||
| <div class="pngbox"><input type="checkbox" id="pngcheck"><label for="pngcheck">Download as PNG</label></div> | |||
| <button onclick="toggleBg()">Change Background</button> | |||
| </div> | |||
| <div class="grid"> | |||
| @@ -226,19 +237,26 @@ function search() { | |||
| } | |||
| function download(f, e) { | |||
| let a = document.createElement('a') | |||
| a.href = f | |||
| a.download = f | |||
| //a.click() | |||
| console.log(getBase64Image(e)) | |||
| var downloadPNG = document.getElementById("pngcheck").checked; | |||
| if(downloadPNG) { | |||
| var data = getBase64Image(e); | |||
| let a = document.createElement('a') | |||
| a.href = "data:application/octet-stream;base64," + data | |||
| a.download = f.replace('.svg', '.png') | |||
| a.click() | |||
| } else { | |||
| let a = document.createElement('a') | |||
| a.href = f | |||
| a.download = f | |||
| a.click() | |||
| } | |||
| } | |||
| function getBase64Image(img) { | |||
| var canvas = document.createElement("canvas"); | |||
| canvas.width = img.width; | |||
| canvas.height = img.height; | |||
| canvas.width = img.naturalWidth; | |||
| canvas.height = img.naturalHeight; | |||
| console.log(canvas.width , canvas.height) | |||
| var ctx = canvas.getContext("2d"); | |||
| ctx.drawImage(img, 0, 0); | |||
| var dataURL = canvas.toDataURL("image/png"); | |||
+ 29
- 11
logos/index.html
查看文件
| @@ -10,7 +10,7 @@ body { | |||
| margin: 0; | |||
| } | |||
| .bg0 { | |||
| background-image: url("../_tools/background.png") | |||
| background-image: url("https://github.com/benc-uk/icon-collection/raw/master/_tools/background.png") | |||
| } | |||
| .bg1 { | |||
| background-color: #333; | |||
| @@ -53,6 +53,16 @@ h1 { | |||
| top: -2rem; | |||
| font-size: 1.5rem; | |||
| } | |||
| .pngbox { | |||
| position: absolute; | |||
| top: 2rem; | |||
| right: 1rem; | |||
| font-size: 1.5rem; | |||
| } | |||
| input[type="checkbox"] { | |||
| width: 1.6em; | |||
| height: 1.6em; | |||
| } | |||
| .label { | |||
| height: 2.5em; | |||
| line-height: 1em; | |||
| @@ -68,7 +78,8 @@ h1 { | |||
| <body> | |||
| <div class="top"> | |||
| <h1>Logos & Brands</h1> | |||
| <span class="find">Finder: <input onkeyup="search()" id="finder"><br></span> | |||
| <span class="find">Finder: <input onkeyup="search()" id="finder"><br></span> | |||
| <div class="pngbox"><input type="checkbox" id="pngcheck"><label for="pngcheck">Download as PNG</label></div> | |||
| <button onclick="toggleBg()">Change Background</button> | |||
| </div> | |||
| <div class="grid"> | |||
| @@ -156,19 +167,26 @@ function search() { | |||
| } | |||
| function download(f, e) { | |||
| let a = document.createElement('a') | |||
| a.href = f | |||
| a.download = f | |||
| //a.click() | |||
| console.log(getBase64Image(e)) | |||
| var downloadPNG = document.getElementById("pngcheck").checked; | |||
| if(downloadPNG) { | |||
| var data = getBase64Image(e); | |||
| let a = document.createElement('a') | |||
| a.href = "data:application/octet-stream;base64," + data | |||
| a.download = f.replace('.svg', '.png') | |||
| a.click() | |||
| } else { | |||
| let a = document.createElement('a') | |||
| a.href = f | |||
| a.download = f | |||
| a.click() | |||
| } | |||
| } | |||
| function getBase64Image(img) { | |||
| var canvas = document.createElement("canvas"); | |||
| canvas.width = img.width; | |||
| canvas.height = img.height; | |||
| canvas.width = img.naturalWidth; | |||
| canvas.height = img.naturalHeight; | |||
| console.log(canvas.width , canvas.height) | |||
| var ctx = canvas.getContext("2d"); | |||
| ctx.drawImage(img, 0, 0); | |||
| var dataURL = canvas.toDataURL("image/png"); | |||
+ 29
- 11
other/index.html
查看文件
| @@ -10,7 +10,7 @@ body { | |||
| margin: 0; | |||
| } | |||
| .bg0 { | |||
| background-image: url("../_tools/background.png") | |||
| background-image: url("https://github.com/benc-uk/icon-collection/raw/master/_tools/background.png") | |||
| } | |||
| .bg1 { | |||
| background-color: #333; | |||
| @@ -53,6 +53,16 @@ h1 { | |||
| top: -2rem; | |||
| font-size: 1.5rem; | |||
| } | |||
| .pngbox { | |||
| position: absolute; | |||
| top: 2rem; | |||
| right: 1rem; | |||
| font-size: 1.5rem; | |||
| } | |||
| input[type="checkbox"] { | |||
| width: 1.6em; | |||
| height: 1.6em; | |||
| } | |||
| .label { | |||
| height: 2.5em; | |||
| line-height: 1em; | |||
| @@ -68,7 +78,8 @@ h1 { | |||
| <body> | |||
| <div class="top"> | |||
| <h1>Other Icons</h1> | |||
| <span class="find">Finder: <input onkeyup="search()" id="finder"><br></span> | |||
| <span class="find">Finder: <input onkeyup="search()" id="finder"><br></span> | |||
| <div class="pngbox"><input type="checkbox" id="pngcheck"><label for="pngcheck">Download as PNG</label></div> | |||
| <button onclick="toggleBg()">Change Background</button> | |||
| </div> | |||
| <div class="grid"> | |||
| @@ -125,19 +136,26 @@ function search() { | |||
| } | |||
| function download(f, e) { | |||
| let a = document.createElement('a') | |||
| a.href = f | |||
| a.download = f | |||
| //a.click() | |||
| console.log(getBase64Image(e)) | |||
| var downloadPNG = document.getElementById("pngcheck").checked; | |||
| if(downloadPNG) { | |||
| var data = getBase64Image(e); | |||
| let a = document.createElement('a') | |||
| a.href = "data:application/octet-stream;base64," + data | |||
| a.download = f.replace('.svg', '.png') | |||
| a.click() | |||
| } else { | |||
| let a = document.createElement('a') | |||
| a.href = f | |||
| a.download = f | |||
| a.click() | |||
| } | |||
| } | |||
| function getBase64Image(img) { | |||
| var canvas = document.createElement("canvas"); | |||
| canvas.width = img.width; | |||
| canvas.height = img.height; | |||
| canvas.width = img.naturalWidth; | |||
| canvas.height = img.naturalHeight; | |||
| console.log(canvas.width , canvas.height) | |||
| var ctx = canvas.getContext("2d"); | |||
| ctx.drawImage(img, 0, 0); | |||
| var dataURL = canvas.toDataURL("image/png"); | |||