Trying to copy multiple images (from img tag items) to MS-Word...
(I've modified the posting to use a work 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 using 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>
(Sorry, not in JSFIddle.)
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!