前端-导出png,jpg,pptx,svg

两款比较主流的截图工具 
特性dom-to-imagehtml2canvas体积几 KB几十 KB速度非常快较慢浏览器兼容性与全部当代浏览器兼容与部门浏览器兼容性较差跨域截图不支持支持自定义截图区域不支持支持CSS 属性支持不支持某些 CSS 属性支持全部 CSS 属性 dom-to-image该库自 2020 年后根本处于维护状态，更新频率较低。这意味着它可能不会再添加新的功能，更多是对现有题目举行修复。 html-to-image：html-to-image是dom-to-image的一个分支，它继承了dom-to-image的焦点功能，而且持续保持更新。开辟者会不断添加新特性、优化性能和修复已知题目，社区活跃度相对较高。 
安装与引用
   //安装
  npm install html2canvas
  //引入
  import html2canvas from 'html2canvas'; 
     //安装
  npm install html-to-image
  //引入
  import * as htmlToImage from 'html-to-image';
  import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';
    htmlToImage主要的方法有：
  htmlToImage.toPng(…);将节点转化为png格式的图片
  htmlToImage.toJpeg(…);将节点转化为jpg格式的图片
  htmlToImage.toSvg(…);将节点转化为svg格式的图片，生成的图片的格式都是base64格式 htmlToImage.toBlob(…);将节点转化为二进制格式，这个可以直接将图片下载 htmlToImage.toPixelData(…);获取原始像素值，以Uint8Array 数组的形式返回，每4个数组元素表示一个像素点，即rgba值。这个方法也是挺实用的，可以用于WebGL中编写着色器颜色。
  htmlToImage主要的属性有：
  filter ： 过滤器节点中默写不须要的节点；
  bgcolor ： 图片背景颜色；
  height, width ： 图片宽高；
  style ：传入节点的样式，可以是任何有用的样式；
  quality ： 图片的质量，也就是清晰度；//jpeg
  cacheBust ： 将时间戳参加到图片的url中，相当于添加新的图片；
  imagePlaceholder ： 图片生成失败时，在图片上面的提示，相当于img标签的alt； 
  1.img-(png,jpg)

• JPG：其完备名称是 Joint Photographic Experts Group，它实际上指的是由该专家小组制定的一种图像压缩尺度。不过在一样平常生活和技术领域中，人们习惯用 “JPEG” 来表示接纳此尺度压缩的图像文件，而且文件扩展名常写成 “.jpg” 大概 “.jpeg”。该尺度非常恰当用于存储照片和色彩丰富的图像，由于它能在一定水平上平衡图像质量和文件大小。
  
• PNG：全称为 Portable Network Graphics，即便携式网络图形。它是作为替换 GIF 格式而开辟的一种图像文件格式，支持无损数据压缩。PNG 格式在网页计划、图形计划以及须要透明背景结果的场景中应用广泛，由于它不但能保证图像质量，还能实现精良的透明结果。
  

示例（react+ant-design）：

     const menuProps = {   
      items: exportFormat.map(item => ({   
        ...item,
        onClick: () => handleClick(item)
      }))
    }
  ①使用html2canvas

png,jpg焦点：使用 html2canvas 将 <div> 渲染为 Canvas，然后导出为图片。
使用html2canvas转换： 
JavaScript 库，可以将 DOM 元素渲染为 Canvas。它通过遍历 DOM 树，将每个元素的样式和内容绘制到 Canvas 上。

1. if (['jpg', 'png'].includes(item.label)) {
2.         let canvas=await  html2canvas(post.current)
3.         //将 Canvas 的内容转换为 Base64 编码的图像数据 URL。
4.         const image = canvas.toDataURL(`img/${item.label}`)
5.         //创建一个 <a> 标签，设置其 href 为图像数据 URL，并触发点击事件来实现文件下载。
6.         const link = document.createElement('a')
7.         link.href = image
8.         link.download = `post.${item.label}`
9.         link.click()
10.     }

