HTML5畫布 - 可縮放部分的預覽和圖像的不同尺寸

Question

我有一些複雜的問題有待解決。現在我需要在javascript中編寫這樣一個函數，它支持HTML5中的對象畫布，它將剪切圖片的一部分並在預覽中顯示它。我需要做的不是分辨率不同的圖像。我使用的jQuery庫爲此，特別是jquery.Jcrop.js ..在預覽中的圖片的可見部分我gona使用後來出於進一步的目的，它必須是可剪切的形式寫入文件 - 所以我使用畫布的機會。這個腳本運行良好，但問題是當我嘗試從較大的圖片縮放到較小的圖片時（我希望每個圖片將在瀏覽器窗口中固定爲500像素高度）。我提出一個腳本的電流下圖：

function updatePreview(c) 
{ 
if (parseInt(c.w) > 0) 
{ 
var rx = 200/c.w; 
var ry = 300/c.h; 

// Show canvas image preview2 
var imageObj = $("#target")[0]; 
var canvas = $("#preview2")[0]; 
var context = canvas.getContext("2d"); 
canvas.setAttribute('width', '200'); 
canvas.setAttribute('height', '300'); 
//context.scale(2, 2); 
context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0, 
canvas.width, canvas.height); 

$('#preview').css({ 
width: Math.round(rx * boundx) + 'px', 
height: Math.round(ry * boundy) + 'px', 
marginLeft: '-' + Math.round(rx * c.x) + 'px', 
marginTop: '-' + Math.round(ry * c.y) + 'px' 
}); 
} 
}; 

而且這裏有一個簡單的HTML代碼，讓腳本來處理

<table> 
<tr> 
<td> 
<img src="http://imgon.net/di-M7Z9.jpg" id="target" 
alt="obrazek" height="450"/> 
</td> 
<td> 
<div style="width:200px;height:300px;overflow:hidden;"> 
<img src="http://imgon.net/di-M7Z9.jpg" id="preview" alt="Preview" /> 
</div> 
<br /> 
<div> 
<canvas id="preview2" style="width:200px;height:300px;"></canvas> 
</div> 
</td> 
</tr> 
</table> 

的第一個預覽版是基於CSS和它工作正常，但CSS只包含圖片的一部分，而不是實際剪切它。對比而言，畫布在高分辨率下看到圖片，預覽不會反映縮放圖片的片段（我只有放大部分）。這發生在Firefox中。對於Internet Explorer是一個特殊的庫，並且畫布的結果與CSS相同。我最後的問題是。我怎麼能說這個函數爲縮放圖像創建預覽，而不是預覽原始分辨率？我試圖把變量c.y替換爲Math.round（rx * boundx）和cx Math.round（ry * boundy），但它是不正確的。 我在這裏給你一個頁面，你可以看到腳本直播：agd-brita.pl/mobile2/tutorial.html 我請求你的幫助。感謝您的提前。

Answer 1

我不得不瞭解jCrop如何解答您的問題。

我做了一個小提琴，以顯示我的解決方案是如何工作的：http://jsfiddle.net/maitrekaio/Wre8w/
主要的一點是，使用CSS和帆布的工作真的是不同的，你必須做出不同的計算。
儘管如此，開始是一樣的：你有一個圖像元素，target和作物內。裁剪的細節由jCrop給出，圖像元素的尺寸存儲在我的displayedImg變量中。

的CSS預覽

的preview-container就是這樣讓我們看到了包含圖像的一部分的窗口。包含的圖像元素沒有調整大小，所以其尺寸是圖片realImg的尺寸。當莊稼被調整大小並移動時，我們必須感覺窗戶的效果是一樣的。事實上，這是包含的圖像，調整大小和移動。如何計算？
很容易看到比率（crop/displayedImg）必須等於比率（預覽/實際值）。這給了我們公式：
realImg =（displayedImg * preview）/ crop
有了這個，很容易計算應用於CSS預覽的寬度，高度，x（marginLeft）和y（marginTop）。

畫布預覽

爲畫布，我們知道，我們將使用context.drawImage（），在一個允許我們裁剪和調整的最複雜的版本。該方法的第一個參數是一個JS圖像對象，我們將使用target圖像。這次我們要計算真實圖像中的作物，瞭解顯示圖像中的作物。（crop/displayedImg）必須等於（realImgCrop/realImg）。它給了我們公式： realImgCrop =（crop * realImg）/ displayedImg
完成！