Merge pull request #15 from haruyan-hopemucci/feat/stretch-while-main…

…taining-aspect-ratio

feat: ペースト画像の縦横比維持したまま画像生成

docs/js/app.js

@@ -7,7 +7,6 @@ $(function (){
     elem.textContent = message
   }
 
-    // document.querySelector('#paste-area').addEventListener('paste', (event) => {
     document.addEventListener('paste', (event) => {
 
     event.preventDefault()
@@ -46,8 +45,25 @@ $(function (){
     const canvas = document.querySelector('#output-image')
     const context = canvas.getContext('2d')
 
+    // 画像のアスペクト比から描画する位置決めをする
+    const imgWidth = imgEl.width
+    const imgHeight = imgEl.height
+    let drawX = 0
+    let drawY = 0
+    let drawWidth = canvas.width
+    let drawHeight = canvas.height
+    if(imgWidth > imgHeight) {
+      // 横の方が長い場合、y座標側を調整する
+      drawHeight = imgHeight * drawWidth / imgWidth
+      drawY = (canvas.height - drawHeight) / 2
+    } else {
+      // 縦の方が長い場合、X座標側を調整する
+      drawWidth = imgWidth * drawHeight / imgHeight
+      drawX = (canvas.width - drawWidth) / 2
+    }
+
     context.clearRect(0, 0, canvas.width, canvas.height)
-    context.drawImage(imgEl, 0, 0, canvas.width, canvas.height)
+    context.drawImage(imgEl, drawX, drawY, drawWidth, drawHeight)
     context.drawImage(lgtnEl, 0, 0, canvas.width, canvas.height)
     copyImageToClipboard(canvas)
   }