Add Copy Image to context menu

I mainly just implemented what I suggested in issue #1174

Fix #1174

Auditors: @diracdeltas

app/extensions/brave/locales/en-US/menu.properties

@@ -107,6 +107,7 @@ saveLinkAs=Save Link As...
 saveImage=Save Image...
 openImageInNewTab=Open Image in New Tab
 copyImageAddress=Copy Image Address
+copyImage=Copy Image
 viewPageSource=View Page Source
 addToReadingList=Add to reading list
 quit=Quit

app/locale.js

@@ -25,6 +25,7 @@ var rendererIdentifiers = function () {
     'copyImageAddress',
     'openImageInNewTab',
     'saveImage',
+    'copyImage',
     'copyLinkAddress',
     'copyEmailAddress',
     'saveLinkAs',

js/contextMenus.js

@@ -7,6 +7,7 @@ const remote = electron.remote
 const Menu = remote.Menu
 const Immutable = require('immutable')
 const clipboard = electron.clipboard
+const nativeImage = electron.nativeImage
 const messages = require('./constants/messages')
 const windowStore = require('./stores/windowStore')
 const windowActions = require('./actions/windowActions')
@@ -28,6 +29,8 @@ const getSetting = require('./settings').getSetting
 const settings = require('./constants/settings')
 const textUtils = require('./lib/text')
 const {isIntermediateAboutPage, isUrl} = require('./lib/appUrlUtil')
+const {getBase64FromImageUrl} = require('./lib/imageUtil')
+const urlParse = require('url').parse
 
 const isDarwin = process.platform === 'darwin'
 
@@ -741,9 +744,27 @@ function mainTemplateInit (nodeProps, frame) {
         }
       }
     },
-    saveAsMenuItem('saveImage', nodeProps.srcURL),
-    copyAddressMenuItem('copyImageAddress', nodeProps.srcURL),
-    CommonMenu.separatorMenuItem)
+    saveAsMenuItem('saveImage', nodeProps.srcURL), {
+      label: locale.translation('copyImage'),
+      click: (item) => {
+        const copyFromDataURL = (dataURL) =>
+          clipboard.write({
+            image: nativeImage.createFromDataURL(dataURL),
+            html: `<img src='${nodeProps.srcURL}'>`,
+            text: nodeProps.srcURL
+          })
+        if (nodeProps.srcURL) {
+          if (urlParse(nodeProps.srcURL).protocol === 'data:') {
+            copyFromDataURL(nodeProps.srcURL)
+          } else {
+            getBase64FromImageUrl(nodeProps.srcURL).then((dataURL) =>
+              copyFromDataURL(dataURL))
+          }
+        }
+      }
+    },
+      copyAddressMenuItem('copyImageAddress', nodeProps.srcURL),
+      CommonMenu.separatorMenuItem)
   }
 
   if (isInputField) {

js/lib/imageUtil.js

@@ -0,0 +1,21 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+module.exports.getBase64FromImageUrl = (url) => {
+  return new Promise((resolve, reject) => {
+    const img = new window.Image()
+    img.onerror = function () {
+      reject()
+    }
+    img.onload = function () {
+      const canvas = document.createElement('canvas')
+      canvas.width = this.naturalWidth
+      canvas.height = this.naturalHeight
+      canvas.getContext('2d')
+        .drawImage(this, 0, 0)
+      resolve(canvas.toDataURL('image/png'))
+    }
+    img.src = url
+  })
+}