Merge branch 'feature/exportToFile' of https://github.com/ern-arrowsmith/react-canvas-draw into develop

Author: embiem

.all-contributorsrc

@@ -29,6 +29,15 @@
       "contributions": [
         "ideas"
       ]
+    },
+    {
+      "login": "ern-arrowsmith",
+      "name": "Ernie Arrowsmith",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/3596444?s=400&u=c4cc9bf80c5572d07c8f877635b785b3ab99eee7&v=4",
+      "profile": "https://www.linkedin.com/in/ernarrowsmith/",
+      "contributions": [
+        "ideas"
+      ]
     }
   ]
 }

README.md

@@ -76,8 +76,9 @@ Useful functions that you can call, e.g. when having a reference to this compone
 
 - `getSaveData()` returns the drawing's save-data as a stringified object
 - `loadSaveData(saveData: String, immediate: Boolean)` loads a previously saved drawing using the saveData string, as well as an optional boolean flag to load it immediately, instead of live-drawing it.
+- `getDataURL(fileType, useBgImage, backgroundColour)` will export the canvas to a data URL, which can subsequently be used to share or manipulate the image file.
 - `clear()` clears the canvas completely, including previously erased lines, and resets the view. After a clear, `undo()` will have no effect.
-- `eraseAll()` clears the drawn lines but retains their data; calling `undo()` can restore the erased lines. *Note: erased lines are not included in the save data.*
+- `eraseAll()` clears the drawn lines but retains their data; calling `undo()` can restore the erased lines. _Note: erased lines are not included in the save data._
 - `resetView()` resets the canvas' view to defaults. Has no effect if the `enablePanAndZoom` property is `false`.
 - `undo()` removes the latest change to the drawing. This includes everything drawn since the last MouseDown event.
 

src/index.js

@@ -160,9 +160,67 @@ export default class CanvasDraw extends PureComponent {
     });
   };
 
-  getDataURL = () => {
-    //generates the image data url (JPG format) from the HTML5 canvas element
-    return this.canvas.drawing.toDataURL();
+  /**
+   * Combination of work by Ernie Arrowsmith and emizz
+   * References:
+   * https://stackoverflow.com/questions/32160098/change-html-canvas-black-background-to-white-background-when-creating-jpg-image
+   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
+
+   * This function will export the canvas to a data URL, which can subsequently be used to share or manipulate the image file.
+   * @param {string} fileType Specifies the file format to export to. Note: should only be the file type, not the "image/" prefix.
+   *  For supported types see https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
+   * @param {bool} useBgImage Specifies whether the canvas' current background image should also be exported. Default is false.
+   * @param {string} backgroundColour The desired background colour hex code, e.g. "#ffffff" for white.
+   */
+  getDataURL = (fileType, useBgImage, backgroundColour) => {
+    // Get a reference to the "drawing" layer of the canvas
+    let canvasToExport = this.canvas.drawing;
+
+    let context = canvasToExport.getContext("2d");
+
+    //cache height and width
+    let width = canvasToExport.width;
+    let height = canvasToExport.height;
+
+    //get the current ImageData for the canvas
+    let storedImageData = context.getImageData(0, 0, width, height);
+
+    //store the current globalCompositeOperation
+    var compositeOperation = context.globalCompositeOperation;
+
+    //set to draw behind current content
+    context.globalCompositeOperation = "destination-over";
+
+    // If "useBgImage" has been set to true, this takes precedence over the background colour parameter
+    if (useBgImage) {
+      if (!this.props.imgSrc) return "Background image source not set";
+
+      // Write the background image
+      this.drawImage();
+    } else if (backgroundColour != null) {
+      //set background color
+      context.fillStyle = backgroundColour;
+
+      //fill entire canvas with background colour
+      context.fillRect(0, 0, width, height);
+    }
+
+    // If the file type has not been specified, default to PNG
+    if (!fileType) fileType = "png";
+
+    // Export the canvas to data URL
+    let imageData = canvasToExport.toDataURL(`image/${fileType}`);
+
+    //clear the canvas
+    context.clearRect(0, 0, width, height);
+
+    //restore it with original / cached ImageData
+    context.putImageData(storedImageData, 0, 0);
+
+    //reset the globalCompositeOperation to what it was
+    context.globalCompositeOperation = compositeOperation;
+
+    return imageData;
   };
 
   loadSaveData = (saveData, immediate = this.props.immediateLoading) => {