{"action":"reopened","issue":{"url":"https://api.github.com/repos/sconsult/croppic/issues/192","labels_url":"https://api.github.com/repos/sconsult/croppic/issues/192/labels{/name}","comments_url":"https://api.github.com/repos/sconsult/croppic/issues/192/comments","events_url":"https://api.github.com/repos/sconsult/croppic/issues/192/events","html_url":"https://github.com/sconsult/croppic/issues/192","id":120152313,"number":192,"title":"Various improvements and fixes we've made to your script that you might want to implement.","user":{"login":"aBrookland","id":349317,"avatar_url":"https://avatars.githubusercontent.com/u/349317?v=3","gravatar_id":"","url":"https://api.github.com/users/aBrookland","html_url":"https://github.com/aBrookland","followers_url":"https://api.github.com/users/aBrookland/followers","following_url":"https://api.github.com/users/aBrookland/following{/other_user}","gists_url":"https://api.github.com/users/aBrookland/gists{/gist_id}","starred_url":"https://api.github.com/users/aBrookland/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/aBrookland/subscriptions","organizations_url":"https://api.github.com/users/aBrookland/orgs","repos_url":"https://api.github.com/users/aBrookland/repos","events_url":"https://api.github.com/users/aBrookland/events{/privacy}","received_events_url":"https://api.github.com/users/aBrookland/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":13,"created_at":"2015-12-03T11:44:38Z","updated_at":"2015-12-09T12:13:08Z","closed_at":null,"body":"Hi,\r\n\r\nI've used your script as part of a solution to provide a widget for users to provide a passport photo for an ID card.\r\n\r\nI've had to add some extra config options and additions to get it working how we needed so I thought I'd supply our modified version for you to look at and use anything you want. I've also reformatted and added missing braces etc to pass JSHint linting.\r\n\r\nWe've tested successfully on IE8, IE9, IE10, IE11 and Edge (all Win only) plus Firefox (Win and Mac), Chrome (Win, Mac, Android, iPhone and iPad), Safari (Mac, iPhone and iPad).\r\n\r\nSorry we've not had time to fork the project and provide proper atomic commits and generate pull requests which would've made your life easier but we've been working to a tight deadline.\r\n\r\nModifications:\r\n\r\n* Added $ variable passed into main anonymous function as an alias for jQuery so that $ works in the script if jQuery is run in compatibility mode.\r\n\r\n* Added code to resize and crop in browser using canvas if processInline is true and browser supports canvas. This will use canvas_resize.js (https://github.com/danschumann/limby-resize) if it's available to do the resizing as the default browser resize implementation is generally not very good.\r\n\r\n  * generatedImageFormat option (default: 'jpeg') - string - file format of generated image - valid choices 'jpeg', 'png' or others that make valid image MIME types.\r\n\r\n  * generatedImageQuality option (default: 80) - integer - jpeg compression level of generated image, ignored if image isn't a jpeg - valid from 0 - 100.\r\n\r\n* Added code to handle EXIF orientation when processing in browser - this will correctly rotate the image when it is selected to fix issues with it being the wrong orientation when cropped. NOTE: this needs [exif.js](https://github.com/exif-js/exif-js) to be included otherwise this functionality will be skipped.\r\n\r\n* Added ability to provide an image to overlay on top of the image being cropped:\r\n\r\n  * imgOverlay option (default: false) - string - the HTML of the overlay that will be placed over the image to be cropped.\r\n\r\n  * imgOverlayOpacity option (default: 1) - integer - the opacity of the image overlay, valid from 0 - 1.\r\n\r\n* Modified the zooming code so that the user cannot upscale stop pixellation.\r\n\r\n  * Added scaleToFillOnlyToCropSize (default: false) - boolean - set to true to allow upscaling if scaleToFill is true.\r\n\r\n* Added processInlineFallback option (default: false) - boolean - if processInline is true and this is true and the browser doesn't support processInline then fallback to uploading image to the server rather than provide error message.\r\n\r\n* Added inForm option (default: false) - boolean - flag to tell croppic that the widget is already in a form so it doesn't wrap the widget in a form but instead finds the existing form.\r\n\r\n* Added fileInputName option (default 'img') - string - the name of the file input that croppic creates.\r\n\r\n* Added croppedImage option (default: '') - string - the URL of an initial cropped image to display when initialising the widget.\r\n\r\n* Added file extension validation when user selects a file.\r\n\r\n  * Added validTypes option (default: ['jpg', 'png', 'gif']) - array of strings - an array of file extensions to be considered valid. The code will automatically add 'jpeg' to the test if it finds 'jpg'. Also the code will allow jpg, png or gif for processing in browser as the image uploaded to the site will always be generatedImageFormat.\r\n\r\n* Added onBeforeReset callback option - callback function called before croppic resets itself.\r\n\r\n* Added onReset callback option - callback function called after croppic resets itself.\r\n\r\n* Added addExtraUploadControls callback option - callback function called when croppic is creating the upload controls so controlling script can add any extra controls. The function is passed one argument which is the upload controls container div as a jQuery object.\r\n\r\n* Added loadPicture(image) function - loads an image to be cropped after the widget has been created. Pass in an string containing the image URL or data URI (we use this to load an image taken by the user with a webcam using webcam.js).\r\n\r\n* Added some \"global\" variables on the Croppic function for browser support test results so controlling script can use the results:\r\n\r\n  * isCanvasSupported - browser supports canvas.getContext(\"2d\").\r\n\r\n  * isAjaxUploadSupported - browser supports Ajax upload.\r\n\r\n  * isProcessInlineSupported - browser supports FileReader for process inline.\r\n\r\nCurrent version: [croppic.js.txt](https://github.com/sconsult/croppic/files/56722/croppic.js.txt)"}}