CSS预览

Question

我有一些复杂的问题需要解决。现在我需要在javascript中编写这样一个函数，它支持html5中的对象画布，它将剪切图片的一部分并在预览中显示它。我需要做的不是图像的不同分辨率。我为此使用了jQuery库，尤其是jquery.Jcrop.js ..预览中图片的可见部分我以后用于进一步的目的，它必须可以在切割形式写入文件 - 所以我使用帆布的机会。这个脚本运行良好，但问题是当我尝试将照片从较大的一个缩放到较小的一个时（我希望每个图像将在浏览器窗口中固定为高度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）必须等于比率（preview / realImg）。这给了我们公式：
realImg =（displayedImg * preview）/ crop
有了这个，很容易计算应用于CSS预览的宽度，高度，x（marginLeft）和y（marginTop）。

画布预览

对于画布，我们知道我们将使用最复杂的context.drawImage（）版本，它允许我们裁剪和调整大小。这个方法的第一个参数是JS图像对象，我们将使用target图像。这次我们想要知道实际图像中的裁剪，知道所显示图像中的裁剪。（crop / displayedImg）必须等于（realImgCrop / realImg）。它给了我们公式： realImgCrop =（crop * realImg）/ displayedImg
完成！

HTML5 Canvas - 具有预览和图像不同尺寸的可缩放部分

1 个答案:

CSS预览

画布预览