Question

我希望返回镜像镜像，然后返回黑色图像。

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      margin: 0px;
      padding: 0px;
    }
  </style>
</head>

<body>
  <img id="canvasImg" alt="Right click to save me!">
  <!--PLACE WHERE IMAGE MUST BE PUT ANFTER MIRROR-->
  <canvas id="myCanvas" width="1000" height="1000" style="background:#0094ff"></canvas>
  <!--Canvas Element-->
  <script>
    /*Creating Canvas*/
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

     // translate context to center of canvas
    context.translate(canvas.width / 2, canvas.height / 2);
    /*center the image*/

     // flip context horizontally
    context.scale(-1, 1); /*mirror image*/


    var imageObj = new Image();
    /*creating image object*/
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

    imageObj.onload = function() {

      context.drawImage(imageObj, -imageObj.width / 2, -imageObj.height / 2);
      /* draw and center the image*/
      context.restore();
      context.save();
    };
    var dataURL = canvas.toDataURL("image/jpeg");
    /* canvas to url  */
    document.getElementById('canvasImg').src = dataURL;
     // using url as source for img with id canvasImg
  </script>
</body>

</html>

＆＃13;

Answer 1

这里主要有两个问题。

1。）即使在绘制画布之前，您也将canvas转换为dataURL。添加延迟以查看结果。

setTimeout(function(){
          var dataURL = canvas.toDataURL("image/jpeg");
          console.log(dataURL);
          /* canvas to url  */
          document.getElementById('canvasImg').src = dataURL;
           // using url as source for img with id canvasImg
    },2000);

2.。）您正在从不同的服务器加载图像，因此会引发安全问题。在控制台中查看错误。 “Uncaught SecurityError：无法在'HTMLCanvasElement'上执行'toDataURL'：可能无法导出受污染的画布。”

现在，为避免此错误，您可以将图像下载到本地计算机。将图像路径更改为将图像存储在本地计算机上的位置。这将有效。

canvas.toDataURL（）不返回图像

1 个答案: