Spaces:
Running
Running
Upload mask.html
Browse files
mask.html
CHANGED
|
@@ -31,6 +31,14 @@
|
|
| 31 |
flex-direction: row;
|
| 32 |
justify-content: flex-start;
|
| 33 |
margin: 0px 1%;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 34 |
}
|
| 35 |
.overlay {
|
| 36 |
left: 20px;
|
|
@@ -49,6 +57,14 @@
|
|
| 49 |
justify-content: center;
|
| 50 |
margin: 0 100px;
|
| 51 |
width: 512px;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 52 |
}
|
| 53 |
.overlay {
|
| 54 |
left: 100px;
|
|
@@ -80,12 +96,13 @@
|
|
| 80 |
</style>
|
| 81 |
</head>
|
| 82 |
<body>
|
| 83 |
-
<div class="
|
| 84 |
<button id="uploadButton" style="box-sizing: border-box; padding: 10px; font-size: 16px; height: 50px; line-height: 30px; overflow: hidden; position: relative;">
|
| 85 |
ιζ©εΎη
|
| 86 |
<input type="file" id="upload" accept="image/*" style="position: absolute; top: 0; left: 0; width: 98%; height: 100%; opacity: 0; cursor: pointer;">
|
| 87 |
</button>
|
| 88 |
<button id="save" style="height: 50px;">δΏεθη</button>
|
|
|
|
| 89 |
</div>
|
| 90 |
<div class="myDiv">
|
| 91 |
<input type="range" id="brushSizeSlider" style="width: 100%" value="40" min="1" max="150" step="1" >
|
|
@@ -94,6 +111,8 @@
|
|
| 94 |
<br>
|
| 95 |
<div class="myDiv">
|
| 96 |
<canvas id="canvas"></canvas>
|
|
|
|
|
|
|
| 97 |
</div>
|
| 98 |
<div class="overlay" style="display: flex; flex-direction: row; align-items: flex-start;">
|
| 99 |
<label style="margin-bottom: 10px;">
|
|
@@ -499,6 +518,32 @@ window.onload = function() {
|
|
| 499 |
|
| 500 |
return new Blob([byteArray], { type: mime });
|
| 501 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 502 |
// δΏεθη
|
| 503 |
document.getElementById('save').addEventListener('click', function() {
|
| 504 |
var data = maskData.data;
|
|
|
|
| 31 |
flex-direction: row;
|
| 32 |
justify-content: flex-start;
|
| 33 |
margin: 0px 1%;
|
| 34 |
+
flex-wrap: wrap;
|
| 35 |
+
}
|
| 36 |
+
.myDiv1 {
|
| 37 |
+
width: 98%;
|
| 38 |
+
display: flex;
|
| 39 |
+
flex-direction: row;
|
| 40 |
+
justify-content: flex-start;
|
| 41 |
+
margin: 0px 1%;
|
| 42 |
}
|
| 43 |
.overlay {
|
| 44 |
left: 20px;
|
|
|
|
| 57 |
justify-content: center;
|
| 58 |
margin: 0 100px;
|
| 59 |
width: 512px;
|
| 60 |
+
flex-wrap: wrap;
|
| 61 |
+
}
|
| 62 |
+
.myDiv1 {
|
| 63 |
+
display: flex;
|
| 64 |
+
flex-direction: row;
|
| 65 |
+
justify-content: center;
|
| 66 |
+
margin: 0 100px;
|
| 67 |
+
width: 512px;
|
| 68 |
}
|
| 69 |
.overlay {
|
| 70 |
left: 100px;
|
|
|
|
| 96 |
</style>
|
| 97 |
</head>
|
| 98 |
<body>
|
| 99 |
+
<div class="myDiv1">
|
| 100 |
<button id="uploadButton" style="box-sizing: border-box; padding: 10px; font-size: 16px; height: 50px; line-height: 30px; overflow: hidden; position: relative;">
|
| 101 |
ιζ©εΎη
|
| 102 |
<input type="file" id="upload" accept="image/*" style="position: absolute; top: 0; left: 0; width: 98%; height: 100%; opacity: 0; cursor: pointer;">
|
| 103 |
</button>
|
| 104 |
<button id="save" style="height: 50px;">δΏεθη</button>
|
| 105 |
+
<button id="saveToClipboard" style="height: 50px;">δΏεθηε°εͺθ΄΄ζΏ</button>
|
| 106 |
</div>
|
| 107 |
<div class="myDiv">
|
| 108 |
<input type="range" id="brushSizeSlider" style="width: 100%" value="40" min="1" max="150" step="1" >
|
|
|
|
| 111 |
<br>
|
| 112 |
<div class="myDiv">
|
| 113 |
<canvas id="canvas"></canvas>
|
| 114 |
+
<br>
|
| 115 |
+
<img id="outputImg"></img>
|
| 116 |
</div>
|
| 117 |
<div class="overlay" style="display: flex; flex-direction: row; align-items: flex-start;">
|
| 118 |
<label style="margin-bottom: 10px;">
|
|
|
|
| 518 |
|
| 519 |
return new Blob([byteArray], { type: mime });
|
| 520 |
}
|
| 521 |
+
// δΏεθη
|
| 522 |
+
document.getElementById('saveToClipboard').addEventListener('click',async function() {
|
| 523 |
+
var data = maskData.data;
|
| 524 |
+
var tempCanvas = document.createElement('canvas');
|
| 525 |
+
var ctx = tempCanvas.getContext('2d');
|
| 526 |
+
if (isRotate == true){
|
| 527 |
+
var rData = rotateImageData(maskData);
|
| 528 |
+
tempCanvas.height = maskData.width;
|
| 529 |
+
tempCanvas.width = maskData.height;
|
| 530 |
+
ctx.putImageData(rData, 0, 0);
|
| 531 |
+
}
|
| 532 |
+
else {
|
| 533 |
+
tempCanvas.width = canvas.width;
|
| 534 |
+
tempCanvas.height = canvas.height;
|
| 535 |
+
ctx.putImageData(maskData, 0, 0);
|
| 536 |
+
}
|
| 537 |
+
//await navigator.clipboard.writeText(tempCanvas.toDataURL("image/jpeg", 0.9));
|
| 538 |
+
const response = await fetch(tempCanvas.toDataURL("image/png"));
|
| 539 |
+
const blob = await response.blob();
|
| 540 |
+
const item = new ClipboardItem({ [blob.type]: blob });
|
| 541 |
+
await navigator.clipboard.write([item]);
|
| 542 |
+
|
| 543 |
+
const img = document.getElementById('outputImg');
|
| 544 |
+
img.src = tempCanvas.toDataURL("image/jpeg");
|
| 545 |
+
});
|
| 546 |
+
|
| 547 |
// δΏεθη
|
| 548 |
document.getElementById('save').addEventListener('click', function() {
|
| 549 |
var data = maskData.data;
|