1

I have a button in my ASP.NET webpage and want to copy an image which is generated dynamically as SVG content. I have div called picutreBox and inside that an SVG element called svgBox as

<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10" id="Picturebox" style="transform-origin: 50% 50%; cursor: move; transform: none; backface-visibility: hidden;">
  <svg xmlns="http://www.w3.org/2000/svg" id="svgbox" viewBox="0 0 1087 581" preserveAspectRatio="xMinYMin meet" width="1087" height="581">
    <g id="cGrp”/>
  </svg>
</div>

Now I have used below Java script to copy the SVG image.

  function onCopy() {
    var data = document.getElementById('Picturebox').innerHTML;
    var DOMURL = window.URL || window.webkitURL || window;
    var svgBlob = new Blob([data], { type: 'image/svg+xml;charset=utf-8' });
    var url = DOMURL.createObjectURL(svgBlob);
    var image = document.createElement('img');
    image.src = url;
    document.body.appendChild(image);
    var r = document.createRange();
    r.setStartBefore(image);
    r.setEndAfter(image);
    r.selectNode(image);
    var sel = window.getSelection();
    sel.addRange(r);
    image.focus();
    var s = document.execCommand("copy");
    document.body.removeChild(image);
}

But though the executeCommand returns a TRUE, the image is not available in clipboard. Please suggest your ideas

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181

0 Answers0