{"action":"opened","issue":{"url":"https://api.github.com/repos/mhretab/ember-cli-image-cropper/issues/9","repository_url":"https://api.github.com/repos/mhretab/ember-cli-image-cropper","labels_url":"https://api.github.com/repos/mhretab/ember-cli-image-cropper/issues/9/labels{/name}","comments_url":"https://api.github.com/repos/mhretab/ember-cli-image-cropper/issues/9/comments","events_url":"https://api.github.com/repos/mhretab/ember-cli-image-cropper/issues/9/events","html_url":"https://github.com/mhretab/ember-cli-image-cropper/issues/9","id":161367182,"number":9,"title":"problem in uploading different images for cropping","user":{"login":"AnindyoChoudhury","id":19869199,"avatar_url":"https://avatars.githubusercontent.com/u/19869199?v=3","gravatar_id":"","url":"https://api.github.com/users/AnindyoChoudhury","html_url":"https://github.com/AnindyoChoudhury","followers_url":"https://api.github.com/users/AnindyoChoudhury/followers","following_url":"https://api.github.com/users/AnindyoChoudhury/following{/other_user}","gists_url":"https://api.github.com/users/AnindyoChoudhury/gists{/gist_id}","starred_url":"https://api.github.com/users/AnindyoChoudhury/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/AnindyoChoudhury/subscriptions","organizations_url":"https://api.github.com/users/AnindyoChoudhury/orgs","repos_url":"https://api.github.com/users/AnindyoChoudhury/repos","events_url":"https://api.github.com/users/AnindyoChoudhury/events{/privacy}","received_events_url":"https://api.github.com/users/AnindyoChoudhury/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2016-06-21T07:31:51Z","updated_at":"2016-06-21T07:31:51Z","closed_at":null,"body":"Hello again,\r\nHey the image cropping is working very well.\r\nBut i am having difficulty to upload different images to be cropped; ie. I need to upload an image from the local system and then crop it. the code I an using is as follows.\r\n\r\nthe hbs file\r\n\r\n    <div class=\"container\"> \r\n    \r\n        <div class=\"cropper\">\r\n        \r\n            <div class=\"cropper-container\" style=\"width:400px;\">\r\n                \r\n                <img width=\"400px\" id=\"img\" src=\"image.jpg\">\r\n            \r\n            </div>\r\n    \r\n            <div class=\"preview\">\r\n                \r\n                <div class=\"img-preview\" style=\"width: 152px; height: 152px;\">\r\n                \r\n                </div>\r\n            \r\n                Preview\r\n            \r\n            </div>\r\n    \r\n            <div class=\"cropped\">\r\n                \r\n                <div class=\"cropped-avatar\">\r\n\r\n                    {{croppedAvatar}}\r\n    \r\n                </div>\r\n                \r\n                Cropped Avatar\r\n            \r\n            </div>\r\n      \r\n      </div>\r\n    \r\n        <button class=\"button\" {{action \"getCroppedAvatar\"}}>\r\n            \r\n            Crop Avatar\r\n        \r\n        </button>\r\n        \r\n        <input type=\"file\" id=\"inputFileToLoad\">\r\n        \r\n        <button  id=\"button\" {{action \"loadImageFileAsURL\"}}>\r\n        \r\n             Load Selected File\r\n        \r\n        </button>\r\n    </div>\r\n    \r\n    {{yield}}\r\n\r\n\r\nand the corresponding js file is\r\n\r\n\r\n                // app/components/avatar-cropper.js \r\n                import imageCropper from 'ember-cli-image-cropper/components/image-cropper';\r\n\r\n                export default imageCropper.extend({\r\n                  \t//override default options of cropper\r\n                  \taspectRatio: 1,\r\n                  \tminCropBoxWidth: 100,\r\n                  \tminCropBoxHeight: 100,\r\n                  \tcropperContainer: '.cropper-container > img',\r\n                  \tpreviewClass: '.img-preview',\r\n                  \tcroppedAvatar: null,\r\n                  \tactions:\r\n                  \t{\r\n                    \t\r\n                    \tgetCroppedAvatar: function() \r\n                    \t{\r\n                      \t\tvar container = this.$(this.get('cropperContainer'));\r\n                      \t\tvar croppedImage = container.cropper('getCroppedCanvas');\r\n                      \t\tthis.set('croppedAvatar', croppedImage);\r\n                    \t},\r\n                    \tloadImageFileAsURL: function()\r\n                            {\r\n                            \t\r\n                                var filesSelected = document.getElementById(\"inputFileToLoad\").files;\r\n                                if (filesSelected.length > 0)\r\n                                {\r\n                                    var fileToLoad = filesSelected[0];\r\n                                    if (fileToLoad.type.match(\"image.*\"))\r\n                                    {\r\n                                    \t  var fileReader = new FileReader();\r\n                                        fileReader.onload = function(fileLoadedEvent) \r\n                                        {\r\n                                        \tvar imageLoaded = document.getElementById(\"img\");\r\n                                          imageLoaded.src = fileLoadedEvent.target.result;\r\n                                          //  _this.set('selectedImage',fileLoadedEvent.target.result);\r\n                                        };\r\n                                        fileReader.readAsDataURL(fileToLoad);\r\n                                    }\r\n                                    \r\n                                }\r\n                            }\r\n                  \t}\r\n                });\r\n\r\n\r\nbut the image is not changing. can you please help out with how to upload an image to a website from a client image and then crop it."}}
{"actor":{"display_login":"AnindyoChoudhury"}}