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

点击上方前端Q，关注公众号

回复加群，加入前端Q技术交流群

李经理在使用飞书时无意中发现,飞书竟然支持一键复制网页内容到剪贴板的功能。

他立即叫来了公司的前端开发小王,兴致勃勃地说:

"小王啊,你看,飞书的这个功能多方便!我们公司的协同办公系统是不是也可以实现类似的功能?这样用户体验一定能得到很大提升!"

小王看着李经理充满expectant的眼神, 虽然内心已经吐槽"就这点功能至于吗", 但表面上还是恭恭敬敬地回答:

"老板英明,这个功能确实很实用。技术上应该不难实现,主要就是用Clipboard API写几行代码的事。我这就去安排!"

回到工位后,小王苦笑着摇摇头,找来相关文档开始翻阅,暗暗发誓一定要把这个"划时代"的功能做好.

小王找来了领导说的飞书文档复制网页内容的功能, 如下:

小王思考了片刻…

功能拆解:

要实现这个功能, 要拆分为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
    );
  });
}