added image sharing support

README.md

@@ -74,6 +74,17 @@ You can check here in use: https://www.miragenews.com/ghost-flight-pilots-fall-a
 </button>
 ```
 
+## Sharing Images
+
+You can share an image a few ways:
+
+- Share an image at a URL, using `data-share-image-url` to specify the URL
+- Share a DOM element, either a `canvas` or an `img`, using `data-share-image-id` to specify the DOM element ID
+
+The image name will either be the filename of the image from the URL, or the DOM element id. To override this, use `data-share-image-name`.
+
+When sharing a remote image, all browser restrictions apply for fetching (e.g. CORS).
+
 ## Options
 
 ### data-share-title
@@ -91,6 +102,19 @@ The URL to be shared.
 
 ``data-share-url="https://nasa.gov"``
 
+### data-share-image-url
+The URL of the image to be shared. 
+
+``data-share-image-url="https://www.nasa.gov/sites/all/themes/custom/nasatwo/images/nasa-logo.svg"``
+
+### data-share-image-id
+The DOM element ID of the image to be shared. Both `canvas` (the canvas itself, as a PNG) and `img` (the image reference in the `src`) are supported.
+
+``data-share-image-id="myCanvas"``
+
+### data-share-image-name
+The name to use for the shared image. If sharing a `canvas` the extension `.png` will be appended if it doesn't exist.
+
 ## Screenshots
 
 ### 1. buttons

demo.html

@@ -24,6 +24,15 @@ <h2>Title, text and URL defined</h2>
         <p>This share button will share a defined title, text and url set by data attributes.</p>
         <button class="better-share" data-share-title="Lorem ipsum Github Profile" data-share-text="Lorem ipsum dolor sit amet, consectetur adipiscing elit" data-share-url="https://nasa.gov"><span>Share </span><i class="fa fa-share-alt" aria-hidden="true"></i></button>
 
+        <h2>Title, URL, and image URL defined</h2>
+        <p>This share button will share a defined title and url set by data attributes and include an image from the given image URL.</p>
+        <button class="better-share" data-share-title="Lorem ipsum" data-share-image-url="img/nasa-logo.svg">Share</button>
+
+        <h2>Title, URL, and image ID (to an IMG tag) defined</h2>
+        <p>This share button will share a defined title and url set by data attributes and include an image from the referenced DOM element.</p>
+        <button class="better-share" data-share-title="Lorem ipsum" data-share-image-id="testImage" data-share-image-name="shared NASA image">Share</button>
+
+        <img id="testImage" src="img/nasa-logo.svg" />
     </div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <script src="js/better-share.js"></script>