复制代码

②使用dom-to-image

1.     if (['jpg', 'png'].includes(item.label)) {
2.         const image = item.label === 'png' ? await htmlToImage.toPng(post.current, { bgcolor: 'white' }) : await htmlToImage.toJpeg(post.current, { quality: 0.95, bgcolor: 'white' });
3.         const link = document.createElement('a');
4.         link.href = image;
5.         link.download = `post.${item.label}`;
6.         link.click();
7.     }

复制代码

 2.pptx

   //安装
  npm install pptxgenjs
  //引用
  import PptxGenJS from 'pptxgenjs';

1. if (['pptx'].includes(item.label)) {
2.       console.log(222);
3.       //利用html2canvas
4.       const canvas = await html2canvas(post.current);
5.       //将 Canvas 的内容转换为 Base64 编码的图像数据 URL。
6.       const image = canvas.toDataURL('image/png');//方法1
7.       //利用dom-to-image
8.       const image=await htmlToImage.toPng(post.current)//方法2
9.       const pptx = new PptxGenJS();
10.       // 添加一张幻灯片
11.       const slide = pptx.addSlide();
12.       //x/y:距离幻灯片左边/右边的距离
13.       //w/h:图片的大小 单位都为英寸
14.       slide.addImage({ data: image, x: 1, y: 1, w: 4.5, h: 3 });
15.       pptx.writeFile({ fileName: 'post.pptx' });
17.     }

复制代码

3.svg

html-to-image 的焦点技术是使用SVG的 <foreignObject> 标签，将DOM节点嵌入到SVG中，然后将其转换为图像格式。

1.     if (item.label === 'svg') {
2.       // 获取 SVG 字符串-DataUrl形式
3.       const svgString = await htmlToImage.toSvg(post.current);
4.       // 提取并解码 URL 编码的 SVG 内容
5.       const svgContent = decodeURIComponent(svgString.split(',')[1]);
6.       // 创建 Blob 对象
7.       const blob = new Blob([svgContent], { type: 'image/svg+xml' });
8.       const url = URL.createObjectURL(blob);
9.       // 创建下载链接
10.       const link = document.createElement('a');
11.       link.href = url;
12.       link.download = 'post.svg';
13.       link.click();
14.       // 释放 URL 对象
15.       URL.revokeObjectURL(url);
16.     }

复制代码

假如直接就是svg而不是dom元素：

1. const svgElement = post.current.querySelector('svg');
2. const serializer = new XMLSerializer();
3. const svgString = serializer.serializeToString(svgElement);
4. const blob = new Blob([svgString], { type: 'image/svg+xml' });
5. const url = URL.createObjectURL(blob);
6. const link = document.createElement('a');
7. link.href = url;
8. link.download = 'post.svg';
9. link.click();
10. URL.revokeObjectURL(url);

复制代码

无论是哪种方式，须要注意的是：
在将DOM元素导出为SVG时，直接使用XMLSerializer或dom-to-image等工具通常不会保留CSS样式，由于这些工具主要关注的是DOM布局和内联样式。为了确保导出的SVG包罗CSS样式，您可以采取以下方法：

1.   function inlineStyles(element) {
2.             const computedStyle = window.getComputedStyle(element);
3.             console.log(computedStyle);
4.             for (let i = 0; i < computedStyle.length; i++) {
5.               const property = computedStyle[i];
6.               element.style.setProperty(property, computedStyle.getPropertyValue(property));
7.             }
8.             // 递归处理子元素
9.             element.childNodes.forEach(child => {
10.               if (child.nodeType === Node.ELEMENT_NODE) {
11.                 inlineStyles(child);
12.               }
13.             });
14.           }
15.           // 对内联 SVG 元素及其 <foreignObject> 内的元素应用内联样式
16.           inlineStyles(svgElement);

复制代码

 


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。