首页 > 其他分享 >html2canvas实现dom转成图片变下载

html2canvas实现dom转成图片变下载

时间:2022-10-17 15:45:35浏览次数:64  
标签:oImg body canvas dom html2canvas 转成 document 图片

import html2canvas from "./html2canvas.min.js";

new html2canvas(document.getElementById('cur-cert-img'),
      {
          allowTaint: true,
          useCORS: true,  // 跨域
          scale: 2, // 文字清晰
          dpi: 300,  // 文字清晰
          width: 400,
          height: 300
        }
      ).then(canvas => {
       // canvas为转换后的Canvas对象
        let oImg = new Image();
        oImg.src = canvas.toDataURL();  // 导出图片
        document.body.appendChild(oImg);  // 将生成的图片添加到body
        oImg.onload = () => {
         const a = document.createElement("a");
          a.href = oImg.src;
          a.download = certObj.title;
          a.click();
        }
       document.body.removeChild(oImg)
     });

  1. 如果下载下来的图片, 原dom结构里的图片部分不清晰,应使用img表情,不能使用style背景图

标签:oImg,body,canvas,dom,html2canvas,转成,document,图片
From: https://www.cnblogs.com/yangAL/p/16799410.html

相关文章

  • 转载:ElementUI源码系列二 - 引入scss,用gulp把scss转成css并补全、压缩,用cp-cli移动目
    写在开头通过上一篇文章ElementUI源码系列一-从零搭建项目架构,项目准备、项目打包、项目测试流程的学习,我们搭好了项目的基本框架,如下,它们每个文件夹是各司其职,分工明......
  • Copy List with Random Pointer
    SourceAlinkedlistoflengthnisgivensuchthateachnodecontainsanadditionalrandompointer,whichcouldpointtoanynodeinthelist,ornull.Const......
  • 2020CCPC秦皇岛-K. Kingdom's Power(树形DP + 贪心)
    题意给出一个有n个节点的有根树,1为根节点,根节点有无穷多个兵,每一秒可以让任意一个兵向任意一个地方移动一步,兵所到的点被占领,问最少需要经过多少秒,才能将所有的点都占领......
  • 将bag文件批量转成mp4
    文章目录​​简介​​​​dockerfile​​​​Builddockerimage​​​​Builddockercontainer​​​​Runscript​​​​Sourcecode​​​​bag2video.py​​​​main.......
  • js-dom
    DOM的概述DOM(documentobjectmodel)文档对象模型,顾名思义他就是用于操作对应的文档的,也就是操作你写的html文档。DOM是一个遵从文档流的语句。所以他是同步机制。DOM的分......
  • react 方法内返回dom的方法
    functionMyComponent(){return(<React.Fragment>Sometext.<h2>Aheading</h2>Moretext.<h2>Anotherheading</h2>Evenm......
  • React循环DOM时为什么需要添加key
    一、React渲染流程和更新流程react渲染流程:jsx->虚拟dom->真实domreact更新流程:props/state改变->render函数重新执行->生成新的虚拟dom树->新旧虚拟dom树进......
  • python使用xml.dom.minidom写xml节点属性会自动排序问题解决
    1.背景及问题一个xml文件,过滤掉部分节点,生成新的xml文件,但是生成后,发现节点的属性顺序变化了,根据key的字母信息排了序。如原始信息:<stringtypename="time_type"length......
  • js中 时间戳转成成 YYYY-MM-DD HH:mm:ss
    封装一个方法formatDate(row,column,cellValue,index){  if(cellValue==null||cellValue=="")return"";  letdate=newDate(parseInt(cellValue......
  • js操作DOM为什么会影响性能
    DOM是什么?DOM(DocumentObjectModel——文档对象模型)是用来呈现以及与任意HTML或XML文档交互的API。DOM是载入到浏览器中的文档模型,以节点树的形式来表现文档,每个节点代......