Question

我的HTML代码中有一个画布，它在脸上显示图像和方形边框。我想要做的是将我在屏幕上（在画布中）看到的内容转换为图像，该图像将显示在“img”标记中，如网站中的经典图像，但错误如下所示 “image.html：50 Uncaught SecurityError：无法在'HTMLCanvasElement'上执行'toDataURL'：可能无法导出受污染的画布。

 <!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>

将画布保存到图像文件中

0 个答案: