Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: Foliotek/Croppie
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v2.5.1
Choose a base ref
...
head repository: Foliotek/Croppie
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: master
Choose a head ref

Commits on Oct 19, 2017

  1. Seems to be a fix for the aspect ratio problem with square images. (#378

    )
    
    * fixes-issue-#365
    
    * 2.5.1
    
    * fixes-issue-#365
    
    * forgot minified version
    nathanwienand authored and thedustinsmith committed Oct 19, 2017
    Copy the full SHA
    2f48690 View commit details
  2. Updated index.html (#358)

    Fixed typo.
    jofftiquez authored and thedustinsmith committed Oct 19, 2017
    Copy the full SHA
    f2158da View commit details
  3. Fix Issue 397 (#398)

    * ISSUE-397: Fix wrong imgData after zomming out.
    
    * 2.5.1
    
    * Revert "2.5.1"
    
    This reverts commit f98da61
    
    * Revert croppie.min.js to version 2.5.0 state
    
    * Add imgData to declaration block.
    michib authored and thedustinsmith committed Oct 19, 2017
    Copy the full SHA
    19200f9 View commit details
  4. fix error from #378

    thedustinsmith committed Oct 19, 2017
    Copy the full SHA
    c70135b View commit details
  5. Fix zoom problems with enforceBoundary turned off (#405)

    I some situations the result image is scaled out of ratio!
    I tagged  down the problem to:
    Math.min(width, self._originalImageWidth)
    I don't know why its needed ... but if i removed it its working ok!
    pknoe3lh authored and thedustinsmith committed Oct 19, 2017
    Copy the full SHA
    83758d1 View commit details
  6. trying to cleanup

    thedustinsmith committed Oct 19, 2017
    Copy the full SHA
    515c787 View commit details

Commits on Nov 17, 2017

  1. Update README.md

    thedustinsmith authored Nov 17, 2017
    Copy the full SHA
    6754be1 View commit details

Commits on Dec 8, 2017

  1. Copy the full SHA
    c8d203c View commit details
  2. 2
    Copy the full SHA
    e158771 View commit details
  3. Copy the full SHA
    8430d4a View commit details

Commits on Jan 4, 2018

  1. added ctrl key required to zoom option

    Dani committed Jan 4, 2018
    Copy the full SHA
    97b9b7e View commit details

Commits on Jan 8, 2018

  1. Copy the full SHA
    66d873e View commit details

Commits on Jan 9, 2018

  1. Copy the full SHA
    a6a525d View commit details
  2. remove note about ie9

    thedustinsmith committed Jan 9, 2018
    Copy the full SHA
    540aaad View commit details
  3. Copy the full SHA
    801795e View commit details
  4. Updated README (#432)

    I added my vuejs croppie version too. :)
    jofftiquez authored and thedustinsmith committed Jan 9, 2018
    Copy the full SHA
    4bf2cda View commit details
  5. Copy the full SHA
    fce102b View commit details
  6. Update croppie.js (#425)

    arthurcannon authored and thedustinsmith committed Jan 9, 2018
    Copy the full SHA
    37c6ac1 View commit details
  7. Copy the full SHA
    7b09372 View commit details
  8. Copy the full SHA
    2b061eb View commit details
  9. Copy the full SHA
    22d7d6d View commit details

Commits on Jan 19, 2018

  1. Copy the full SHA
    08d8e21 View commit details

Commits on Jan 29, 2018

  1. Remove unnecessary export (#452)

    sarunint authored and thedustinsmith committed Jan 29, 2018
    Copy the full SHA
    cd08407 View commit details

Commits on Feb 5, 2018

  1. Copy the full SHA
    1c848c3 View commit details
  2. Add namespace to update event (#458)

    * adding namespace to update event
    
    * adding namespace to correct event
    jkeedy authored and thedustinsmith committed Feb 5, 2018
    Copy the full SHA
    add10fb View commit details
  3. Copy the full SHA
    25593fc View commit details
  4. Copy the full SHA
    25595ec View commit details
  5. Copy the full SHA
    69f23af View commit details
  6. Copy the full SHA
    3effe09 View commit details
  7. Copy the full SHA
    e914ec5 View commit details
  8. update readme

    thedustinsmith committed Feb 5, 2018
    Copy the full SHA
    7e96d5c View commit details
  9. prep for 2.6.0

    thedustinsmith committed Feb 5, 2018
    Copy the full SHA
    a89bda0 View commit details
  10. 2.6.0

    thedustinsmith committed Feb 5, 2018
    Copy the full SHA
    315de4a View commit details
  11. Copy the full SHA
    71f637d View commit details
  12. Copy the full SHA
    12ab62e View commit details
  13. prep for 2.6.1

    thedustinsmith committed Feb 5, 2018
    Copy the full SHA
    e5eea26 View commit details
  14. 2.6.1

    thedustinsmith committed Feb 5, 2018
    Copy the full SHA
    1c67a9b View commit details

Commits on Feb 21, 2018

  1. Fix typo that makes it unusable in strict mode (#481)

    This typo makes it unusable in strict mode because it doesn't allow to create global variables in this way, and i believe you didn't want it too https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode#Converting_mistakes_into_errors
    nolimits4web authored and thedustinsmith committed Feb 21, 2018
    Copy the full SHA
    32b4f59 View commit details

Commits on Mar 16, 2018

  1. Fix enforce boundary (#484)

    * Linting - avoid type coercion
    
    * Linting - remove unncessary semi colons
    
    * Fix issue with enforceBoundary = false
    
    Whenvever enforceBoundary is set to false, the image cannot get smaller the original image size. Adding conditional that will skip this check if enforceBoundary = false
    jlane9 authored and thedustinsmith committed Mar 16, 2018
    Copy the full SHA
    3a61566 View commit details
  2. prep for 2.6.2

    thedustinsmith committed Mar 16, 2018
    Copy the full SHA
    6cee78e View commit details
  3. 2.6.2

    thedustinsmith committed Mar 16, 2018
    Copy the full SHA
    c2ac633 View commit details

Commits on Mar 26, 2018

  1. Fix reading EXIF orientation when 'enableOrientation' is true (#499)

    EXIF orientation data got ignored because of commit 018d30c
    (which fixed displaying image when exif-js is not available).
    
    This only happens when 'enableOrientation' is true and you do
    not pass an orientation to 'bind'. This is for example the case
    when you want to add a button to rotate the image.
    
    You can reproduce this issue in the demo 'upload-demo' when you
    set 'enableOrientation' to true.
    uwolfer authored and thedustinsmith committed Mar 26, 2018
    Copy the full SHA
    6a6bc79 View commit details

Commits on May 22, 2018

  1. Copy the full SHA
    9aefc6e View commit details
  2. Fix linting issues (#500)

    uwolfer authored and thedustinsmith committed May 22, 2018
    Copy the full SHA
    39e648e View commit details
  3. Fix rotate (#504)

    * fix _onZoom called twice when rotate
    
    * keep center point after rotate
    swznd authored and thedustinsmith committed May 22, 2018
    Copy the full SHA
    4bb6c7a View commit details
  4. Don't silently discard image loading errors (#511)

    The `bind` method returns a promise which mainly awaits loading the
    image URL. If an error happened within the image loader, then the `bind`
    method would simply log it to the console and the caller's promise
    handling would continue as if everything was fine. In addition, network
    issues or otherwise errors in the browser's loading of the image was not
    caught and propagated back up to the `bind` method.
    
    This implements a simple `onerror` handler for loading the image which
    rejects the loading promise. The `catch` handler in the `bind` method
    which swallowed any rejections have also been removed, which enables the
    caller to handle this properly on their side.
    fdanielsen authored and thedustinsmith committed May 22, 2018
    Copy the full SHA
    8f90ab4 View commit details

Commits on May 23, 2018

  1. Fix global, AMD and CommonJS definition (#532)

    * #479, #470 - fix global definition
    
    * Fix AMD and CommonJS definition
    sarunint authored and thedustinsmith committed May 23, 2018
    Copy the full SHA
    8dc634a View commit details

Commits on Jul 27, 2018

  1. Updated croppie-dart link (#538)

    cassmtnr authored and thedustinsmith committed Jul 27, 2018
    Copy the full SHA
    959a0a1 View commit details

Commits on Jan 19, 2019

  1. Update README.md (#577)

    jofftiquez authored and thedustinsmith committed Jan 19, 2019
    Copy the full SHA
    f5746a6 View commit details
  2. Update README.md (#578)

    jofftiquez authored and thedustinsmith committed Jan 19, 2019
    Copy the full SHA
    d69eef5 View commit details
Showing with 728 additions and 185 deletions.
  1. +21 −0 .github/ISSUE_TEMPLATE.md
  2. +13 −7 README.md
  3. +190 −142 croppie.js
  4. +1 −1 croppie.min.js
  5. +11 −7 demo/demo.css
  6. +17 −11 demo/demo.js
  7. +46 −14 index.html
  8. +424 −0 package-lock.json
  9. +5 −3 package.json
21 changes: 21 additions & 0 deletions .github/ISSUE_TEMPLATE.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
## Expected Behavior


## Actual Behavior


## Steps to Reproduce the Problem

1.
1.
1.

## Example Link
Please recreate your issue using [JSbin](https://www.jsbin.com), [JSFiddle](https://jsfiddle.net), or [Codepen](https://codepen.io).
* Link:


## Specifications

- Browser:
- Version:
20 changes: 13 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@ Download:
[croppie.js](croppie.js) & [croppie.css](croppie.css)

## Adding croppie to your site
```
```html
<link rel="stylesheet" href="croppie.css" />
<script src="croppie.js"></script>
```
@@ -27,19 +27,25 @@ https://cdnjs.cloudflare.com/ajax/libs/croppie/{version}/croppie.min.js
[Documentation](http://foliotek.github.io/Croppie#documentation)

## Related Libraries
* https://github.com/wem/croppie-dart
* https://github.com/allenRoyston/ngCroppie
* https://github.com/lpsBetty/angular-croppie

* [croppie-dart](https://gitlab.com/michel.werren/croppie-dart)
* [ngCroppie](https://github.com/allenRoyston/ngCroppie)
* [angular-croppie](https://github.com/lpsBetty/angular-croppie)
* [django-croppie](https://github.com/dima-kov/django-croppie)
* [vue-croppie](https://github.com/jofftiquez/vue-croppie)

## Contributing
#### Static Server
`live-server`
First, thanks for contributing. This project is difficult to maintain with one person. Here's a "checklist" of things to remember when contributing to croppie.
* Don't forget to update the documentation.
* If you're adding a new option/event/method, try adding to an example on the documentation. Or create a new example, if you feel the need.
* We don't have tests for Croppie :( (if you want to create tests I'd be forever grateful), so please try to test the functionality you're changing on the demo page. I've tried to add as many use-cases as I can think of on there. Compare the functionality in your branch to the one on the official page. If they all still work, then great!

If you're looking for a simple server to load the demo page, I use https://github.com/tapio/live-server.

#### Minifying
`uglifyjs croppie.js -c -m -r '$,require,exports' -o croppie.min.js`

#### Releasing a new version
For the most part, you shouldn't worry about these steps unless you're the one handling the release. Please don't bump the release and don't minify/uglify in a PR. That just creates merge conflicts when merging. Those steps will be performed when the release is created.
1. Bump version in croppie.js
2. Minify/Uglify
3. Commit
332 changes: 190 additions & 142 deletions croppie.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion croppie.min.js

Large diffs are not rendered by default.

18 changes: 11 additions & 7 deletions demo/demo.css
Original file line number Diff line number Diff line change
@@ -32,11 +32,17 @@ h1 {
padding-top: 30px;
margin: 15px 0;
}

h3 {
font-size: 18px;
font-weight: 400;
border-bottom: 1px solid #0C4648;
margin: 15px 0 10px;
}
nav {
position: absolute;
top: 0;
right: 0;
padding:15px;
}

nav a {
@@ -171,12 +177,6 @@ h2 {
margin: 0 0 5px 0;
}

.documentation h3 {
font-size: 18px;
font-weight: 400;
border-bottom: 1px solid #0C4648;
margin: 15px 0 10px;
}
.documentation ul {
list-style: none;
padding: 0;
@@ -218,6 +218,10 @@ h2 {
color: #777;
}

.important-notes article {
margin-bottom: 2em;
}

.upload-demo .upload-demo-wrap,
.upload-demo .upload-result,
.upload-demo.ready .upload-msg {
28 changes: 17 additions & 11 deletions demo/demo.js
Original file line number Diff line number Diff line change
@@ -40,23 +40,24 @@ var Demo = (function() {
viewport: {
width: 150,
height: 150,
type: 'square'
type: 'circle'
},
boundary: {
width: 300,
height: 300
},
// url: 'demo/demo-1.jpg',
enforceBoundary: false
// enforceBoundary: false
// mouseWheelZoom: false
});
mc.on('update', function (ev, data) {
mc.on('update.croppie', function (ev, data) {
// console.log('jquery update', ev, data);
});
$('.js-main-image').on('click', function (ev) {
mc.croppie('result', {
type: 'rawcanvas',
// size: { width: 300, height: 300 },
type: 'rawcanvas',
circle: true,
// size: { width: 300, height: 300 },
format: 'png'
}).then(function (canvas) {
popupResult({
@@ -93,7 +94,11 @@ var Demo = (function() {
}
basic.croppie('result', {
type: 'canvas',
size: size
size: size,
resultSize: {
width: 50,
height: 50
}
}).then(function (resp) {
popupResult({
src: resp
@@ -105,7 +110,7 @@ var Demo = (function() {
function demoVanilla() {
var vEl = document.getElementById('vanilla-demo'),
vanilla = new Croppie(vEl, {
viewport: { width: 100, height: 100 },
viewport: { width: 200, height: 100 },
boundary: { width: 300, height: 300 },
showZoomer: false,
enableOrientation: true
@@ -116,7 +121,7 @@ var Demo = (function() {
zoom: 0
});
vEl.addEventListener('update', function (ev) {
console.log('vanilla update', ev);
// console.log('vanilla update', ev);
});
document.querySelector('.vanilla-result').addEventListener('click', function (ev) {
vanilla.result({
@@ -140,7 +145,8 @@ var Demo = (function() {
boundary: { width: 300, height: 300 },
showZoomer: false,
enableResize: true,
enableOrientation: true
enableOrientation: true,
mouseWheelZoom: 'ctrl'
});
resize.bind({
url: 'demo/demo-2.jpg',
@@ -228,13 +234,13 @@ var Demo = (function() {
}

function bindNavigation () {
var $body = $('body');
var $html = $('html');
$('nav a').on('click', function (ev) {
var lnk = $(ev.currentTarget),
href = lnk.attr('href'),
targetTop = $('a[name=' + href.substring(1) + ']').offset().top;

$body.animate({ scrollTop: targetTop });
$html.animate({ scrollTop: targetTop });
ev.preventDefault();
});
}
60 changes: 46 additions & 14 deletions index.html
Original file line number Diff line number Diff line change
@@ -25,12 +25,10 @@
<a id="home" name="home"></a>
<div class="container">
<nav>
<ul>
<a href="#options">Usage</a>
<a href="#documentation">Documentation</a>
<a href="#demos">Demos</a>
<a href="#browsers">About</a>
</ul>
<a href="#options">Usage</a>
<a href="#documentation">Documentation</a>
<a href="#demos">Demos</a>
<a href="#browsers">About</a>
</nav>
<div class="grid">
<div class="col-1-2">
@@ -129,6 +127,12 @@ <h3>Options</h3>
<span class="default">Default</span>
<code class="language-javascript">false</code>
</li>
<li id="enableResize">
<strong class="focus">enableResize</strong><em>boolean</em>
<p>Enable or disable support for resizing the viewport area.</p>
<span class="default">Default</span>
<code class="language-javascript">false</code>
</li>
<li id="enableZoom">
<strong class="focus">enableZoom</strong><em>boolean</em>
<p>Enable zooming functionality. If set to false - scrolling and pinching would not zoom.</p>
@@ -140,8 +144,8 @@ <h3>Options</h3>
<span class="default">Default</span><code class="language-javascript">true</code>
</li>
<li id="mouseWheelZoom">
<strong class="focus">mouseWheelZoom</strong><em>boolean</em>
<p>Enable or disable the ability to use the mouse wheel to zoom in and out on a croppie instance</p>
<strong class="focus">mouseWheelZoom</strong><em>bool/string</em>
<p>Enable or disable the ability to use the mouse wheel to zoom in and out on a croppie instance. If <code class="language-javascript">'ctrl'</code> is passed mouse wheel will only work while control keyboard is pressed</p>
<span class="default">Default</span><code class="language-javascript">true</code>
</li>
<li id="showZoomer">
@@ -172,13 +176,13 @@ <h3>Methods</h3>
</li>
<li id="bind">
<strong class="focus">bind({ url, points, orientation, zoom })</strong><em>Promise</em>
<p>Bind an image the croppie. Returns a promise to be resolved when the image has been loaded and the croppie has been initialized.</p>
<p>Bind an image to the croppie. Returns a promise to be resolved when the image has been loaded and the croppie has been initialized.</p>
<span class="default">Parameters</span>
<br />
<ul class="parameter-list">
<li><code class="language-javascript">url</code> URL to image</li>
<li><code class="language-javascript">points</code> Array of points that translate into <code class="language-javascript">[topLeftX, topLeftY, bottomRightX, bottomRightY]</code></li>
<code class="language-javascript">zoom</code> Apply zoom after image has been bound
<li><code class="language-javascript">zoom</code> Apply zoom after image has been bound </li>
<li><code class="language-javascript">orientation</code> Custom orientation, applied after exif orientation (if enabled). Only works with
<code class="language-javascript">enableOrientation</code> option enabled (see 'Options').
<br />
@@ -192,7 +196,6 @@ <h3>Methods</h3>
<li><code class="language-javascript">6</code> rotated clockwise by 90 degrees</li>
<li><code class="language-javascript">7</code> flipped horizontally, then rotated right by 90 degrees</li>
<li><code class="language-javascript">8</code> rotated counter-clockwise by 90 degrees</li>
</pre>
</ul>
</li>
</ul>
@@ -275,13 +278,19 @@ <h3>Methods</h3>
</li>
</ul>
</li>
</ul>
</section>
<section>
<h3>Events</h3>
<ul>
<li id="update">
<strong class="focus">update(croppe)</strong><em>Croppie</em>
<strong class="focus">update(croppie)</strong><em>Croppie</em>
<p>Triggered when a drag or zoom occurs</p>
<pre class="language-javascript"><code class="language-javascript">
$('.my-croppie').on('update.croppie', function(ev, cropData) {});
// or
document.getElementById('another-croppie').addEventListener('update', function(ev) { var cropData = ev.detail; });
</code></pre>
</li>
</ul>
</section>
@@ -370,7 +379,8 @@ <h2>Demos</h2>
boundary: { width: 300, height: 300 },
showZoomer: false,
enableResize: true,
enableOrientation: true
enableOrientation: true,
mouseWheelZoom: 'ctrl'
});
resize.bind({
url: 'demo/demo-2.jpg',
@@ -447,6 +457,29 @@ <h2>Demos</h2>
</div>
</section>

<section class="important-notes">
<a id="important-notes" name="important-notes"></a>
<div class="section-header"><h2>Important Notes</h2></div>
<div class="container">
<article>
<a id="cors" name="cors"></a>
<h3>Image Hosting & Cross Origin Errors</h3>
<p>Croppie uses <code class="language-javascript">canvas.drawImage(...)</code> to manipulate images. Thus, images must obey the CORS policy. More info can be found <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image">here</a>.</p>
</article>
<article>
<a id="visibility" name="visibility"></a>
<h3>Visibility and Binding</h3>
<p>Croppie is dependent on it's container being visible when the <a href="#bind">bind</a> method is called. This can be an issue when your croppie component is inside a modal that isn't shown. Let's take the bootstrap modal for example..</p>
<pre class="language-javascript"><code class="language-javascript">
var myCroppie = $('#my-croppie').croppie(opts);
$('#my-modal').on('shown.bs.modal', function(){
myCroppie.croppie('bind', bindOpts);
});
</code></pre>
<p>If you are having issues getting the correct crop result, and your croppie instance is shown inside of a modal, try taking your croppie out of the modal and see if your issues persist. If they don't, then make sure that your bind method is called after the modal is done animating.</p>
</article>
</div>
</section>

<section class="browsers">
<a id="browsers" name="browsers"></a>
@@ -465,7 +498,6 @@ <h2>Browser Support</h2>
<li>iOS</li>
<li>Android</li>
</ul>
<p><strong>IE9</strong> may be supported, but it isn't tested. If you're able to test it and let us know, please do so on Github.</p>
</div>
</section>
<section class="who">
424 changes: 424 additions & 0 deletions package-lock.json

Large diffs are not rendered by default.

8 changes: 5 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
{
"name": "croppie",
"version": "2.5.1",
"version": "2.6.5",
"description": "A simple javascript image cropper",
"main": "croppie.js",
"devDependencies": {
"gh-pages": "^0.11.0",
"mocha": "2.4.5"
"mocha": "2.4.5",
"uglify-js": "3.3.15"
},
"scripts": {
"test": "mocha test/unit",
"deploy": "node deploy.js"
"deploy": "node deploy.js",
"uglify": "uglifyjs croppie.js -c -m -r '$,require,exports' -o croppie.min.js"
},
"repository": {
"type": "git",