export as png not working

28 views
Skip to first unread message

Ashir Muneer

unread,
Aug 29, 2021, 7:54:38 AM8/29/21
to Literally Canvas
i just copied the example code from expmple but its not working 
it displaying me this error


index.html:80 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

my code is below

<!doctype html>
<html>
  <head>
    <title>Image Drawing</title>    
    <link href="_assets/literallycanvas.css" rel="stylesheet">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no" />

    <style type="text/css">
      .fs-container {
        width: 100%;
        height: 100%;
        margin: auto;
      }

      .literally {
        width: 100%;
        height: 100%;
        position: relative;
      }
    </style>
  </head>

  <body>
   
    <div class="literally  backgrounds "></div>

    <!-- <div class="literally export"></div> -->

<form class="controls export">
  <input type="submit" data-action="export-as-png" value="Export as PNG">
</form>

    <!-- <div class="fs-container">
        <div id="lc"></div>
      </div> -->

    <!-- you really ought to include react-dom, but for react 0.14 you don't strictly have to. -->
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="_js_libs/react-0.14.3.js"></script>
    <script src="_js_libs/literallycanvas.js"></script>

 

<script>
  $(document).ready(function() {
    var backgroundImage = new Image()
    backgroundImage.src = 'image/background_image.jpg';

    var lc = LC.init(
        document.getElementsByClassName('literally backgrounds')[0],
        {
          backgroundShapes: [
            LC.createShape(
              'Image', {x: 20, y: 20, image: backgroundImage, scale: 2}),
            LC.createShape(
              'Text', {
                x: 200, y: 200, text: "",
                font: "bold 12px Helvetica"
              })
          ]
        });
    // the background image is not included in the shape list that is
    // saved/loaded here
    var localStorageKey = 'drawing-with-background'
    if (localStorage.getItem(localStorageKey)) {
      lc.loadSnapshotJSON(localStorage.getItem(localStorageKey));
    }
    lc.on('drawingChange', function() {
      localStorage.setItem(localStorageKey, lc.getSnapshotJSON());
    });

    
//  export image code
    // var lc = LC.init(document.getElementsByClassName('literally backgrounds')[0]);
    $('.controls.export [data-action=export-as-png]').click(function(e) {
      e.preventDefault();
      
      downloadedImg = new Image;
      downloadedImg.crossOrigin = "Anonymous";
      // downloadedImg.addEventListener("load", imageReceived, false);
      downloadedImg.src = lc.getImage().toDataURL()
      window.open(lc.getImage().toDataURL());
    });

  });
</script>


  </body>
</html>

Reply all
Reply to author
Forward
0 new messages