$(document).ready( function() { $("....">
Geek Answers Handbook

Cropped image on popup

Please check http://jsfiddle.net/UmJtB/18/ below code

<script type="text/javascript"> $(document).ready( function() { $(".uploadphoto").click(function() { if(document.getElementById('files').files.length == 0){ alert('Select an Image first'); return false; }else { // When upload button is pressed, load the Popupbox First loadPopupBox(); } $('#popupBoxClose').click( function() { unloadPopupBox(); }); $('#container').click( function() { unloadPopupBox(); }); function unloadPopupBox() { // TO Unload the Popupbox $('#popup_box').fadeOut("slow"); $("#container").css({ // this is just for style "opacity": "1" }); } function loadPopupBox() { // To Load the Popupbox $('#popup_box').fadeIn("slow"); $("#container").css({ // this is just for style "opacity": "1.5" }); } }); //$('.FieldRequired').attr('id','files'); // set up variables var reader = new FileReader(), i=0, numFiles = 0, imageFiles; // use the FileReader to read image i function readFile() { reader.readAsDataURL(imageFiles[i]) } // define function to be run when the File // reader has finished reading the file reader.onloadend = function(e) { // make an image and append it to the div var image = $('<img>').attr('src', e.target.result); var imgdiv = $('#popup_box'); $(imgdiv).append(image); // if there are more files run the file reader again if (i < numFiles) { i++; readFile(); } }; $(".uploadphoto").click(function() { imageFiles = document.getElementById('files').files // get the number of files numFiles = imageFiles.length; readFile(); }); $(function(){ $('#popup_box img').Jcrop({ onChange: showPreview, onSelect: showPreview, aspectRatio: 1 }); }); function showPreview(coords) { var rx = 100 / coords.w; var ry = 100 / coords.h; $('#preview').css({ width: Math.round(rx * 500) + 'px', height: Math.round(ry * 370) + 'px', marginLeft: '-' + Math.round(rx * coords.x) + 'px', marginTop: '-' + Math.round(ry * coords.y) + 'px' }); } }); </script> </head> <body> <input type="file" value="" size="" class="Textbox FieldRequired" name="ProductFields[3]" id="files"> <input type="submit" value="upload" class="uploadphoto"/> <div id="popup_box"> <!-- OUR PopupBox DIV--> <canvas id="preview" style="width:150px;height:150px;overflow:hidden;"></canvas> <a id="popupBoxClose">close</a> </div> <div id="container"> <!-- Main Page --> </div> </body> </html> <style type="text/css"> /* popup_box DIV-Styles*/ #popup_box { display:none; /* Hide the DIV */ position:fixed; _position:absolute; /* hack for internet explorer 6 */ height:600px; width:600px; background:#FFFFFF; left: 300px; top: 150px; z-index:100; /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */ margin-left: 15px; /* additional features, can be omitted */ border:2px solid #ff0000; padding:15px; font-size:15px; -moz-box-shadow: 0 0 5px #ff0000; -webkit-box-shadow: 0 0 5px #ff0000; box-shadow: 0 0 5px #ff0000; } #popup_box img { height:600px; width:600px } #container { background: #d2d2d2; /*Sample*/ width:100%; height:100%; } a { cursor: pointer; text-decoration:none; } /* This is for the positioning of the Close Link */ #popupBoxClose { background: url("close.png") no-repeat scroll 0 0 transparent; color: transparent; font-size: 20px; line-height: 26px; position: absolute; right: -28px; top: -14px; } </style>

I load an image into a popup and I want to crop this image because I used JCrop. but it does not work for me. I want to display this image in canvas on this popup. Please help me. I get this PM error Error: NS_ERROR_INVALID_POINTER: Component return code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMFileReader.readAsDataURL] Thanks in advance!

+7
source share
1 answer

Working script

JS changes

 reader.onloadend = function (e) { // make an image and append it to the div var image = $('<img>').attr('src', e.target.result); var theImage = new Image(); theImage.src = e.target.result; var imageWidth = theImage.width; var imageHeight = theImage.height; var imgdiv = $('#popup_box'); $(imgdiv).append(image); image.Jcrop({ /*onChange: function(coords){showPreview(coords, image);}, */ onSelect: function(coords){showPreview(coords, image, imageWidth / image.width(), imageHeight / image.height());}, aspectRatio: 1 }); // if there are more files run the file reader again if (i < numFiles) { i++; readFile(); } };

and

 function showPreview(coords, image, width_scale, height_scale) { var c=document.getElementById("preview"); var ctx=c.getContext("2d"); var img=image[0]; if(coords.w > 0 && coords.h > 0) ctx.drawImage(img,coords.x * width_scale,coords.y * height_scale,coords.w * width_scale, coords.h * height_scale, 0 , 0, 300, 150); }

First of all, I added the Jcrop plugin to each of the images that are loaded inside the onloadend function. We also need to calculate how many images were scaled, since the canvas works with the raw image, and not with the rendered html image. I removed the onChange callback function, since drawing a canvas can be too expensive to run on every onChange event.

The showPreview callback has been modified to accept the coordinates passed to Jcrop, as well as the cropped image and scale factors for this image.

+3
source

More articles:


All Articles