0

I have a canvas in my HTML code which displays image and a square border on the face. What I want to do is to transform what I can see on my screen (in the canvas) into an image, which would be displayed in a "img" tag like classic images in website but the error is coming as below "image.html:50 Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 

 <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://files.codepedia.info/uploads/iScripts/html2canvas.js"></script>
        <script>

    window.onload = function() {
        drawEx1();

    }

    var image1 = null;

    function drawEx1() {
        image1 = new Image();
        image1.src =
            "http://www.thehindu.com/multimedia/dynamic/02792/samuthirakani_2792985f.jpg";
          document.getElementById("canvimg").style.width=image1.width+'px';
           document.getElementById("canvimg").style.height=image1.height+'px';
        image1.addEventListener('load', drawImage1);
    }

    function drawImage1() {
            var canvas  = document.getElementById("canvas1");
            var context = canvas.getContext("2d");
            canvas.width=image1.width;
            canvas.height=image1.height;
            context.drawImage(image1,0,0);
    var j=283;
    {
            var c2 = document.getElementById("canvas1");
        var c2_context = c2.getContext("2d");



          c2_context.strokeStyle = "#f00";
          c2_context.strokeRect(j,90, 139, 139);

      c2_context.font = "bold 16px Arial";
      c2_context.fillText("happy", j,90);

       }

    var dataURL = c2.toDataURL('image/jpg');
    document.getElementById('previewImage').src = dataURL;

    }
        </script>


        <style>
            input:focus {
                outline: none;
            }


              #canvimg{
               border:2px solid grey;
              }  
        </style>
    </head>
    <body ng-app="myapp" ng-controller="myctrl">
        <div >

           <input type="button" id="btn" value="submit" />

            <div id="canvimg"><canvas id="canvas1"></canvas></div><input id="btn-Preview-Image" type="button" value="Preview"/>
            <a id="btn-Convert-Html2Image" href="#">Download</a> 
        <br/>
    <img id="previewImage" crossOrigin="Anonymous">
        </img>
        </div>
    </body>
    </html>
Arvind A
  • 77
  • 1
  • 10
  • See this [Q&A](http://stackoverflow.com/questions/36112458/scaling-image-from-inputtype-file/36116906#36116906) showing how to use `input-type-file` to load an image without tainting the canvas. The key point is that the *user initiates image loading*. By the user expressly requesting the image, cross-origin security is satisfied. BTW, you can put your `http...` into the input and it will load without error. – markE Aug 18 '16 at 20:06
  • @markE, I think the url in input workaround is windows only, at least not available in osX (don't know about linux distros) – Kaiido Aug 19 '16 at 00:14

0 Answers0