From 5a7847114fab34c10ff2251da6b21652c31209ab Mon Sep 17 00:00:00 2001
From: D <dim@Ds-MacBook-Pro.local>
Date: Thu, 25 Jan 2018 00:24:19 -0500
Subject: [PATCH] let image load before trying to crop and resize in
 image-helpers

---
 demo/js/image-helpers.js | 84 ++++++++++++++++++++++------------------
 1 file changed, 46 insertions(+), 38 deletions(-)

diff --git a/demo/js/image-helpers.js b/demo/js/image-helpers.js
index a44dbd3f..acee40d8 100644
--- a/demo/js/image-helpers.js
+++ b/demo/js/image-helpers.js
@@ -3,52 +3,60 @@ var loadFile = function(event) {
 var reader = new FileReader();
 reader.onload = function(){
   var preview = document.getElementById('preview_img');
-  preview.src = centerCrop(reader.result);
-  preview.src = resize(preview.src);
+  centerCrop(reader.result)
+    .then(resize)
+    .then(function (src) {
+      preview.src = src;
+    });
 };
 reader.readAsDataURL(event.target.files[0]);
 };
 
 function centerCrop(src){
+  return new Promise(function (resolve) {
     var image = new Image();
     image.src = src;
-
-    var max_width = Math.min(image.width, image.height);
-    var max_height = Math.min(image.width, image.height);
-
-    var canvas = document.createElement('canvas');
-    var ctx = canvas.getContext("2d");
-
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    canvas.width = max_width;
-    canvas.height = max_height;
-    ctx.drawImage(image, (max_width - image.width)/2, (max_height - image.height)/2, image.width, image.height);
-    return canvas.toDataURL("image/png");
+    image.onload = function () {
+      var max_width = Math.min(image.width, image.height);
+      var max_height = Math.min(image.width, image.height);
+
+      var canvas = document.createElement('canvas');
+      var ctx = canvas.getContext("2d");
+
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      canvas.width = max_width;
+      canvas.height = max_height;
+      ctx.drawImage(image, (max_width - image.width)/2, (max_height - image.height)/2, image.width, image.height);
+      resolve(canvas.toDataURL("image/png"));
+    };
+  });
 }
 
 function resize(src){
-    var image = new Image();
-    image.src = src;
-
-    var canvas = document.createElement('canvas');
-    canvas.width = image.width;
-    canvas.height = image.height;
-    var ctx = canvas.getContext("2d");
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.drawImage(image, 0, 0, image.width, image.height);
-
-    var dst = document.createElement('canvas');
-    dst.width = image_dimension;
-    dst.height = image_dimension;
-
-    window.pica.WW = false;
-    window.pica.resizeCanvas(canvas, dst, {
-    quality: 2,
-    unsharpAmount: 500,
-    unsharpThreshold: 100,
-    transferable: false
-  }, function (err) {  });
-    window.pica.WW = true;
-    return dst.toDataURL("image/png");
+  var image = new Image();
+  image.src = src;
+  return new Promise(function (resolve) {
+    image.onload = function () {
+      var canvas = document.createElement('canvas');
+      canvas.width = image.width;
+      canvas.height = image.height;
+      var ctx = canvas.getContext("2d");
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.drawImage(image, 0, 0, image.width, image.height);
+
+      var dst = document.createElement('canvas');
+      dst.width = image_dimension;
+      dst.height = image_dimension;
+
+      window.pica.WW = false;
+      window.pica.resizeCanvas(canvas, dst, {
+      quality: 2,
+      unsharpAmount: 500,
+      unsharpThreshold: 100,
+      transferable: false
+    }, function (err) {  });
+      window.pica.WW = true;
+      resolve(dst.toDataURL("image/png"));
+    };
+  });
 }
-