在将Canvas HTML图像下载到PNG之前，Sweet Alert弹出提示

在我的Canvas绘图应用程序中，我有一个下载到png按钮，我想这样做，所以当用户在我的甜蜜警报弹出提示点击“是保存它”时，只下载canvas上的图像。 现在它仍在自动下载。 谢谢您的帮助。 （如果有人有更好的方式通过Javascript下载也有帮助，它正在下载png但是它已损坏我无法打开它）

$('#download').click(function(){ swal({ title: "Are you finished your creation?", text: "click yes to save", type: "warning", showCancelButton: true, confirmButtonColor: "#f8c1D9", confirmButtonText: "Yes, save it!", closeOnConfirm: true }, function (isConfirm) { if (isConfirm) { swal("Saving!"); var base64 = document.getElementById("canvas") .toDataURL("image/png") .replace(/^data:image\/[^;]/, 'data:application/octet-stream'); document.getElementById("download-png").href = base64 } else { } return false; }); }); 

HTML

Answer 1

您应该在您的页面中包含canvas-toBlob.js和FileSaver.js ，然后：

 function (isConfirm) { if (isConfirm) { swal("Saving!"); var canvas = document.getElementById("canvas") // get the canvas as a blob canvas.toBlob(function(blob){ // Save the file... saveAs(blob, 'my-image.png') }, "image/png", 0.95); // PNG at 95% quality } else { // user cancel } return false; };