Custom download function

README.md

@@ -97,6 +97,7 @@ Image Tool supports these configuration parameters:
 | captionPlaceholder | `string` | (default: `Caption`) Placeholder for Caption input |
 | buttonContent | `string` | Allows to override HTML content of «Select file» button |
 | uploader | `{{uploadByFile: function, uploadByUrl: function}}` | Optional custom uploading methods. See details below. |
+| downloader | `{{download: function}}` | Optional custom for downloading image. See details below. |
 | actions | `array` | Array with custom actions to show in the tool's settings menu. See details below. |
 
 Note that if you don't implement your custom uploader methods, the `endpoints` param is required.
@@ -296,3 +297,45 @@ var editor = EditorJS({
   ...
 });
 ```
+
+## Providing custom download method
+
+As mentioned at the Config Params section, you have an ability to provide own custom downloading methods.
+It is a quite simple: implement `download` method and pass them via `downloader` config param.
+
+
+| Method         | Arguments | Return value    | Description |
+| -------------- | --------- | -------------   | ------------|
+| download   | `url`, `File` | `url | blobUrl` | Custom download function to get image data |
+
+Example:
+
+```js
+import ImageTool from '@editorjs/image';
+
+var editor = EditorJS({
+  ...
+
+  tools: {
+    ...
+    image: {
+      class: ImageTool,
+      config: {
+        /**
+         * Custom downloader
+         */
+            downloader: {
+              async download(url: string, file: any) {
+                const data = await getImageData(); 
+                const blob = new Blob([data]);
+                const blobUrl = URL.createObjectURL(blob);
+                return blobUrl;
+              },
+            },
+      }
+    }
+  }
+
+  ...
+});
+```

src/index.js

@@ -61,6 +61,7 @@ import { IconAddBorder, IconStretch, IconAddBackground, IconPicture } from '@cod
  * @property {object} additionalRequestHeaders - allows to pass custom headers with Request
  * @property {string} buttonContent - overrides for Select File button
  * @property {object} [uploader] - optional custom uploader
+ * @property {object} [downloader] - optional custom downloader
  * @property {function(File): Promise.<UploadResponseFormat>} [uploader.uploadByFile] - method that upload image by File
  * @property {function(string): Promise.<UploadResponseFormat>} [uploader.uploadByUrl] - method that upload image by URL
  */
@@ -149,6 +150,7 @@ export default class ImageTool {
       captionPlaceholder: this.api.i18n.t(config.captionPlaceholder || 'Caption'),
       buttonContent: config.buttonContent || '',
       uploader: config.uploader || undefined,
+      downloader: config.downloader || undefined,
       actions: config.actions || [],
     };
 
@@ -381,7 +383,7 @@ export default class ImageTool {
     this._data.file = file || {};
 
     if (file && file.url) {
-      this.ui.fillImage(file.url);
+      this.ui.fillImage(file.url, file);
     }
   }
 

src/ui.js

@@ -148,14 +148,23 @@ export default class Ui {
    * @param {string} url - image source
    * @returns {void}
    */
-  fillImage(url) {
+  async fillImage(url, file) {
+    let resultUrl;
+
+    // Check if downloader function exists in the config
+    if (this.config.downloader) {
+      resultUrl = await this.config.downloader.download(url, file);
+    } else {
+      resultUrl = url;
+    }
+
     /**
      * Check for a source extension to compose element correctly: video tag for mp4, img — for others
      */
-    const tag = /\.mp4$/.test(url) ? 'VIDEO' : 'IMG';
+    const tag = /\.mp4$/.test(resultUrl) ? 'VIDEO' : 'IMG';
 
     const attributes = {
-      src: url,
+      src: resultUrl,
     };
 
     /**