首页
归档
笔记
树洞
搜索
友言

文章详情

Interesting People Record Interesting.

/ JavaScript / 文章详情

使用html2canvas将DOM导出为图片

Sonder
2022-10-08
1477字
4分钟
浏览 (2.8k)

背景:前段时间接到一个需求,有一个用户自定义上传的图片会频繁更改,但大多都是更改文本内容,
所以提出了制作几套模板针对不同的场景,用户可以输入、更改文本内容,然后生成图片保存。

实现方式

在网上搜索到《基于html2canvas实现网页保存为图片及图片清晰度优化》这篇文章,写的很详细,就参考实现了出来。

整体思路是用HTML实现对应的模板样式,然后用html2canvas这个开源库将Dom转化成canvas,最后用canvas的toDataURL()方法将canvas导出为图片。

直接上代码:

复制代码
import html2canvas from 'html2canvas';

export default async function html2image(outputWidth = 1920, targetElementId = 'dom2image') {
 const targetElement = document.querySelector(`#${targetElementId}`);
 const targetWidth = targetElement.clientWidth;
 const targetHeight = targetElement.clientHeight;
 const scale = (outputWidth / targetWidth).toFixed(2);
 const option = {
   width: targetWidth,
   height: targetHeight,
   scale,
   useCORS: true,
   backgroundColor: 'rgba(0, 0, 0, 0)'
 }
 return new Promise((resolve, reject) => {
   html2canvas(targetElement, option).then(function(canvas) {
     const image = canvas.toDataURL('image/jpeg', 1);
     resolve(image);
   });
 })
}

整体还是比较简单的,传入Dom的Id、宽高、缩放比例、背景等,通过html2canvas将Dom转换为canvas,最后导出。

注意点:

  1. 跨域,如果导出的dom中包含图片,且图片与网站不是同源的(比如图片有CDN代理),则需要在option中添加useCORS,并在img标签上添加crossorigin=’anonymous’属性;
  2. 图片透明度,如果导出时需要保留透明度,就需要将导出格式更改为image/png,jpeg是不会存储透明度的,但是大小会相比png小很多,如果对透明度没有要求的建议导出为jpeg节省存储空间;
  3. 图片分辨率,上面的代码可以看的到,dom并不需要和实际导出的分辨率大小一样,可以通过设置scale来实现缩放。

参考文章:
【1】https://segmentfault.com/a/1190000011478657
【2】https://github.com/niklasvh/html2canvas
【3】https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL

下一篇 / JS判断页面当前焦点

🎯 相关文章

💡 推荐文章

🕵️‍♂️ 评论 (0)