Spaces:
Running
Running
Upload index.html
Browse files- index.html +22 -1
index.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,7 +96,7 @@
|
|
| 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;">
|
|
@@ -95,6 +111,8 @@
|
|
| 95 |
<br>
|
| 96 |
<div class="myDiv">
|
| 97 |
<canvas id="canvas"></canvas>
|
|
|
|
|
|
|
| 98 |
</div>
|
| 99 |
<div class="overlay" style="display: flex; flex-direction: row; align-items: flex-start;">
|
| 100 |
<label style="margin-bottom: 10px;">
|
|
@@ -521,6 +539,9 @@ window.onload = function() {
|
|
| 521 |
const blob = await response.blob();
|
| 522 |
const item = new ClipboardItem({ [blob.type]: blob });
|
| 523 |
await navigator.clipboard.write([item]);
|
|
|
|
|
|
|
|
|
|
| 524 |
});
|
| 525 |
|
| 526 |
// 保存蒙版
|
|
|
|
| 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;">
|
|
|
|
| 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;">
|
|
|
|
| 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 |
// 保存蒙版
|