は、どのように私は私のキャンバスの画像

Question

ページ1サイズを変更することができます

//Calls the function from page 2 and the callback image is set as the source of the control. 

previewImage(current, function(img) { 
    jQuery(".mapItem").attr("src",img.src); 
}); 

ページを2：問題

//The functions callback returns an image which we use in page 1 (above) 

var canvas = document.createElement('canvas'); 
context = canvas.getContext('2d'); 

context.drawImage(this.m_Images[i],0,0,canvas.width,canvas.height); 
var t = new Image(); 
t.src = canvas.toDataURL(); 
callback(t); 

：私は2つのJavaScriptのページを持っている

は、最初の1は、イメージコントロールを持ちます2番目の関数はコールバックをイメージとして返す関数を持っています。

ページ1の私のコントロール(.mapItem)の高さと幅は75.2px（固定）です。しかし、コールバックから来ている画像は毎回異なるサイズになります。たとえば、ある日は200px * 300pxになり、1日は150px * 200pxなどになります。

コールバックの画像をクリップまたはカットするにはどうすればよいですか？ xとyの開始点としてイメージ（t）をゼロ（0）にし、.mapItemコントロールの高さと幅がどこにあるかをクリップします。

これは比例比である必要があります。だから私は次のコードを追加するだけではありません：

context.drawImage(this.m_Images[i],0,0,72.5,72.5);これは正方形であるかどうかわからないので、これはイメージを破壊するためです。事前に

感謝:)

Answer 1

あなたは、コールバックの画像の比率を決定した後、これ1ページの画像に適用することができます：

はのは、コールバック画像が300x200pxであると仮定しよう。画像の高さと幅の比率が

var ratio = callbackImage.height/callbackImage.width; 

...または、この場合は...

var ratio = 200/300; // 0.666... 

私たちは、1ページの幅を知っている...のように表すことができます。キャンバスは72.5であるので、ページ上の1つのキャンバスをコールバックイメージを中央にそう...

var canvasWidthHeight = 72.5; 
var imageHeight = canvasWidthHeight * ratio; // 48.333... 

のようなコールバックイメージの比例高さを決定するためにその値に比を適用することができますので、同様にオフセットyを計算します。 。

var y = (canvasWidthHeight - imageHeight)/2; 

...そして今、あなたはこれらの値を持つキャンバスdrawImageメソッドを使用することができます...

context.drawImage(
    this.m_Images[i], 
    0, y, 
    canvasWidthHeight, imageHeight 
); 

コールバックの画像は、それが広がっていたよりも高かった場合は、比率にページを適用したいです1キャンバスディメンションはy offestではなく、xオフセットを解決するために使用します。コールバックの画像が正方形だった場合、その比率は1.0になり、あなたは単に...すべて一緒に

context.drawImage(
    this.m_Images[i], 
    0, 0, 
    canvasWidthHeight, canvasWidthHeight 
); 

コードは次のようになりますで、正方形のページ1キャンバスにそれを描くことができ

var image = this.m_Images[i]; 
var canvas = { 
    width: 72.5, 
    height: 72.5 
}; 

var wh = 0; 
var ratio = image.height/image.width; 

if (image.width > image.height) { // landscape 
    wh = canvas.width * ratio; 
    context.drawImage(
     image, 
     0, (canvas.height - wh)/2, 
     canvas.width, wh 
    ); 
} else if (image.width < image.height) { // portrait 
    ratio = image.width/image.height; 
    wh = canvas.height * ratio; 
    context.drawImage(
     image, 
     (canvas.width - wh)/2, 0, 
     wh, canvas.height 
    ); 
} else { // square 
    context.drawImage(
     image, 
     0, 0, 
     canvas.width, canvas.height 
    ); 
} 

希望に役立ちます。;）

編集：コールバックを開始する前にnew Image()が完全にロードされていることを確認する必要があります。次のスニペットでこれを行うことができます。

// callback preparation code as before... 

var t = new Image(); 
t.addEventListener('load', function() { 
    callback(this); 
}); 
t.src = canvas.toDataURL();