diff --git a/_LSP.js b/_LSP.js index 52bfd351be5f05e7bfbba03ae5fee212d9de6521..566dc4dd6016b375a8281a5b520de8257fbab831 100644 --- a/_LSP.js +++ b/_LSP.js @@ -1013,19 +1013,20 @@ class BaseWidget { let canvas = document.createElement("canvas"); let sourceImg = document.getElementById("sourceImg"); let silhouetteImg = document.getElementById("silhouetteImg"); - var size = sourceImg.width > sourceImg.height ? sourceImg.width : sourceImg.height; + var diameter = sourceImg.width < sourceImg.height ? sourceImg.width : sourceImg.height; let ctx = canvas.getContext('2d'); - canvas.width = sourceImg.width; - canvas.height = sourceImg.height; + canvas.width = diameter; + canvas.height = diameter; ctx.save(); - ctx.arc(sourceImg.width / 2, sourceImg.height / 2, size / 2, 0, 2 * Math.PI); + ctx.beginPath(); + ctx.arc(diameter / 2, diameter / 2, diameter / 2, 0, 2 * Math.PI); ctx.clip(); ctx.drawImage(sourceImg, 0, 0); ctx.restore(); - let imgData = ctx.getImageData(0, 0, size, size); - ctx.putImageData(imgData,0,0); + let imgData = ctx.getImageData(0, 0, diameter, diameter); + ctx.putImageData(imgData, 0, 0); silhouetteImg.src = canvas.toDataURL(); - output=canvas.toDataURL(); + output = canvas.toDataURL(); ` const wv = new WebView(); await wv.loadHTML(html); diff --git a/test.js b/test.js index 5c7488056b7b694c098a28188c2e89cc2aa2dbf1..8689cc0358895389a6fb724ff8985525968c0056 100644 --- a/test.js +++ b/test.js @@ -7,21 +7,23 @@ const html = ` ` const js = ` - var canvas = document.createElement("canvas"); - var sourceImg = document.getElementById("sourceImg"); - var silhouetteImg = document.getElementById("silhouetteImg"); - var ctx = canvas.getContext('2d'); - canvas.width = sourceImg.width; - canvas.height = sourceImg.height; + let canvas = document.createElement("canvas"); + let sourceImg = document.getElementById("sourceImg"); + let silhouetteImg = document.getElementById("silhouetteImg"); + var diameter = sourceImg.width < sourceImg.height ? sourceImg.width : sourceImg.height; + let ctx = canvas.getContext('2d'); + canvas.width = diameter; + canvas.height = diameter; ctx.save(); - ctx.arc(sourceImg.width / 2, sourceImg.height / 2, sourceImg.height / 2, 0, 2 * Math.PI); + ctx.beginPath(); + ctx.arc(diameter / 2, diameter / 2, diameter / 2, 0, 2 * Math.PI); ctx.clip(); ctx.drawImage(sourceImg, 0, 0); ctx.restore(); - var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); - ctx.putImageData(imgData,0,0); + let imgData = ctx.getImageData(0, 0, diameter, diameter); + ctx.putImageData(imgData, 0, 0); silhouetteImg.src = canvas.toDataURL(); - output=canvas.toDataURL(); + output = canvas.toDataURL(); ` let wv = new WebView();