feat(ScreenshotDialog): Download screenshot directly

Kitware · Jun 22, 2018 · f8a2e2f · f8a2e2f
1 parent e2a9560
commit f8a2e2f
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/src/components/core/Screenshots/ScreenshotDialog/script.js b/src/components/core/Screenshots/ScreenshotDialog/script.js
@@ -34,7 +34,8 @@ function generateImage() {
 
     ctx.drawImage(img, 0, 0);
 
-    this.previewImageURL = this.canvas.toDataURL();
+    const imageType = `image/${this.fileType.substr(1)}`;
+    this.imageUrl = this.canvas.toDataURL();
   });
 
   img.src = this.screenshot.imgSrc;
@@ -61,9 +62,8 @@ function backgroundToFillStyle(bg) {
 // ----------------------------------------------------------------------------
 
 function save() {
-  const imageType = `image/${this.fileType.substr(1)}`;
   this.$emit('save', this.screenshot.viewName, {
-    image: this.canvas.toDataURL(imageType),
+    image: this.imageUrl,
     filename: this.filename + this.fileType,
   });
 }
@@ -77,7 +77,7 @@ export default {
       screenshot: null,
       filename: '',
       visible: false,
-      previewImageURL: '',
+      imageUrl: '',
       transparentBackground: false,
       fileType: '',
       fileTypes: FILE_TYPES,

diff --git a/src/components/core/Screenshots/ScreenshotDialog/template.html b/src/components/core/Screenshots/ScreenshotDialog/template.html
@@ -12,7 +12,7 @@
           <v-card flat tile>
             <v-card-media
               :class="$style.imagePreview"
-              :src="previewImageURL"
+              :src="imageUrl"
               contain
               height="250px"
             />
@@ -59,11 +59,19 @@
         <span>Cancel</span>
       </v-btn>
       <v-btn
-        color="primary"
+        color="secondary"
         @click.native="visible = false; save()"
       >
         <span>Save</span>
       </v-btn>
+      <v-btn
+        color="primary"
+        :href="imageUrl"
+        :download="filename + fileType"
+        @click.native="visible = false"
+      >
+        <span>Download</span>
+      </v-btn>
     </v-card-actions>
   </v-card>
 </v-dialog>