2

My code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Literally Canvas</title>
    <link href="css/literallycanvas.css" rel="stylesheet">
    <script src="jquery-2.1.4.min.js"></script>
    <script src="react-with-addons.min.js"></script>
    <script src="underscore-min.js"></script>
    <script src="js/literallycanvas-core.min.js"></script>
    <script src="js/literallycanvas.js"></script>

</head>
<body>
    <div class="literally"></div>
    <form class="controls export">
        <input type="submit" data-action="export-as-png" value="Export as PNG">
    </form>
    <script>
        $(document).ready(function(){  
              //initial without jQuery
              var lc = LC.init(
                      document.getElementsByClassName('literally')[0],{
                          imageURLPrefix:'img',
                          primaryColor:'#fff',
                          backgroundColor:'#ddd',
                          toolbarPosition:'top',
                          tools:
                                  [
                                      LC.tools.Pencil,
                                      LC.tools.Eraser,
                                      LC.tools.Line,
                                      LC.tools.Rectangle,
                                      LC.tools.Text,
                                      LC.tools.Polygon
                                  ]
                      });
            //export as png
              $('.controls.export [data-action=export-as-png]').click(function(e) {
                  e.preventDefault();
                  window.open(lc.getImage().toDataURL());
              });             
          });
    </script>
</body>
</html>

I have download literallycanvas-0.4.11 and added the files under css/ and img/ to my project, as well as the appropriate file from js/. I can see the initial is worked because I can see the primaryColor was changed but I can't find my tools. I followed the literally canvas however it still something wrong. Anybody can help me??

roottraveller
  • 7,942
  • 7
  • 60
  • 65
Ailey.Peng
  • 21
  • 3
  • Hi, Literally Canvas maintainer here. You should include either literallycanvas.js *or* literallycanvas-core.js, not both. Try removing the "core" version and try again. – Steve Landey Jan 19 '16 at 18:02
  • In case if only literallycanvas-core.js is included then the toolbar is not available. – johannesMatevosyan Sep 20 '17 at 07:20

1 Answers1

0

I changed imageURLPrefix option and it worked for me. Just write path to your img folder there.

var lc = LC.init(
    document.getElementsByClassName('my-drawing')[0],
    {
       imageURLPrefix: 'path/to/your/img',
       .....     
       ..... 
    });
johannesMatevosyan
  • 1,974
  • 2
  • 30
  • 40