帆布裁剪圖像定位後的廣場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你可以限制作物到一個正方形，並讓用戶拖動那個正方形到他們想要裁剪的地方