下载网页内canvas的图片

请确定网页内有加载jquery,本执行代码按照jquery方式执行

function download(selector) {
  // 通过 API 获取目标 canvas 元素
  const canvas = document.querySelector(selector);

  // 创建一个 a 标签,并设置 href 和 download 属性
  const el = document.createElement("a");
  // 设置 href 为图片经过 base64 编码后的字符串,默认为 png 格式
  el.href = canvas.toDataURL();
  el.download = "文件名称";

  // 创建一个点击事件并对 a 标签进行触发
  const event = new MouseEvent("click");
  el.dispatchEvent(event);
}
$("canvas")
  .attr("id", "chart")
  .ready(function () {
    $("body").css("width", $("body").width() * 6);
    $("body").css("height", $("body").height() * 6);
    $("canvas").css("width", $("body").width() * 6);
    $("canvas").css("height", $("body").height() * 6);
    $("canvas").ready(function () {
      download("#chart");
    });
  });

上述代码的执行步骤,进入浏览器,按F12进入调试控制台,点击console的标签页,复制上述代码执行,执行成功后会自动下载到浏览器默认的下载目录

给TA打赏
共{{data.count}}人
人已打赏
技术专区

nginx 伪静态大全(复制可用)

2023-1-9 15:14:13

技术专区

thinkphp8 全站内部调用方法(复制可用)

2023-9-23 14:27:44

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索