Fix #139

fengyuanchen · Dec 20, 2014 · 0121083 · 0121083
1 parent 7e16f7c
commit 0121083
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 5 deletions.
diff --git a/demos/index.html b/demos/index.html
@@ -76,6 +76,10 @@
         <button class="btn btn-info" id="rotateLeft" type="button">Rotate Left</button>
         <button class="btn btn-info" id="rotateRight" type="button">Rotate Right</button>
         <button class="btn btn-primary" id="setData" type="button">Set Data</button>
+        <label class="btn btn-primary" for="inputImage" title="Upload image file">
+          <input class="hide" id="inputImage" name="file" type="file" accept="image/*">
+          Upload
+        </label>
       </div>
       <div class="row eg-input">
         <div class="col-md-6">

diff --git a/demos/js/docs.js b/demos/js/docs.js
@@ -135,6 +135,34 @@ $(function() {
     $image.cropper("rotate", 90);
   });
 
+  var $inputImage = $("#inputImage");
+
+  if (window.FileReader) {
+    $inputImage.change(function() {
+      var fileReader = new FileReader(),
+          files = this.files,
+          file;
+
+      if (!files.length) {
+        return;
+      }
+
+      file = files[0];
+
+      if (/^image\/\w+$/.test(file.type)) {
+        fileReader.readAsDataURL(file);
+        fileReader.onload = function () {
+          $image.cropper("reset", true).cropper("replace", this.result);
+          $inputImage.val("");
+        };
+      } else {
+        showMessage("Please choose an image file.");
+      }
+    });
+  } else {
+    $inputImage.addClass("hide");
+  }
+
   $("#setAspectRatio").click(function() {
     $image.cropper("setAspectRatio", $("#aspectRatio").val());
   });

diff --git a/dist/cropper.js b/dist/cropper.js
@@ -265,8 +265,9 @@
       this.addListeners();
       this.initPreview();
 
-      this.built = TRUE;
+      this.built = TRUE; // Set `true` before update
       this.update();
+      this.replaced = FALSE; // Reset to `false` after update
 
       $this.one(EVENT_BUILT, defaults.built); // Only trigger once
       $this.trigger(EVENT_BUILT);
@@ -448,7 +449,6 @@
 
         // Reset image ratio
         if (this.replaced) {
-          this.replaced = FALSE;
           image.ratio = defaultImage.ratio;
         }
       }

diff --git a/dist/cropper.min.js b/dist/cropper.min.js
diff --git a/src/cropper.js b/src/cropper.js
@@ -257,8 +257,9 @@
       this.addListeners();
       this.initPreview();
 
-      this.built = TRUE;
+      this.built = TRUE; // Set `true` before update
       this.update();
+      this.replaced = FALSE; // Reset to `false` after update
 
       $this.one(EVENT_BUILT, defaults.built); // Only trigger once
       $this.trigger(EVENT_BUILT);
@@ -440,7 +441,6 @@
 
         // Reset image ratio
         if (this.replaced) {
-          this.replaced = FALSE;
           image.ratio = defaultImage.ratio;
         }
       }