2017-07-04 17 views
1

画像のサイズを変更するこの機能があります(回転して四角形に切り抜くための他のものがあります)。 ここの問題は、この機能は、ユーザーが1080X1920画像(iphone画像)を投稿すると、それを562 X 1000にサイズ変更してから(表示されていないコードで)表示されます。それは640X640より小さいので、サーバーは画像を拒否するでしょう。 誰も私が最大幅と高さ1000 X 1000を返しますが、最小幅と高さ640を返すようにこの機能を改善する助けてもいいですか? X 640? 実験したところ、最大幅と高さを1138に設定すると、同じ1080X1920 px画像が640X640に切り取られますがそれは容認できる解決策ではありません。どんな手掛かり?JavaScriptの最小幅/高さと最大幅/高さを尊重した画像のサイズ変更

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

      console.log(width, " ", height); 

      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; 

       console.log(canvas.width, " ", canvas.height); 

      } else { 

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

       console.log(canvas.width, " ", canvas.height); 
       } 
} 

は、多分私は私はこのような機能変更、道を見つけた:あなたは幅が高さよりも大きい場合に、このような比率を計算する必要が

 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; 

      var MIN_WIDTH = 640; 
      var MIN_HEIGHT = 640; 

      var ratio; 

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

        console.log('w > h'); 

        if (width > MAX_WIDTH) { 
         height *= MAX_WIDTH/width; 

         if(height < MIN_HEIGHT){ 

          ratio = MIN_HEIGHT/height; 

          height = MIN_HEIGHT; 

          width = MAX_WIDTH * ratio; 


         }else{ 

          width = MAX_WIDTH; 

         } 


        } 
       } else { 

        console.log('h > w'); 

        if (height > MAX_HEIGHT) { 
         width *= MAX_HEIGHT/height; 

         if(width < MIN_WIDTH){ 

          ratio = MIN_WIDTH/width; 

          width = MIN_WIDTH; 

          height = MIN_HEIGHT * ratio; 

         }else{ 

          height = MAX_HEIGHT; 
         } 


        } 
       } 
       canvas.width = height; 
       canvas.height = width; 

       console.log(canvas.width, " ", canvas.height); 

      } else { 

       console.log('other Orientations'); 

       if (height > MAX_HEIGHT) { 
        width *= MAX_HEIGHT/height; 

        if(width < MIN_WIDTH){ 

         ratio = MIN_WIDTH/width; 

         width = MIN_WIDTH; 

         height = MAX_HEIGHT * ratio; 


        }else{ 

         height = MAX_HEIGHT; 

        } 


       } 
       canvas.width = width; 
       canvas.height = height; 

       console.log(canvas.width, " ", canvas.height); 
      } 
} 
+0

私が理解する限り、最終的な正方形の画像のサイズを640〜1000にします。つまり、両方の寸法が1000を超える場合、1000にリサイズし、もう一方の寸法を大きくします。つまり、1920x1080イメージは1778 x 1000に縮小されます。これをトリミングすると、1000x1000の正方形が得られます。 –

+0

はい、あなたは正しいです。これは今起こることですが、1000×1000の正方形が得られますが、最小値を640に制限する方法はありますか? – Chriz74

+0

これが今起こった場合、1920x1080イメージにまったく異なる何かが起こっているという質問が表示されるのはなぜですか? –

答えて

0

var ratio = 640/height; 

または

var ratio = 640/width; 

他の値を計算することができます。

Height = ratio × height; 
Width = ratio × width; 

これ以降、イメージ化されたイメージ/要素があります。

+0

はい、ありがとうございました。私は解決策で質問を更新しました。見てみな。 – Chriz74

+0

OPは既にこれを行っています。乗算演算子は '*'です –

関連する問題