| <!DOCTYPE html> |
| <html lang=ja> |
| <head> |
| <meta charset=UTF-8> |
| <meta name=viewport content="width=device-width,initial-scale=1"> |
| <title>画像変換ツール</title> |
| <style> |
| body{font-family:Arial,sans-serif;margin:0;padding:20px;background-color:#f5f5f5} |
| .container{max-width:900px;margin:0 auto;background-color:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1)} |
| h1,h2{color:#333} |
| .mode-selector{display:flex;margin-bottom:20px;flex-wrap:wrap} |
| .mode-selector button{flex:1;min-width:120px;padding:10px;border:none;background-color:#eee;cursor:pointer;margin:2px} |
| .mode-selector button.active{background-color:#4caf50;color:#fff} |
| .file-input{margin-bottom:20px} |
| .file-input input[type=file]{display:none} |
| .file-input label{display:inline-block;padding:10px 15px;background-color:#4caf50;color:#fff;border-radius:4px;cursor:pointer} |
| .settings{margin-bottom:20px;border:1px solid #ddd;padding:15px;border-radius:4px} |
| .settings-panel{display:none} |
| .settings-panel.active{display:block} |
| .setting-item{margin-bottom:15px} |
| .setting-item label{display:block;margin-bottom:5px;font-weight:700} |
| button{padding:10px 15px;background-color:#4caf50;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:16px} |
| button:disabled{background-color:#ccc;cursor:not-allowed} |
| .result-container{margin-top:30px} |
| .image-preview{display:flex;justify-content:space-between;margin:20px 0;flex-wrap:wrap} |
| .canvas-container{width:48%;margin-bottom:10px;position:relative} |
| canvas{max-width:100%;border:1px solid #ddd;box-shadow:0 2px 5px rgba(0,0,0,.1);background-color:#fff} |
| .image-info{font-size:14px;color:#666;margin-top:5px} |
| #downloadBtn{margin-top:10px} |
| .loading{display:none;margin:20px 0;padding:10px;background-color:#f8f8f8;border:1px solid #ddd;border-radius:4px;text-align:center} |
| .result-options{margin-top:10px} |
| .result-options button{margin-right:10px;background-color:#2196f3} |
| .result-options button.download-depth{background-color:#9c27b0} |
| .result-options button.download-semi{background-color:#ff9800} |
| .format-selector{margin-top:15px} |
| .depth-image-container{margin-top:20px;border-top:1px dashed #ddd;padding-top:20px} |
| </style> |
| </head> |
| <body> |
| <div class=container> |
| <h1>画像変換ツール</h1> |
| <div class=mode-selector> |
| <button id=lineDrawingMode class=active>線画モード</button> |
| <button id=blackWhiteMode>白黒画像モード</button> |
| <button id=bgRemovalMode>背景削除</button> |
| <button id=upscaleMode>高画質化</button> |
| </div> |
| <div class=file-input> |
| <input type=file id=imageUpload accept=image/*> |
| <label for=imageUpload>画像を選択</label> |
| </div> |
| <div class=settings> |
| <div id=lineDrawingSettings class="settings-panel active"> |
| <h2>線画設定</h2> |
| <div class=setting-item> |
| <label for=lineThickness>線の太さ</label> |
| <input type=range id=lineThickness min=1 max=20 value=2> |
| <span id=lineThicknessValue>2</span> |
| </div> |
| <div class=setting-item> |
| <label for=lineColor>線の色</label> |
| <input type=color id=lineColor value=#000000> |
| </div> |
| <div class=setting-item> |
| <label for=bgColor>背景色</label> |
| <input type=color id=bgColor value=#ffffff> |
| </div> |
| <div class=setting-item> |
| <label for=bgOpacity>背景の透明度</label> |
| <input type=range id=bgOpacity min=0 max=100 value=100> |
| <span id=bgOpacityValue>100%</span> |
| </div> |
| <div class=setting-item> |
| <label for=sensitivity>感度</label> |
| <input type=range id=sensitivity min=1 max=100 value=50> |
| <span id=sensitivityValue>50</span> |
| </div> |
| </div> |
| <div id=blackWhiteSettings class=settings-panel> |
| <h2>白黒画像設定</h2> |
| <div class=setting-item> |
| <label for=bwBgColor>背景色</label> |
| <input type=color id=bwBgColor value=#ffffff> |
| </div> |
| <div class=setting-item> |
| <label for=bwFgColor>前景色</label> |
| <input type=color id=bwFgColor value=#000000> |
| </div> |
| <div class=setting-item> |
| <label for=threshold>明るさの閾値</label> |
| <input type=range id=threshold min=0 max=100 value=50> |
| <span id=thresholdValue>50%</span> |
| </div> |
| </div> |
| <div id=bgRemovalSettings class=settings-panel> |
| <h2>背景削除設定</h2> |
| <div class=setting-item> |
| <p>背景を削除した画像が生成されます</p> |
| </div> |
| </div> |
| <div id=upscaleSettings class=settings-panel> |
| <h2>高画質化設定</h2> |
| <div class=setting-item> |
| <label for=version>拡大モデル</label> |
| <select id=version name=version> |
| <option value=v1.2>GFPGANv1.2(顔の拡大に特化)</option> |
| <option value=v1.3>GFPGANv1.3(顔の拡大に特化)</option> |
| <option value=v1.4>GFPGANv1.4(顔の拡大に特化)</option> |
| <option value=RestoreFormer selected>RestoreFormer</option> |
| <option value=CodeFormer>CodeFormer</option> |
| <option value=RealESR-General-x4v3>RealESR-General-x4v3</option> |
| </select> |
| </div> |
| <div class=setting-item> |
| <label for=scale>拡大率</label> |
| <input type=range id=scale min=1 max=4 value=2 step=1> |
| <span id=scaleValue>2x</span> |
| </div> |
| </div> |
| </div> |
| <div class=loading id=loadingIndicator> |
| <p>処理中です...しばらくお待ちください</p> |
| </div> |
| <div class=format-selector> |
| <label for=outputFormat>出力フォーマット: </label> |
| <select id=outputFormat> |
| <option value=png selected>PNG</option> |
| <option value=jpeg>JPEG</option> |
| <option value=webp>WebP</option> |
| </select> |
| <label for=jpegQuality style="display:none" id=jpegQualityLabel>品質: </label> |
| <input type=range id=jpegQuality min=1 max=100 value=90 style="display:none;width:100px"> |
| <span id=jpegQualityValue style="display:none">90%</span> |
| </div> |
| <button id=processBtn disabled>変換実行</button> |
| <div class=result-container> |
| <h2>結果</h2> |
| <div class=image-preview> |
| <div class=canvas-container> |
| <h3>元画像</h3> |
| <canvas id=originalCanvas></canvas> |
| <div class=image-info id=originalInfo></div> |
| </div> |
| <div class=canvas-container> |
| <h3>結果画像</h3> |
| <canvas id=resultCanvas></canvas> |
| <div class=image-info id=resultInfo></div> |
| </div> |
| </div> |
| <div class=depth-image-container id=depthImageContainer style=display:none> |
| <h3>深度画像</h3> |
| <canvas id=depthCanvas></canvas> |
| <div class=image-info id=depthInfo></div> |
| </div> |
| <div class=result-options id=resultOptions style=display:none> |
| <button id=downloadBtn>結果をダウンロード</button> |
| <button id=downloadDepthBtn class=download-depth>深度画像をダウンロード</button> |
| <button id=downloadSemiBtn class=download-semi>半透明画像をダウンロード</button> |
| </div> |
| </div> |
| </div> |
| <script> |
| document.addEventListener("DOMContentLoaded",(function(){ |
| const e=document.getElementById("imageUpload"), |
| t=document.getElementById("processBtn"), |
| n=document.getElementById("downloadBtn"), |
| a=document.getElementById("downloadDepthBtn"), |
| i=document.getElementById("downloadSemiBtn"), |
| o=document.getElementById("originalCanvas"), |
| d=document.getElementById("resultCanvas"), |
| depthCanvas=document.getElementById("depthCanvas"), |
| l=document.getElementById("loadingIndicator"), |
| c=document.getElementById("resultOptions"), |
| depthContainer=document.getElementById("depthImageContainer"), |
| s=document.getElementById("lineDrawingMode"), |
| g=document.getElementById("blackWhiteMode"), |
| r=document.getElementById("bgRemovalMode"), |
| m=document.getElementById("upscaleMode"), |
| h=document.getElementById("lineDrawingSettings"), |
| u=document.getElementById("blackWhiteSettings"), |
| f=document.getElementById("bgRemovalSettings"), |
| y=document.getElementById("upscaleSettings"), |
| p=document.getElementById("lineThickness"), |
| I=document.getElementById("lineThicknessValue"), |
| outputFormat=document.getElementById("outputFormat"), |
| jpegQuality=document.getElementById("jpegQuality"), |
| jpegQualityLabel=document.getElementById("jpegQualityLabel"), |
| jpegQualityValue=document.getElementById("jpegQualityValue"), |
| originalInfo=document.getElementById("originalInfo"), |
| resultInfo=document.getElementById("resultInfo"), |
| depthInfo=document.getElementById("depthInfo"); |
| |
| |
| outputFormat.addEventListener("change",function(){ |
| if(outputFormat.value === "jpeg"){ |
| jpegQuality.style.display = "inline-block"; |
| jpegQualityLabel.style.display = "inline-block"; |
| jpegQualityValue.style.display = "inline-block"; |
| }else{ |
| jpegQuality.style.display = "none"; |
| jpegQualityLabel.style.display = "none"; |
| jpegQualityValue.style.display = "none"; |
| } |
| }); |
| |
| jpegQuality.addEventListener("input",function(){ |
| jpegQualityValue.textContent = jpegQuality.value + "%"; |
| }); |
| |
| p.addEventListener("input",(()=>{I.textContent=p.value})); |
| const w=document.getElementById("bgOpacity"),E=document.getElementById("bgOpacityValue"); |
| w.addEventListener("input",(()=>{E.textContent=`${w.value}%`})); |
| const v=document.getElementById("sensitivity"),B=document.getElementById("sensitivityValue"); |
| v.addEventListener("input",(()=>{B.textContent=v.value})); |
| const b=document.getElementById("threshold"),L=document.getElementById("thresholdValue"); |
| b.addEventListener("input",(()=>{L.textContent=`${b.value}%`})); |
| const C=document.getElementById("scale"),k=document.getElementById("scaleValue"); |
| |
| function R(e,t){ |
| [s,g,r,m].forEach((e=>{e.classList.remove("active")})), |
| [h,u,f,y].forEach((e=>{e.classList.remove("active")})), |
| e.classList.add("active"), |
| t.classList.add("active") |
| } |
| |
| C.addEventListener("input",(()=>{k.textContent=`${C.value}x`})), |
| s.addEventListener("click",(()=>{R(s,h)})), |
| g.addEventListener("click",(()=>{R(g,u)})), |
| r.addEventListener("click",(()=>{R(r,f)})), |
| m.addEventListener("click",(()=>{R(m,y)})); |
| |
| let D=null,S=null,x=null,U=null; |
| |
| function $(e,t){return(e[t]+e[t+1]+e[t+2])/3} |
| |
| function O(e){return{r:parseInt(e.slice(1,3),16),g:parseInt(e.slice(3,5),16),b:parseInt(e.slice(5,7),16)}} |
| |
| function M(e,t,n){ |
| const a=document.createElement("a"); |
| a.download=t; |
| |
| let mimeType = "image/png"; |
| if(n === "jpeg") mimeType = "image/jpeg"; |
| if(n === "webp") mimeType = "image/webp"; |
| |
| |
| const img = new Image(); |
| img.onload = function(){ |
| const canvas = document.createElement("canvas"); |
| canvas.width = img.width; |
| canvas.height = img.height; |
| const ctx = canvas.getContext("2d"); |
| ctx.drawImage(img, 0, 0); |
| |
| |
| let dataUrl; |
| if(n === "jpeg"){ |
| dataUrl = canvas.toDataURL(mimeType, jpegQuality.value/100); |
| }else{ |
| dataUrl = canvas.toDataURL(mimeType); |
| } |
| |
| a.href = dataUrl; |
| document.body.appendChild(a); |
| a.click(); |
| document.body.removeChild(a); |
| }; |
| img.src = e; |
| } |
| |
| function updateImageInfo(canvas, infoElement, isOriginal=false){ |
| const format = outputFormat.value; |
| let mimeType = "image/png"; |
| if(format === "jpeg") mimeType = "image/jpeg"; |
| if(format === "webp") mimeType = "image/webp"; |
| |
| let dataUrl; |
| if(format === "jpeg"){ |
| dataUrl = canvas.toDataURL(mimeType, jpegQuality.value/100); |
| }else{ |
| dataUrl = canvas.toDataURL(mimeType); |
| } |
| |
| const size = Math.round((dataUrl.length - 'data:image/png;base64,'.length) * 3 / 4 / 1024); |
| infoElement.textContent = `${canvas.width}×${canvas.height}px | ${size}KB | ${format.toUpperCase()}`; |
| |
| if(isOriginal){ |
| const ctx = canvas.getContext("2d"); |
| const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data; |
| let colorCount = 0; |
| const colors = {}; |
| |
| for(let i=0; i<imageData.length; i+=4){ |
| const r = imageData[i]; |
| const g = imageData[i+1]; |
| const b = imageData[i+2]; |
| const a = imageData[i+3]; |
| const color = `${r},${g},${b},${a}`; |
| |
| if(!colors[color]){ |
| colors[color] = true; |
| colorCount++; |
| } |
| } |
| |
| infoElement.textContent += ` | ${colorCount}色`; |
| } |
| } |
| |
| e.addEventListener("change",(function(e){ |
| if(e.target.files&&e.target.files[0]){ |
| const n=new FileReader; |
| n.onload=function(e){ |
| D=new Image; |
| D.onload=function(){ |
| const e=o.getContext("2d"); |
| o.width=D.width; |
| o.height=D.height; |
| e.fillStyle="#ffffff"; |
| e.fillRect(0,0,o.width,o.height); |
| e.drawImage(D,0,0); |
| d.width=D.width; |
| d.height=D.height; |
| const n=d.getContext("2d"); |
| n.fillStyle="#ffffff"; |
| n.fillRect(0,0,d.width,d.height); |
| t.disabled=!1; |
| c.style.display="none"; |
| depthContainer.style.display="none"; |
| updateImageInfo(o, originalInfo, true); |
| }; |
| D.src=e.target.result; |
| }; |
| n.readAsDataURL(e.target.files[0]); |
| } |
| })); |
| |
| t.addEventListener("click",(async function(){ |
| if(D){ |
| l.style.display="block"; |
| t.disabled=!0; |
| try{ |
| const e=s.classList.contains("active"), |
| t=g.classList.contains("active"), |
| a=r.classList.contains("active"), |
| i=m.classList.contains("active"), |
| l=d.getContext("2d"); |
| |
| l.fillStyle="#ffffff"; |
| l.fillRect(0,0,d.width,d.height); |
| |
| if(e){ |
| |
| const ctx=d.getContext("2d"); |
| d.width=o.width; |
| d.height=o.height; |
| |
| |
| const bgColor=O(document.getElementById("bgColor").value); |
| const bgOpacity=parseInt(document.getElementById("bgOpacity").value)/100; |
| ctx.fillStyle=`rgba(${bgColor.r}, ${bgColor.g}, ${bgColor.b}, ${bgOpacity})`; |
| ctx.fillRect(0,0,d.width,d.height); |
| |
| |
| ctx.drawImage(D,0,0); |
| |
| |
| const imageData=ctx.getImageData(0,0,d.width,d.height); |
| const data=imageData.data; |
| const lineColor=O(document.getElementById("lineColor").value); |
| const lineThickness=parseInt(document.getElementById("lineThickness").value); |
| const sensitivity=parseInt(document.getElementById("sensitivity").value); |
| |
| |
| ctx.fillStyle=`rgba(${bgColor.r}, ${bgColor.g}, ${bgColor.b}, ${bgOpacity})`; |
| ctx.fillRect(0,0,d.width,d.height); |
| |
| |
| for(let y=0;y<d.height;y++){ |
| for(let x=0;x<d.width;x++){ |
| const idx=(y*d.width+x)*4; |
| if(x>0 && y>0 && x<d.width-1 && y<d.height-1){ |
| const brightness=$(data,idx); |
| const right=$(data,idx+4); |
| const bottom=$(data,idx+4*d.width); |
| const diffX=Math.abs(brightness-right); |
| const diffY=Math.abs(brightness-bottom); |
| |
| if(diffX>sensitivity/10 || diffY>sensitivity/10){ |
| ctx.fillStyle=`rgb(${lineColor.r}, ${lineColor.g}, ${lineColor.b})`; |
| ctx.fillRect(x-lineThickness/2, y-lineThickness/2, lineThickness, lineThickness); |
| } |
| } |
| } |
| } |
| |
| S=d.toDataURL("image/png"); |
| updateImageInfo(d, resultInfo); |
| }else if(t){ |
| |
| const ctx=d.getContext("2d"); |
| d.width=o.width; |
| d.height=o.height; |
| |
| const bgColor=O(document.getElementById("bwBgColor").value); |
| const fgColor=O(document.getElementById("bwFgColor").value); |
| const threshold=parseInt(document.getElementById("threshold").value)/100*255; |
| |
| |
| ctx.fillStyle=`rgb(${bgColor.r}, ${bgColor.g}, ${bgColor.b})`; |
| ctx.fillRect(0,0,d.width,d.height); |
| |
| |
| ctx.drawImage(D,0,0); |
| |
| |
| const imageData=ctx.getImageData(0,0,d.width,d.height); |
| const data=imageData.data; |
| |
| |
| for(let i=0;i<data.length;i+=4){ |
| const brightness=$(data,i); |
| if(brightness<=threshold){ |
| data[i]=fgColor.r; |
| data[i+1]=fgColor.g; |
| data[i+2]=fgColor.b; |
| data[i+3]=255; |
| }else{ |
| data[i]=bgColor.r; |
| data[i+1]=bgColor.g; |
| data[i+2]=bgColor.b; |
| data[i+3]=255; |
| } |
| } |
| |
| ctx.putImageData(imageData,0,0); |
| S=d.toDataURL("image/png"); |
| updateImageInfo(d, resultInfo); |
| }else if(a){ |
| |
| try{ |
| const e=o.toDataURL("image/png"); |
| const t=await fetch("https://soiz1-dis-background-removal-api-proxy.hf.space/remove_background",{ |
| method:"POST", |
| headers:{"Content-Type":"application/json"}, |
| body:JSON.stringify({image_url:e}) |
| }); |
| |
| if(!t.ok) throw new Error(`APIエラー: ${t.status}`); |
| |
| const n=await t.json(); |
| const resultImg=new Image; |
| resultImg.onload=function(){ |
| d.width=resultImg.width; |
| d.height=resultImg.height; |
| const e=d.getContext("2d"); |
| e.fillStyle="#ffffff"; |
| e.fillRect(0,0,d.width,d.height); |
| e.drawImage(resultImg,0,0); |
| S=d.toDataURL("image/png"); |
| updateImageInfo(d, resultInfo); |
| |
| |
| if(n.depth_image){ |
| const depthImg=new Image; |
| depthImg.onload=function(){ |
| depthCanvas.width=depthImg.width; |
| depthCanvas.height=depthImg.height; |
| const ctx=depthCanvas.getContext("2d"); |
| ctx.fillStyle="#ffffff"; |
| ctx.fillRect(0,0,depthCanvas.width,depthCanvas.height); |
| ctx.drawImage(depthImg,0,0); |
| x=depthCanvas.toDataURL("image/png"); |
| updateImageInfo(depthCanvas, depthInfo); |
| depthContainer.style.display="block"; |
| }; |
| depthImg.src=n.depth_image; |
| }else{ |
| depthContainer.style.display="none"; |
| } |
| |
| if(n.semi_transparent_image){ |
| U=n.semi_transparent_image; |
| } |
| }; |
| resultImg.src=n.semi_transparent_image; |
| }catch(e){ |
| console.error("背景削除処理中にエラーが発生しました:",e); |
| alert("背景削除処理中にエラーが発生しました: "+e.message); |
| } |
| }else if(i){ |
| |
| try{ |
| const e=document.getElementById("version").value, |
| t=parseInt(document.getElementById("scale").value), |
| n=new FormData; |
| n.append("file",function(e){ |
| const t=e.split(","), |
| n=t[0].match(/:(.*?);/)[1], |
| a=atob(t[1]); |
| let i=a.length; |
| const o=new Uint8Array(i); |
| for(;i--;)o[i]=a.charCodeAt(i); |
| return new Blob([o],{type:n}) |
| }(o.toDataURL("image/png"))); |
| n.append("version",e); |
| n.append("scale",t); |
| |
| const a=await fetch("https://soiz1-image-face-upscale-restoration-gfpgan-api.hf.space/api/restore",{ |
| method:"POST", |
| body:n |
| }); |
| |
| if(!a.ok) throw new Error(`APIエラー: ${a.status}`); |
| |
| const i=await a.blob(), |
| l=URL.createObjectURL(i), |
| c=new Image; |
| c.onload=function(){ |
| d.width=c.width; |
| d.height=c.height; |
| const e=d.getContext("2d"); |
| e.fillStyle="#ffffff"; |
| e.fillRect(0,0,d.width,d.height); |
| e.drawImage(c,0,0); |
| S=d.toDataURL("image/png"); |
| updateImageInfo(d, resultInfo); |
| URL.revokeObjectURL(l); |
| }; |
| c.src=l; |
| }catch(e){ |
| console.error("高画質化処理中にエラーが発生しました:",e); |
| alert("高画質化処理中にエラーが発生しました: "+e.message); |
| } |
| } |
| |
| t.disabled=!1; |
| c.style.display=a?"block":"none"; |
| }catch(e){ |
| console.error("処理中にエラーが発生しました:",e); |
| alert("処理中にエラーが発生しました: "+e.message); |
| }finally{ |
| l.style.display="none"; |
| t.disabled=!1; |
| } |
| } |
| })); |
| |
| n.addEventListener("click",(function(){ |
| S&&M(S,"converted-image."+outputFormat.value, outputFormat.value); |
| })); |
| |
| a.addEventListener("click",(function(){ |
| x&&M(x,"depth-image.png", "png"); |
| })); |
| |
| i.addEventListener("click",(function(){ |
| U&&M(U,"semi-transparent-image.png", "png"); |
| })); |
| })); |
| </script> |
| </body> |
| </html> |
