Merge pull request #65 from maxaggedon/bg-img-stretch

Background img stretch

Author: tbolis

src/SketchField.jsx

@@ -107,7 +107,6 @@ class SketchField extends PureComponent {
   };
 
   state = {
-    parentWidth: 550,
     action: true
   };
   _initTools = (fabricCanvas) => {
@@ -340,9 +339,6 @@ class SketchField extends PureComponent {
       obj.top = tempTop;
       obj.setCoords()
     }
-    this.setState({
-      parentWidth: offsetWidth
-    });
     canvas.renderAll();
     canvas.calcOffset();
   };
@@ -580,29 +576,15 @@ class SketchField extends PureComponent {
    */
   setBackgroundFromDataUrl = (dataUrl, options = {}) => {
     let canvas = this._fc;
-    if (options.stretched) {
-      delete options.stretched;
-      Object.assign(options, {
-        width: canvas.width,
-        height: canvas.height
-      })
-    }
-    if (options.stretchedX) {
-      delete options.stretchedX;
-      Object.assign(options, {
-        width: canvas.width
-      })
-    }
-    if (options.stretchedY) {
-      delete options.stretchedY;
-      Object.assign(options, {
-        height: canvas.height
-      })
-    }
     let img = new Image();
     img.setAttribute('crossOrigin', 'anonymous');
-    img.onload = () => canvas.setBackgroundImage(new fabric.Image(img),
-      () => canvas.renderAll(), options);
+    const { stretched, stretchedX, stretchedY, ...fabricOptions } = options
+    img.onload = () => {
+      const imgObj = new fabric.Image(img);
+      if (stretched || stretchedX) imgObj.scaleToWidth(canvas.width)
+      if (stretched || stretchedY) imgObj.scaleToHeight(canvas.height)
+      canvas.setBackgroundImage(imgObj, () => canvas.renderAll(), fabricOptions)
+    };
     img.src = dataUrl
   };
 
@@ -687,8 +669,7 @@ class SketchField extends PureComponent {
   componentWillUnmount = () => window.removeEventListener('resize', this._resize);
 
   componentDidUpdate = (prevProps, prevState) => {
-    if (this.state.parentWidth !== prevState.parentWidth
-      || this.props.width !== prevProps.width
+    if (this.props.width !== prevProps.width
       || this.props.height !== prevProps.height) {
 
       this._resize()