web3(自分用)
imgtosvg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image to SVG with OpenCV.js</title>
<script async src="https://docs.opencv.org/master/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
</head>
<body>
<input type="file" id="imageUpload" accept="image/*" />
<button onclick="convertToSvg()">Convert to SVG</button>
<div id="output"></div>
<script type="text/javascript">
function onOpenCvReady() {
document.body.innerHTML += '<br>OpenCV.js is ready.';
}
function convertToSvg() {
let inputElement = document.getElementById('imageUpload');
let file = inputElement.files[0];
if (file) {
let img = new Image();
img.src = URL.createObjectURL(file);
img.onload = () => {
let mat = cv.imread(img);
processImage(mat);
}
}
}
function processImage(src) {
try {
let gray = new cv.Mat();
cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY, 0);
let thresh = new cv.Mat();
cv.threshold(gray, thresh, 127, 255, cv.THRESH_BINARY_INV);
let contours = new cv.MatVector();
let hierarchy = new cv.Mat();
cv.findContours(thresh, contours, hierarchy, cv.RETR_EXTERNAL, cv.CHAIN_APPROX_SIMPLE);
let svgElem = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgElem.setAttribute('width', src.cols.toString());
svgElem.setAttribute('height', src.rows.toString());
for (let i = 0; i < contours.size(); i++) {
let contour = contours.get(i);
let points = [];
for (let j = 0; j < contour.data32S.length; j += 2) {
points.push(`${contour.data32S[j]},${contour.data32S[j + 1]}`);
}
// パス要素の生成
let path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
let d = "M" + points.join(' L') + " Z";
path.setAttribute('d', d);
path.setAttribute('fill', 'black');
path.setAttribute('stroke', 'black');
svgElem.appendChild(path);
}
let svgString = new XMLSerializer().serializeToString(svgElem);
document.getElementById('output').innerHTML = svgString;
// SVGコードもテキストとして表示
let pre = document.createElement('pre');
pre.textContent = svgString;
document.getElementById('output').appendChild(pre);
src.delete();
gray.delete();
thresh.delete();
contours.delete();
hierarchy.delete();
} catch (error) {
console.error(error);
}
}
</script>
</body>
</html>
<svg xmlns="http://www.w3.org/2000/svg"
width="2.26667in" height="1.6in"
viewBox="0 0 680 480">
<path id="logos"
fill="none" stroke="black" stroke-width="1"
d="M 105.86,123.00
C 105.86,123.00 152.08,123.00 152.08,123.00
152.08,123.00 169.80,186.09 169.80,186.09
169.80,186.09 188.19,123.00 188.19,123.00
188.19,123.00 235.20,123.00 235.20,123.00
235.20,123.00 235.20,137.00 235.20,137.00
235.20,137.00 230.16,137.00 230.16,137.00
227.41,137.00 225.52,137.58 224.47,138.73
223.43,139.88 222.91,142.04 222.91,145.22
222.91,145.22 222.91,203.30 222.91,203.30
222.91,205.84 223.05,207.43 223.34,208.06
223.78,209.04 224.39,209.73 225.17,210.12
226.24,210.71 227.66,211.00 229.42,211.00
229.42,211.00 235.20,211.00 235.20,211.00
235.20,211.00 235.20,225.00 235.20,225.00
235.20,225.00 186.06,225.00 186.06,225.00
186.06,225.00 186.06,211.00 186.06,211.00
186.06,211.00 189.88,211.00 189.88,211.00
192.66,211.00 194.53,210.78 195.50,210.34
196.48,209.90 197.20,209.23 197.66,208.33
198.12,207.42 198.36,205.75 198.36,203.30
198.36,203.30 198.36,140.33 198.36,140.33
198.36,140.33 173.47,225.00 173.47,225.00
173.47,225.00 159.33,225.00 159.33,225.00
159.33,225.00 135.23,143.05 135.23,143.05
135.23,143.05 135.23,205.28 135.23,205.28
135.23,206.70 135.49,207.80 136.00,208.58
136.51,209.36 137.24,209.96 138.19,210.38
139.14,210.79 140.68,211.00 142.78,211.00
142.78,211.00 147.69,211.00 147.69,211.00
147.69,211.00 147.69,225.00 147.69,225.00
147.69,225.00 105.86,225.00 105.86,225.00
105.86,225.00 105.86,211.00 105.86,211.00
105.86,211.00 109.97,211.00 109.97,211.00
112.55,211.00 114.32,210.77 115.27,210.31
116.22,209.84 116.93,209.11 117.39,208.11
117.86,207.10 118.09,205.25 118.09,202.56
118.09,202.56 118.09,145.22 118.09,145.22
118.09,142.57 117.92,140.86 117.58,140.08
117.14,139.01 116.48,138.23 115.59,137.73
114.72,137.25 113.33,137.00 111.42,137.00
111.42,137.00 105.86,137.00 105.86,137.00
105.86,137.00 105.86,123.00 105.86,123.00 Z
M 312.84,196.97
C 312.84,196.97 322.89,207.50 322.89,207.50
317.13,214.36 311.25,219.32 305.27,222.39
299.29,225.46 292.83,227.00 285.91,227.00
274.77,227.00 265.39,223.21 257.77,215.62
250.15,208.04 246.34,198.88 246.34,188.12
246.34,181.06 248.05,174.60 251.47,168.73
254.88,162.87 259.62,158.28 265.67,154.97
271.73,151.66 278.60,150.00 286.27,150.00
291.14,150.00 295.58,150.70 299.58,152.08
303.59,153.46 307.09,155.45 310.09,158.02
313.10,160.59 315.52,163.70 317.34,167.36
319.18,171.01 320.44,174.79 321.12,178.70
321.41,180.65 321.56,183.75 321.56,188.00
321.56,188.00 272.28,188.00 272.28,188.00
272.38,194.26 274.19,199.33 277.73,203.20
281.27,207.07 285.61,209.00 290.73,209.00
294.00,209.00 297.57,208.01 301.42,206.02
305.27,204.02 309.08,201.00 312.84,196.97 Z
M 298.20,176.00
C 297.86,172.71 297.16,170.12 296.11,168.22
295.07,166.32 293.65,164.81 291.86,163.69
290.08,162.56 288.21,162.00 286.27,162.00
284.21,162.00 282.23,162.58 280.33,163.73
278.42,164.88 276.89,166.45 275.75,168.42
274.60,170.40 273.86,172.93 273.52,176.00
273.52,176.00 298.20,176.00 298.20,176.00 Z
M 366.89,150.00
C 366.89,150.00 366.89,159.77 366.89,159.77
371.14,156.48 375.46,154.04 379.86,152.42
384.25,150.81 388.72,150.00 393.27,150.00
396.14,150.00 398.91,150.43 401.56,151.28
404.23,152.14 406.45,153.25 408.23,154.62
410.02,156.00 411.64,157.86 413.11,160.20
417.85,156.58 422.39,153.98 426.73,152.39
431.08,150.80 435.49,150.00 439.98,150.00
443.89,150.00 447.43,150.71 450.61,152.14
453.79,153.56 456.36,155.48 458.33,157.91
460.30,160.34 461.59,162.97 462.17,165.81
462.57,167.59 462.77,170.16 462.77,173.55
462.77,173.55 462.77,204.02 462.77,204.02
462.77,206.52 462.95,208.14 463.31,208.88
463.68,209.61 464.30,210.17 465.19,210.56
465.82,210.86 467.60,211.00 470.53,211.00
470.53,211.00 473.75,211.00 473.75,211.00
473.75,211.00 473.75,225.00 473.75,225.00
473.75,225.00 430.91,225.00 430.91,225.00
430.91,225.00 430.91,211.00 430.91,211.00
434.08,211.00 436.08,210.84 436.91,210.53
437.74,210.21 438.35,209.70 438.73,208.98
439.13,208.28 439.33,206.73 439.33,204.33
439.33,204.33 439.33,177.75 439.33,177.75
439.33,174.67 439.12,172.62 438.70,171.62
438.29,170.62 437.48,169.77 436.28,169.06
435.09,168.36 433.66,168.00 432.00,168.00
430.09,168.00 428.04,168.43 425.84,169.28
423.66,170.14 420.41,172.01 416.11,174.89
416.11,174.89 416.11,203.53 416.11,203.53
416.11,206.37 416.30,208.15 416.69,208.88
417.08,209.61 417.77,210.17 418.75,210.56
419.33,210.80 421.26,210.95 424.53,211.00
424.53,211.00 424.53,225.00 424.53,225.00
424.53,225.00 384.33,225.00 384.33,225.00
384.33,225.00 384.33,211.00 384.33,211.00
387.65,210.95 389.68,210.78 390.41,210.48
391.13,210.20 391.69,209.66 392.08,208.89
392.47,208.11 392.67,206.33 392.67,203.55
392.67,203.55 392.67,178.52 392.67,178.52
392.67,174.67 392.33,172.12 391.64,170.84
390.57,168.95 388.66,168.00 385.94,168.00
384.56,168.00 383.12,168.17 381.61,168.52
380.10,168.85 378.61,169.38 377.14,170.11
376.36,170.51 374.36,171.77 371.14,173.91
371.14,173.91 369.45,175.02 369.45,175.02
369.45,175.02 369.45,203.55 369.45,203.55
369.45,206.28 369.60,207.98 369.89,208.67
370.18,209.35 370.75,209.91 371.61,210.34
372.47,210.78 373.95,211.00 376.05,211.00
376.05,211.00 378.03,211.00 378.03,211.00
378.03,211.00 378.03,225.00 378.03,225.00
378.03,225.00 335.25,225.00 335.25,225.00
335.25,225.00 335.25,211.00 335.25,211.00
335.25,211.00 338.11,211.00 338.11,211.00
341.14,211.00 343.03,210.84 343.78,210.52
344.54,210.20 345.11,209.62 345.50,208.81
345.89,207.99 346.09,206.20 346.09,203.42
346.09,203.42 346.09,170.00 346.09,170.00
346.09,170.00 335.25,170.00 335.25,170.00
335.25,170.00 335.25,156.00 335.25,156.00
344.19,155.19 352.44,153.19 360.00,150.00
360.00,150.00 366.89,150.00 366.89,150.00 Z
M 524.28,150.00
C 532.63,150.00 539.91,151.65 546.11,154.94
552.32,158.22 557.09,162.70 560.44,168.38
563.78,174.04 565.45,180.68 565.45,188.28
565.45,199.76 561.74,209.09 554.31,216.25
546.89,223.42 536.98,227.00 524.58,227.00
511.93,227.00 501.88,223.39 494.41,216.17
487.18,209.31 483.56,200.01 483.56,188.28
483.56,180.57 485.21,173.95 488.50,168.41
491.80,162.86 496.58,158.40 502.83,155.05
509.08,151.68 516.23,150.00 524.28,150.00 Z
M 524.58,166.00
C 521.80,166.00 519.19,166.84 516.75,168.52
514.31,170.18 512.42,172.64 511.08,175.88
509.73,179.12 509.06,183.24 509.06,188.25
509.06,193.40 509.72,197.67 511.03,201.06
512.35,204.45 514.17,206.95 516.48,208.58
518.80,210.20 521.36,211.00 524.14,211.00
528.44,211.00 532.13,209.17 535.20,205.52
538.27,201.86 539.81,196.18 539.81,188.47
539.81,181.00 538.38,175.39 535.53,171.64
532.68,167.88 529.02,166.00 524.58,166.00 Z" />
</svg>/* --- 中央寄せ --- */
section {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 500px; /* 任意 */
}
/* --- テキスト --- */
path {
fill: none; /* 1,塗りの色 */
stroke: #000 ; /* 2,線の色 */
stroke-dasharray: 2000; /* 3,破線の間隔 */
stroke-dashoffset: 2000; /* 4,破線の開始位置 */
stroke-width: 1; /* 5,線の太さ */
animation: handwriting 3s ease-in forwards; /* 6,名前 時間 タイミング 終了後の状態 */
}
/* --- アニメーション --- */
@keyframes handwriting {
from {
stroke-dashoffset: 2000;
fill-opacity: 0;
}
to {
stroke-dashoffset: 0;
fill-opacity: 1;
}
}
.black {
stroke: black;
stroke-width: 2;
stroke-dasharray: 2000;
fill:black; /* 黒で塗りつぶす */
animation: handwriting 5s forwards;
}
.white{
stroke: black;
stroke-width: 2;
stroke-dasharray: 2000;
fill: white; /* 白で塗りつぶす */
animation: handwriting 5s forwards;
}
visitedもどし
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link Color Reset</title>
<style>
a {
color: blue; /* 初期の色 */
}
a.visited {
color: red; /* 訪問後の色 */
}
</style>
</head>
<body>
<a href="#" id="myLink">Click me</a>
<script>document.addEventListener('DOMContentLoaded', (event) => {
const link = document.getElementById('myLink');
link.addEventListener('click', () => {
link.classList.add('visited');
// 5秒後に元の色に戻す
setTimeout(() => {
link.classList.remove('visited');
}, 5000);
});
});
</script>
</body>
</html>
この記事が気に入ったらサポートをしてみませんか？