From 6188041bbf9cf7461565355cc8ac303c8041b8fe Mon Sep 17 00:00:00 2001
From: Karl von Randow <karl@xk72.com>
Date: Sun, 3 Feb 2019 11:48:52 +1300
Subject: [PATCH 1/2] Add setBackgroundFromUrl method
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This allows loading of crossOrigin images by adding crossOrigin: ‘anonymous’ to the options object.
---
 src/SketchField.jsx | 30 ++++++++++++++++++++++++++++++
 types/index.d.ts    | 22 ++++++++++++++++------
 2 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/src/SketchField.jsx b/src/SketchField.jsx
index 89741efd..d314ff42 100644
--- a/src/SketchField.jsx
+++ b/src/SketchField.jsx
@@ -546,6 +546,36 @@ class SketchField extends PureComponent {
     img.src = dataUrl
   };
 
+  /**
+   * Sets the background from the url given
+   *
+   * @param url the url of the image to be used as a background
+   * @param options
+   */
+  setBackgroundFromUrl = (url, 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
+      })
+    }
+    canvas.setBackgroundImage(url, () => canvas.renderAll(), options);
+  };
+
   addText = (text, options = {}) => {
     let canvas = this._fc;
     let iText = new fabric.IText(text, options);
diff --git a/types/index.d.ts b/types/index.d.ts
index da0a503c..4edd3fbd 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -1,6 +1,13 @@
 declare module 'react-sketch' {
 	import * as React from 'react'
 
+	export interface BackgroundImageOptions {
+		stretched?: boolean
+		stretchedX?: boolean
+		stretchedY?: boolean
+		[name: string]: any
+	}
+
 	export class SketchField extends React.PureComponent<{
 		// the color of the line
 		lineColor?: string
@@ -169,12 +176,15 @@ declare module 'react-sketch' {
 		 * @param dataUrl the dataUrl to be used as a background
 		 * @param options
 		 */
-		setBackgroundFromDataUrl(dataUrl: string, options?: {
-			stretched?: boolean
-			stretchedX?: boolean
-			stretchedY?: boolean
-			[name: string]: any
-		}): void
+		setBackgroundFromDataUrl(dataUrl: string, options?: BackgroundImageOptions): void
+
+		/**
+		 * Sets the background from the url given
+		 *
+		 * @param url the url of the image to be used as a background
+		 * @param options
+		 */
+		setBackgroundFromUrl(url: string, options?: BackgroundImageOptions): void
 		
 		addText(text: string, options?: {}): void
 		

From 10c5b11259ecae8e4a4f20f2d7efa909c0df360b Mon Sep 17 00:00:00 2001
From: Karl von Randow <karl@xk72.com>
Date: Tue, 5 Feb 2019 10:13:37 +1300
Subject: [PATCH 2/2] Add setBackgroundFromImage

---
 src/SketchField.jsx | 17 +++++++++++++----
 types/index.d.ts    |  8 ++++++++
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/SketchField.jsx b/src/SketchField.jsx
index d314ff42..7bd8fc10 100644
--- a/src/SketchField.jsx
+++ b/src/SketchField.jsx
@@ -520,6 +520,18 @@ class SketchField extends PureComponent {
    * @param options
    */
   setBackgroundFromDataUrl = (dataUrl, options = {}) => {
+    let img = new Image();
+    img.onload = () => this.setBackgroundFromImage(img);
+    img.src = dataUrl
+  };
+
+  /**
+   * Sets the background from an Image object
+   *
+   * @param image the Image object to be used as a background
+   * @param options
+   */
+  setBackgroundFromImage = (image, options = {}) => {
     let canvas = this._fc;
     if (options.stretched) {
       delete options.stretched;
@@ -540,10 +552,7 @@ class SketchField extends PureComponent {
         height: canvas.height
       })
     }
-    let img = new Image();
-    img.onload = () => canvas.setBackgroundImage(new fabric.Image(img),
-      () => canvas.renderAll(), options);
-    img.src = dataUrl
+    canvas.setBackgroundImage(new fabric.Image(image), () => canvas.renderAll(), options);
   };
 
   /**
diff --git a/types/index.d.ts b/types/index.d.ts
index 4edd3fbd..d8cb0176 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -178,6 +178,14 @@ declare module 'react-sketch' {
 		 */
 		setBackgroundFromDataUrl(dataUrl: string, options?: BackgroundImageOptions): void
 
+		/**
+		 * Sets the background from an Image object
+		 *
+		 * @param image the Image object to be used as a background
+		 * @param options
+		 */
+		setBackgroundFromImage(image: HTMLImageElement, options?: BackgroundImageOptions): void
+		
 		/**
 		 * Sets the background from the url given
 		 *