使用 JS Jquery 下载画布图像

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>

很遗憾，我收到以下错误：

未捕获的类型错误：无法读取未定义的属性“toDataURL”

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

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

简介：1) 点击图片 2) 查看开发控制台

编辑：

更新代码后如下：

在全局范围内定义画布 从var canvas = $(this).find('canvas')[0]; 中删除var

弹出如下错误：

未捕获的安全错误：无法在“HTMLCanvasElement”上执行“toDataURL”：可能无法导出受污染的画布。

Answer 1

您不能在回调就绪方法中使用画布变量，因为此方法被执行并且画布变量的范围将结束。当你调用点击回调时，不会有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>