Copy Canvas-generated Img (Images) to MS-Word

Question

Trying to copy multiple images (from img tag items) to MS-Word...

(I've modified the posting to use a working canvas and render only the img items.)

Similar questions have been asked before (for example, Copy/paste html inline image from browser to word processors). The ones about copying a canvas all seem to resolve to (currently) "it can't be done." The ones about copying from img items seem to resolve to use a context menu (Save Image As...). However, I've found an instance where it is possible, and I'd like to know what's going on.

(Once again, note, I'm talking about copying and pasting only img items, not canvases.)

If I render a WWWeb page (in the example, Firefox to https://www.amazon.com/gcx/Electronics-Gift-Guide/gfhz/events/ref=12DOD19_GW_Desk_DashQuad_Giftingv1_EN_EGG?categoryId=egg19-hol-main&pf_rd_p=510b75ea-83a1-4950-8c98-6febeef7ac00&pf_rd_r=SBWFNQ6X1WTRGEBCJ03G):

and select and copy multiple images:

I can then paste into MS-Word (pretty old MS-Word 2010):

It's not pretty but it does work (here, I used MS-Word's merged formatting).

If I render the following code:

<head>
    <title>Try Canvas-generated Img</title>
    <script>
        function PageOnLoad() { //handle load event on page
            // Create a work canvas, draw a simple image in it, and then copy that image to the img items.
            var /*canvas (result)*/ cvs = document.createElement('canvas');
            cvs.height = document.getElementById('testIMG1').clientHeight;
            cvs.width = document.getElementById('testIMG1').clientWidth;
            var /*context*/ ctx = cvs.getContext('2d');
            ctx.fillStyle = 'silver';
            ctx.fillRect(0, 0, cvs.width, cvs.height);
            ctx.fillStyle = 'black';
            ctx.moveTo(0, 0);
            ctx.lineTo(cvs.width, cvs.height);
            ctx.stroke();

            // Copy canvas image to both img items.
            document.getElementById('testIMG1').src = cvs.toDataURL('image/jpg'); //Amazon page's images are JPEGs
            document.getElementById('testIMG2').src = cvs.toDataURL('image/jpg');
        }
    </script>
</head>
<body onload="PageOnLoad();">
    <table width="50%">
        <tr>
            <td align="right">Img 1:</td>
            <td><img id="testIMG1" style="border:solid;height:30px;width:100px;" /></td>
        </tr>
        <tr>
            <td align="right">Img 2:</td>
            <td><img id="testIMG2" style="border:solid;height:30px;width:100px;" /></td>
        </tr>
    </table>
</body>
</html>

JSFiddle: https://jsfiddle.net/kL58ox0m/6/

and select (in this case, Ctrl-A for all-select) and copy:

I get bupkus/zilch/nada/zippo when pasting into MS-Word:

Why the failure (or conversely why does it work on the Amazon page - yes, I did email them ... no answer yet)? Thanks!

Update: I tried the approach noted by alexyorke, but no joy. Here's the modified code:

  <title>Try Canvas-generated Img</title>
  <script>
    function CopyOnClick() {
      var /*source*/ src = document.getElementById('sourceDIV');
      if (document.body.createTextRange) {
        var /*range*/ rng = document.body.createTextRange();
        rng.moveToElementText(src);
        rng.select();
      } else if (window.getSelection) {
        var /*range*/ rng = document.createRange();
        rng.selectNodeContents(src);
        var /*selection*/ slc = window.getSelection();
        slc.removeAllRanges();
        slc.addRange(rng);
      }
      document.execCommand('Copy');
      document.body.removeChild(itm);
    }

    function PageOnLoad() { //handle load event on page
      // Create a work canvas, draw a simple image in it, and then copy that image to the img items.
      var /*canvas (result)*/ cvs = document.createElement('canvas');
      cvs.height = document.getElementById('testIMG1').clientHeight;
      cvs.width = document.getElementById('testIMG1').clientWidth;
      var /*context*/ ctx = cvs.getContext('2d');
      ctx.fillStyle = 'silver';
      ctx.fillRect(0, 0, cvs.width, cvs.height);
      ctx.fillStyle = 'black';
      ctx.moveTo(0, 0);
      ctx.lineTo(cvs.width, cvs.height);
      ctx.stroke();

      // Copy canvas image to both img items.
      document.getElementById('testIMG1').src = cvs.toDataURL('image/jpg'); //Amazon page's images are JPEGs
      document.getElementById('testIMG2').src = cvs.toDataURL('image/jpg');
    }

  </script>
</head>

<body onload="PageOnLoad();">
  <div id="sourceDIV" contenteditable>
    <table width="50%">
      <tr>
        <td align="right">Img 1:</td>
        <td><img id="testIMG1" style="border:solid;height:30px;width:100px;" /></td>
      </tr>
      <tr>
        <td align="right">Img 2:</td>
        <td><img id="testIMG2" style="border:solid;height:30px;width:100px;" /></td>
      </tr>
    </table>
    <input onclick="CopyOnClick();" style="border:solid;" type="button" value="Copy All" />
  </div>
</body>

The JSFiddle is at https://jsfiddle.net/7jks53ht/23/.

Thanks, Rainb for the link (sure beats trying to write something myself). Here's what my JSFiddle code produced:

<!--StartFragment-->
    <table width="50%">
      <tbody><tr>
        <td align="right">Img 1:</td>
        <td><img id="testIMG1" style="border:solid;height:30px;width:100px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAeCAYAAADaW7vzAAABFklEQVRoge2Xy6kEIRQFe2sMGoMxmIMxGIM5GIMxaAqd2XmrgYv0Y5hPj7fbsygQVwcKCu4WQoAxBt57pJRQa8W+72QS2+NRSkGMEc45OOcQY0QpZfrA1diOPmutSCnBew9jDEIIyDmjtTZ98N05FCLpvSPnDKZNiZCRR9qstUybBiESpk2ZEAnTpkzICNOmTIiEaVMmRMK0KRMywoNUmRAJ06ZMiGTVtKkVMrJK2i4jRPJf2nrv07ctKURyt7RdXsjI1dN2OyGSK6bt1kIkrbVLpG0ZISNa07asEImmtFHIwOy0UcgTZNqstaenjUJe4Bdpo5A3OSttFPIlvpU2CjmBT9JGISfzatoo5Mc8O0gpZCJHafsD9O0j0HvOOn4AAAAASUVORK5CYII="></td>
      </tr>
      <tr>
        <td align="right">Img 2:</td>
        <td><img id="testIMG2" style="border:solid;height:30px;width:100px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAeCAYAAADaW7vzAAABFklEQVRoge2Xy6kEIRQFe2sMGoMxmIMxGIM5GIMxaAqd2XmrgYv0Y5hPj7fbsygQVwcKCu4WQoAxBt57pJRQa8W+72QS2+NRSkGMEc45OOcQY0QpZfrA1diOPmutSCnBew9jDEIIyDmjtTZ98N05FCLpvSPnDKZNiZCRR9qstUybBiESpk2ZEAnTpkzICNOmTIiEaVMmRMK0KRMywoNUmRAJ06ZMiGTVtKkVMrJK2i4jRPJf2nrv07ctKURyt7RdXsjI1dN2OyGSK6bt1kIkrbVLpG0ZISNa07asEImmtFHIwOy0UcgTZNqstaenjUJe4Bdpo5A3OSttFPIlvpU2CjmBT9JGISfzatoo5Mc8O0gpZCJHafsD9O0j0HvOOn4AAAAASUVORK5CYII="></td>
      </tr>
    </tbody></table>

  <!--EndFragment-->
</body>
</html>

I see the images, there, but, as I said, I got no joy on copying into MS-Word.

Update 2: One last attempt ... I removed the table structure because I saw that the copied fragment contained references.

Now, the code is:

  <title>Try Canvas-generated Img</title>
  <script>
    function CopyOnClick() {
      var /*source*/ src = document.getElementById('sourceDIV');
      if (document.body.createTextRange) {
        var /*range*/ rng = document.body.createTextRange();
        rng.moveToElementText(src);
        rng.select();
      } else if (window.getSelection) {
        var /*range*/ rng = document.createRange();
        rng.selectNodeContents(src);
        var /*selection*/ slc = window.getSelection();
        slc.removeAllRanges();
        slc.addRange(rng);
      }
      document.execCommand('Copy');
      document.body.removeChild(itm);
    }

    function PageOnLoad() { //handle load event on page
      // Create a work canvas, draw a simple image in it, and then copy that image to the img items.
      var /*canvas (result)*/ cvs = document.createElement('canvas');
      cvs.height = document.getElementById('testIMG1').clientHeight;
      cvs.width = document.getElementById('testIMG1').clientWidth;
      var /*context*/ ctx = cvs.getContext('2d');
      ctx.fillStyle = 'silver';
      ctx.fillRect(0, 0, cvs.width, cvs.height);
      ctx.fillStyle = 'black';
      ctx.moveTo(0, 0);
      ctx.lineTo(cvs.width, cvs.height);
      ctx.stroke();

      // Copy canvas image to both img items.
      document.getElementById('testIMG1').src = cvs.toDataURL('image/jpg'); //Amazon page's images are JPEGs
      document.getElementById('testIMG2').src = cvs.toDataURL('image/jpg');
    }

  </script>
</head>

<body onload="PageOnLoad();">
  <div id="sourceDIV" contenteditable>
    Img 1:<img id="testIMG1" style="border:solid;height:30px;width:100px;" />
    <br />Img 2:<img id="testIMG2" style="border:solid;height:30px;width:100px;" />
    <br /><input onclick="CopyOnClick();" style="border:solid;" type="button" value="Copy All" />
  </div>
</body>

(JSFiddle at [https://jsfiddle.net/7jks53ht/31/)

and it produces:

<html><body>
<!--StartFragment-->
    Img 1:<img id="testIMG1" style="border:solid;height:30px;width:100px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAeCAYAAADaW7vzAAABFklEQVRoge2Xy6kEIRQFe2sMGoMxmIMxGIM5GIMxaAqd2XmrgYv0Y5hPj7fbsygQVwcKCu4WQoAxBt57pJRQa8W+72QS2+NRSkGMEc45OOcQY0QpZfrA1diOPmutSCnBew9jDEIIyDmjtTZ98N05FCLpvSPnDKZNiZCRR9qstUybBiESpk2ZEAnTpkzICNOmTIiEaVMmRMK0KRMywoNUmRAJ06ZMiGTVtKkVMrJK2i4jRPJf2nrv07ctKURyt7RdXsjI1dN2OyGSK6bt1kIkrbVLpG0ZISNa07asEImmtFHIwOy0UcgTZNqstaenjUJe4Bdpo5A3OSttFPIlvpU2CjmBT9JGISfzatoo5Mc8O0gpZCJHafsD9O0j0HvOOn4AAAAASUVORK5CYII=">
    <br>Img 2:<img id="testIMG2" style="border:solid;height:30px;width:100px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAeCAYAAADaW7vzAAABFklEQVRoge2Xy6kEIRQFe2sMGoMxmIMxGIM5GIMxaAqd2XmrgYv0Y5hPj7fbsygQVwcKCu4WQoAxBt57pJRQa8W+72QS2+NRSkGMEc45OOcQY0QpZfrA1diOPmutSCnBew9jDEIIyDmjtTZ98N05FCLpvSPnDKZNiZCRR9qstUybBiESpk2ZEAnTpkzICNOmTIiEaVMmRMK0KRMywoNUmRAJ06ZMiGTVtKkVMrJK2i4jRPJf2nrv07ctKURyt7RdXsjI1dN2OyGSK6bt1kIkrbVLpG0ZISNa07asEImmtFHIwOy0UcgTZNqstaenjUJe4Bdpo5A3OSttFPIlvpU2CjmBT9JGISfzatoo5Mc8O0gpZCJHafsD9O0j0HvOOn4AAAAASUVORK5CYII=">
    <br>
  <!--EndFragment-->
</body>
</html>

...still, no joy (sigh).

Does this answer your question? [Is it possible to copy a canvas image to the clipboard?](https://stackoverflow.com/questions/27863617/is-it-possible-to-copy-a-canvas-image-to-the-clipboard) — alexyorke, Dec 07 '19 at 20:47
you can paste on the textarea here, to see what are you exactly copying https://kreijstal.github.io/Random-HTML-stuff/pasteEvent.html — Rainb, Dec 07 '19 at 21:14

score 0 · Answer 1 · answered Dec 07 '19 at 21:13

If you want to get them copied into word, you'll need to do the translation of canvas to images yourself. Screenshot comes to mind. There may be other methods. Explore using SVGs - I don't have a source but believe they are better supported outside of browsers.

TL;DR;

Copy / paste is a 3 part process.

Source application tells the OS it has data on the clipboard, and what formats it supports.
The OS keeps track of which application you copied data from.
When you paste into the destination application, the destination application tells the OS what formats it supports.
The OS requests that the source application formats the data for the destination application and moves the bytes between the processes.

-- See here (How is copy paste possible?)

So where's it going wrong for you?

In the first example the browser (source application) is able to translate text and images to a format understood by Word (destination application).

In the second example, the browser is not able to translate the canvas to images, or a format Word accepts. It's not surprising because it's not the best use of a browser software engineer to make that work right.

Plain text / unicode is the fall back for data, since pretty much everything can handle unicode, and it's good enough in most cases.

score -1 · Answer 2 · answered Mar 19 '20 at 11:17

I think Microsoft Word won't copy any image from a web browser unless the image is stored locally.

If you load a page from anywhere on the internet with images and try to copy it into word, it won't do it.

But if you save a complete copy of the web page so that it stores the images locally, open the saved web page in your browser, and copy again, it'll work.

This even applies to images that are stored in memory (eg in blob form), too. It won't copy those, either.

Copy Canvas-generated Img (Images) to MS-Word

2 Answers2