Question

I have some complicated, problem to be solved. Now I need to write such a function in javascript that supports object canvas in html5, which will cut out the portion of the picture and show it in the preview. I need to do than with diffrent resolution of images. I use the jQuery library for this, especially jquery.Jcrop.js .. The visible part of the picture in the preview I’m gona use later for further purposes, it must be writable in the cut form to file – so I use the opportunities of canvas. This script is working well, but the problem is when I try to scale a photo from the larger to the smaller one ( I want that each image will be fixed in the browser window to height 500 px). I present below the current figure of a script:

 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'
 });
 }
 };

And here’s a simplified html code that is for the script to be processing

 <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>

The first preview is based on css and it works correctly but css covers only part of the picture and not actually cut it. Contrast, canvas sees a picture in high resolution and preview does not reflect the segment of the scaled images (I have enlarged section only). This happens in Firefox. For Internet Explorer is a special library, and there result for the canvas is the same as for CSS. My final question is. How I can say to the function to create a preview for the scaled image and not the preview for the original resolution? I tried to put substitute for the variable c.y like Math.round (rx * boundx) and for cx Math.round (ry * boundy) but it is not right.
I give here a page where you can see the script live: agd-brita.pl/mobile2/tutorial.html
I ask you for help. Thanks for advance.

Answer 1

I had to understand a little bit how jCrop works to answer you.

I made a fiddle to show how my solution works: http://jsfiddle.net/maitrekaio/Wre8w/
The main point is that working with CSS and working with canvas are really different and that you have to make different computations.
Nevertheless, the starting is the same: you have an image element, target and a crop within. The details of the crop are given by jCrop, and the dimensions of the image element are stored in my displayedImg variable.

The CSS preview

The preview-container is like a window that let’s us see a portion of the contained image. The contained image element has not been resized, so its dimensions are those of the picture realImg. When the crop is resized and moved, we have to give the feeling that the window does the same. In fact, it’s the contained image that is resized and moved. How to compute that ?
It’s easy to see that the ratio (crop / displayedImg) must be equal to the ratio (preview / realImg). That gives us the formula:
realImg = (displayedImg * preview) / crop
With this, it’s easy to calculate width, height, x (marginLeft) and y (marginTop) which are applied to the CSS preview.

The canvas preview

For the canvas, we know that we’ll use the most complex version of context.drawImage(), the one that allows us to crop and resize. The first parameter of this method is a JS image object, we’ll use the target image. This time we want to compute the crop in the real image, knowing the crop in the displayed image. (crop / displayedImg) must be equal to (realImgCrop / realImg). It gives us the formula:
realImgCrop = (crop * realImg) / displayedImg
Done !