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
完成！