飞书一键复制网页内容为图片原理

winty

发布于 2024-07-31 17:41:49

1030

发布于 2024-07-31 17:41:49

文章被收录于专栏：前端Q

飞书文档复制网页内容的功能, 如下:

小王思考了片刻…

功能拆解:

要实现这个功能, 要拆分为4个步骤:

获得选中内容所属的 div
把选中内容的div 转换成canvas
转换canvas到二进制图像
复制二进制图像到剪贴板

由于小王的业务只需要复制固定区域的div, 所以第一步可以忽略, 简化成:




  const element = document.getElementById("target");

转换div成 canvas:

时间已经很晚了, 小王咳了一杯咖啡, 继续奋战. 小王苦思冥想, 要怎么把div转换成 canvas. 他琢磨:

递归遍历 DOM 树:
- 会从指定的根元素开始,递归遍历整个 DOM 树。
- 对于每个遇到的元素, 分析其样式、位置、大小等属性。
处理样式和布局:
- 通过读取元素的 CSS 样式,如颜色、背景、边框等, 复制元素的视觉表现。
- 它会计算元素的盒模型、定位、层叠等布局信息,以确定元素在最终图片中的位置。
…

小王这时候已经觉得很累了, 于是索性打开浏览器搜索, 结果第一页就看到了: html2canvas. 他看了一眼, github 29K stars. 他查看了一下调用api:




html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

它正是小王需要的!

于是小王在项目中命令行输入:




npm install --save html2canvas

然后小王在业务代码中敲下了:




function copyDivToImage() {
  const element = document.getElementById("target");
  html2canvas(element).then(canvas => {
	  // canvas 拿到了, 然后呢
  }
}

转换canvas到二进制图像

小王犹豫, 为什么要转成二进制图像呢, 我直接复制 base64 字符不行吗. 不过很快, 小王就意识到了, 剪贴版API 不支持base64字符串的类型. 于是他翻开 mdn 文档:

HTMLCanvasElement: toBlob() method - Web APIs | MDN (mozilla.org)





function copyDivToImage() {
  const element = document.getElementById("target");
  html2canvas(element).then(canvas => {
    canvas.toBlob(
      (blob) => {
			   // 复制文件到剪贴板  
      }, 
      "image/jpeg", // 文件的格式
      1 // 图像压缩质量 0-1
    );
  });
}

复制二进制图像到剪贴板

这一步小王已经先前看过 MDN 文档了, ClipboardItem - Web APIs | MDN (mozilla.org) 可以直接调用浏览器的 navigator api :





function copyDivToImage() {
  const element = document.getElementById("target");
  html2canvas(element).then(canvas => {
    canvas.toBlob(
      (blob) => {
			   // 复制文件到剪贴板  
			  try {
          await navigator.clipboard.write([
            // eslint-disable-next-line no-undef
            new ClipboardItem({
              [blob.type]: blob
            })
          ]);
          console.log("图像已成功复制到剪��板");
        } catch (err) {
          console.error("无法复制图像到剪贴板", err);
        }
      }, 
      "image/jpeg", // 文件的格式
      1 // 图像压缩质量 0-1
    );
  });
}