react-scratchingcard 1.0.0 → 1.0.1

package/dist/index.modern.js

@@ -25,6 +25,7 @@ var Scratch = /*#__PURE__*/function (_Component) {
     _this = _Component.call(this, props) || this;
     _this.isDrawing = false;
     _this.lastPoint = null;
+    _this.objectUrl = null;
     _this.isFinished = false;
 
     _this.reset = function () {
@@ -90,24 +91,75 @@ var Scratch = /*#__PURE__*/function (_Component) {
 
   var _proto = Scratch.prototype;
 
-  _proto.componentDidMount = function componentDidMount() {
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    if (prevProps.image !== this.props.image) {
+      this.loadImage();
+    }
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    this.revokeObjectUrl();
+  };
+
+  _proto.revokeObjectUrl = function revokeObjectUrl() {
+    if (this.objectUrl) {
+      URL.revokeObjectURL(this.objectUrl);
+      this.objectUrl = null;
+    }
+  };
+
+  _proto.resolveImageSource = function resolveImageSource(image) {
+    this.revokeObjectUrl();
+
+    if (typeof image === 'string') {
+      return image;
+    }
+
+    if (image instanceof File) {
+      this.objectUrl = URL.createObjectURL(image);
+      return this.objectUrl;
+    }
+
+    if (image && typeof image.src === 'string') {
+      return image.src;
+    }
+
+    if (image && typeof image["default"] === 'string') {
+      return image["default"];
+    }
+
+    return '';
+  };
+
+  _proto.loadImage = function loadImage() {
     var _this2 = this;
 
-    this.isDrawing = false;
-    this.lastPoint = null;
-    this.ctx = this.canvas.getContext('2d');
     this.image = new Image();
-    this.image.crossOrigin = 'Anonymous';
+    this.image.crossOrigin = this.props.imageCrossOrigin === undefined ? 'anonymous' : this.props.imageCrossOrigin;
 
     this.image.onload = function () {
+      _this2.ctx.globalCompositeOperation = 'source-over';
+
+      _this2.ctx.clearRect(0, 0, _this2.props.width, _this2.props.height);
+
       _this2.ctx.drawImage(_this2.image, 0, 0, _this2.props.width, _this2.props.height);
 
+      _this2.isFinished = false;
+
       _this2.setState({
-        loaded: true
+        loaded: true,
+        finished: false
       });
     };
 
-    this.image.src = this.props.image;
+    this.image.src = this.resolveImageSource(this.props.image);
+  };
+
+  _proto.componentDidMount = function componentDidMount() {
+    this.isDrawing = false;
+    this.lastPoint = null;
+    this.ctx = this.canvas.getContext('2d');
+    this.loadImage();
 
     if (this.props.customBrush) {
       this.brushImage = new Image(this.props.customBrush.width, this.props.customBrush.height);