キャンバスをJavaScriptで方向付けした後に四角に切り取る

Question

私は、この機能を使用して、ユーザが提出した画像を方向付け、サイズ変更し、圧縮します。 電話の場合、撮影画像は長方形です。私は回転後にそれを切り取って元の画像から正方形の画像を取得する必要があります。どうやってするの？

function resetOrientationResizeCompress(srcBase64, srcOrientation) { 

    return new Promise(function (resolve) { 

     var img = new Image(); 

     img.onload = function() { 
      var width = img.width, 
       height = img.height, 
       canvas = document.createElement('canvas'), 
       ctx = canvas.getContext("2d"); 

      var MAX_WIDTH = 1000; 
      var MAX_HEIGHT = 1000; 

      // set proper canvas dimensions before transform & export 
      if ([5, 6, 7, 8].indexOf(srcOrientation) > -1) { 
       if (width > height) { 
        if (width > MAX_WIDTH) { 
         height *= MAX_WIDTH/width; 
         width = MAX_WIDTH; 
        } 
       } else { 
        if (height > MAX_HEIGHT) { 
         width *= MAX_HEIGHT/height; 
         height = MAX_HEIGHT; 
        } 
       } 
       canvas.width = height; 
       canvas.height = width; 
      } else { 
       if (height > MAX_HEIGHT) { 
        width *= MAX_HEIGHT/height; 
        height = MAX_HEIGHT; 
       } 
       canvas.width = width; 
       canvas.height = height; 
      } 

      // transform context before drawing image 
      switch (srcOrientation) { 
       case 2: 
        ctx.transform(-1, 0, 0, 1, width, 0); 
        break; 
       case 3: 
        ctx.transform(-1, 0, 0, -1, width, height); 
        break; 
       case 4: 
        ctx.transform(1, 0, 0, -1, 0, height); 
        break; 
       case 5: 
        ctx.transform(0, 1, 1, 0, 0, 0); 
        break; 
       case 6: 
        ctx.transform(0, 1, -1, 0, height, 0); 
        break; 
       case 7: 
        ctx.transform(0, -1, -1, 0, height, width); 
        break; 
       case 8: 
        ctx.transform(0, -1, 1, 0, 0, width); 
        break; 
       default: 
        ctx.transform(1, 0, 0, 1, 0, 0); 
      } 

      // draw image 
      ctx.drawImage(img, 0, 0, width, height); 

      // export base64 
      resolve(canvas.toDataURL("image/jpeg", 0.6)); 
     }; 

     img.src = srcBase64; 

    }) 

} 

私は、オリエンテーション後の画像は、正方形にトリミングされますように機能を変更することができました。私はオリエンテーション1と6を持った画像を試しました。もっと多くの場合、ここに何かが見当たりませんか？ここでは、コードです：あなたが実際に画像を編集して気にしないのであれば、

function resetOrientationResizeCompress(srcBase64, srcOrientation) { 

    return new Promise(function (resolve) { 

     var img = new Image(); 

     img.onload = function() { 
      var width = img.width, 
       height = img.height, 
       canvas = document.createElement('canvas'), 
       ctx = canvas.getContext("2d"), 
       start_Y, 
       start_X; 

      var MAX_WIDTH = 1000; 
      var MAX_HEIGHT = 1000; 

      //srcOrientation is defined 
      if(srcOrientation){ 

       // set proper canvas dimensions before transform & export 
       if ([5, 6, 7, 8].indexOf(srcOrientation) > -1) { 
        if (width > height) { 
         if (width > MAX_WIDTH) { 
          height *= MAX_WIDTH/width; 
          width = MAX_WIDTH; 
         } 
        } else { 
         if (height > MAX_HEIGHT) { 
          width *= MAX_HEIGHT/height; 
          height = MAX_HEIGHT; 
         } 
        } 
        canvas.width = height; 
        canvas.height = width; 
       } else { 
        if (height > MAX_HEIGHT) { 
         width *= MAX_HEIGHT/height; 
         height = MAX_HEIGHT; 
        } 
        canvas.width = width; 
        canvas.height = height; 
       } 

      } 
      //srcOrientation undefined 
      else{ 

       if (width > height) { 
        if (width > MAX_WIDTH) { 
         height *= MAX_WIDTH/width; 
         width = MAX_WIDTH; 
        } 
       } else { 
        if (height > MAX_HEIGHT) { 
         width *= MAX_HEIGHT/height; 
         height = MAX_HEIGHT; 
        } 
       } 
       canvas.width = height; 
       canvas.height = width; 


      } 


      //crop image for different cases (vertical, horizontal, square image) 
      if(canvas.width < canvas.height){ 

       console.log('vertical'); 

       start_Y = (canvas.height - canvas.width)/2; 

       start_X = 0; 

       canvas.height = canvas.width; 

      } 
      else if(canvas.width > canvas.height){ 

       console.log('horizontal'); 

       start_Y = (canvas.width - canvas.height)/2; 

       start_X = 0; 

       canvas.width = canvas.height; 

      } 
      else if(canvas.width == canvas.height){ 

       console.log('square'); 

       start_Y = 0; 

       start_X = 0; 
      } 

      // orientate image if orientation is defined 
      if(srcOrientation){ 

       // transform context before drawing image 
       switch (srcOrientation) { 
        case 2: 
         ctx.transform(-1, 0, 0, 1, width, 0); 
         break; 
        case 3: 
         ctx.transform(-1, 0, 0, -1, width, height); 
         break; 
        case 4: 
         ctx.transform(1, 0, 0, -1, 0, height); 
         break; 
        case 5: 
         ctx.transform(0, 1, 1, 0, 0, 0); 
         break; 
        case 6: 
         ctx.transform(0, 1, -1, 0, height, 0); 
         break; 
        case 7: 
         ctx.transform(0, -1, -1, 0, height, width); 
         break; 
        case 8: 
         ctx.transform(0, -1, 1, 0, 0, width); 
         break; 
        default: 
         ctx.transform(1, 0, 0, 1, 0, 0); 
       } 

      } 

      // draw image 
      ctx.drawImage(img, -start_Y, start_X, width, height); 

      // export base64 
      resolve(canvas.toDataURL("image/jpeg", 0.6)); 
     }; 

     img.src = srcBase64; 

    }) 

} 

Answer 1

絶対最も簡単な解決策と、あなたは正確な作物のサイズを知って、単に座標マイナスから始まるので、左または上のその絵を描くです画像の一部がキャンバスから外れています。あるいは、x = y = 0に描画するときに、右または下半分が切り取られるように、キャンバスを十分に小さくすることもできます。どちらの場合でも、キャンバスのサイズを写真のサイズに合わせて、配置したくない部分がカットオフになるように配置します。

また、cropper.jsのような、作物の自由度が高い素晴らしいライブラリがあります。私はcropper.jsで作物を正方形に限定して、その四角形を作図したい場所にドラッグさせることができます。