blueimp / JavaScript-Load-Image

Load images provided as File or Blob objects or via URL. Retrieve an optionally scaled, cropped or rotated HTML img or canvas element. Use methods to parse image metadata to extract IPTC and Exif tags as well as embedded thumbnail images, to overwrite the Exif Orientation value and to restore the complete image header after resizing.
https://blueimp.github.io/JavaScript-Load-Image/
MIT License
4.45k stars 923 forks source link

using with jcrop not working #46

Closed krisred closed 10 years ago

krisred commented 10 years ago

I have the following code, when jcrop initializes the image goes blank, appreciate any help you can provide

document.getElementById('strImage').onchange = function (e) { boxW = Math.round($(window).width()-35); boxH = Math.round($(window).height()-150);
var oImage = $(".egImgPreviewContainer");

                    var loadingImage = loadImage(
                        e.target.files[0],
                        function (img) {

                            oImage.html(img);
                            $('.egImgPreviewContainer > img').attr('id','egUploadPreview');

                            orgAspectRatio = img.width/img.height;
                            cropX = 10;
                            cropY = 10;
                            cropX2 = (img.width-100)*orgAspectRatio;
                            cropY2 = (img.height-100)*orgAspectRatio;

                            //show upload buton
                            $(".egBtnUpload").show();

                            /*
                            setTimeout(function(){
                                // initialize Jcrop
                                $("#egUploadPreview").Jcrop({
                                    //minSize: [32, 32], // min crop size
                                    aspectRatio :orgAspectRatio, // keep aspect ratio 1:1
                                    bgFade: true, // use fade effect
                                    bgOpacity: .5, // fade opacity
                                    onChange: egUpdateImageInfo,
                                    onSelect: egUpdateImageInfo,
                                    allowSelect:false,
                                    setSelect:[cropX,cropY,cropX2,cropY2],
                                    allowResize:false
                                    }, function()
                                        {
                                            // use the Jcrop API to get the real image size
                                            var bounds = this.getBounds();
                                            boundx = bounds[0];
                                            boundy = bounds[1];                 

                                            $("#oW").val(boundx);
                                            $("#oH").val(boundy);                   

                                            // Store the Jcrop API in the jcrop_api variable
                                            jcrop_api = this;

                                            //show upload buton
                                            $(".egBtnUpload").show();

                                        });
                            },3000);    
                            */              
                            //alertify.log(img.width + 'x' + img.height);
                        },
                        {
                            maxWidth: boxW,
                            maxHeight:boxH,
                            canvas:false
                        }
                );

            };
blueimp commented 10 years ago

Please refer to the JCrop regarding support for that project.