Question

我正在尝试使用以下代码将画布图像下载到桌面：

<script type="text/javascript">
    var canvas;
    $(document).ready(function() {
      if ($('#designs-wrapper').length) {
        $('.design').each(function() {
          var design = $(this).attr('data-design');
          var canvas = $(this).find('canvas')[0];
          var ctx = canvas.getContext('2d');
          var img = new Image;
          img.onload = function() {
            ctx.drawImage(this, 0, 0);
          };
          img.src = design;
        });
      }

      $('#canvas').click(function() {
        this.href = canvas.toDataURL();
        this.download = 'design.png';
      });

    });
</script>

可悲的是，我收到以下错误：

未捕获的TypeError：无法读取未定义的属性'toDataURL'

有没有人知道如何解决这个问题？

实时预览：http://dane.helpful.ninja/fds/index.php?username=z-justin

简介：1）单击图像2）参见开发控制台

修改

将代码更新为以下内容后：

在全局范围内定义画布从var

中删除var canvas = $(this).find('canvas')[0];

弹出以下错误：

Uncaught SecurityError：无法在'HTMLCanvasElement'上执行'toDataURL'：可能无法导出受污染的画布。

Answer 1

您无法使用canvas变量从回调到ready方法，因为此方法将被执行并且canvas变量的范围将结束。当您调用click回调时，不会有任何canvas变量实例，因为它已经结束。

<script type="text/javascript">
    var canvas;
    $(document).ready(function() {
      if ($('#designs-wrapper').length) {
        $('.design').each(function() {
          var design = $(this).attr('data-design');
          var canvas = $(this).find('canvas')[0];
          var ctx = canvas.getContext('2d');
          var img = new Image;
          img.onload = function() {
            ctx.drawImage(this, 0, 0);
          };
          img.src = design;
        });
      }

      $('#canvas').click(function() {
        this.href = $('#canvas')[0].toDataURL();// Change here
        this.download = 'design.png';
      });

    });
</script>

使用JS Jquery下载画布图像

1 个答案: