cropping browsed 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 am uploading image on popup and I want to crop that image,for that I have used JCrop. but it is not working for me.I want to show that image in canvas on that popup.Please help me out.. I am getting this error PM Error: NS_ERROR_INVALID_POINTER: Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMFileReader.readAsDataURL] Thanks in advance!

Working Fiddle

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 have added the Jcrop plugin to each of the images that is being loaded inside the onloadend function. We also have to calculate how much the image has been scaled since canvas works with the raw image not the rendered html image. I removed the onChange callback function as drawing the canvas might be a bit too costly to run every time the onChange event fires.

The showPreview callback has been modified to take the coordinates passed by Jcrop as well as the image that is being cropped and the scale factors for that image.

Recommended topics

Hot tags