Question

我目前正在使用以下内容将fabricjs画布保存到我的电脑：

HTML

<button class="btn" onclick="downloadFabric(canvas,'file');">Save</button>

JS

function download(url, name) {
  $("<a>")
    .attr({
      href: url,
      download: name
    })[0]
    .click();
}
function downloadFabric(canvas, name) {
  download(canvas.toDataURL(), name + ".png");
}

基本上我正在试图取消onclick=，因为我读过这不是处理事情的正确方法。我没有运气就试着这样写：

HTML

<button class="btn" id="save">Save</button>

JS

function download(url, name) {
  $("<a>")
    .attr({
      href: url,
      download: name
    })[0]
    .click();
}
$("#save").click(function save(canvas, name) {
    download(canvas.toDataURL(), name + ".png");
});

当我做上述事情时，没有任何反应。我做错了什么？

Answer 1

您需要在canvas功能中设置name和save，而不是设置为param，然后使用$("#save").click(save);将其绑定到点击功能。像save函数

一样单独定义download函数

请参阅下面的演示，该演示从画布中触发名称为file.png的文件下载。

function download(url, name) {
  $("<a>")
    .attr({
      href: url,
      download: name
    })[0]
    .click();
}

function save() {
  var canvas = document.getElementById('canvas');
  var dataURL = canvas.toDataURL();
  //get the name via input val or where ever you are getting it 
  var name = 'file';
  download(dataURL, name + ".png");
}
$("#save").on('click',save);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn" id="save">Save</button>

<canvas id="canvas" width="5" height="5"></canvas>

如何将带有onclick功能的按钮转换为带有id的按钮

1 个答案: