前端必备：html2canvas图片转换技巧

前端必备：html2canvas图片转换技巧

在现代前端开发中，html2canvas是一个不可或缺的工具，它可以帮助开发者轻松实现将HTML内容转换为图片并下载的功能。无论是提升用户体验还是简化工作流程，掌握html2canvas的使用技巧都能让你事半功倍。本文将详细介绍如何利用html2canvas库，将网页内容转换为高质量图片，并提供下载功能，让你的前端开发更加高效便捷。

html2canvas是一款JavaScript插件，它的原理是通过遍历DOM树，将网页上的HTML元素转化为Canvas对象，从而可以将网页截图输出为图片或者PDF文件。本文主要讲述将其转化为图片并下载的功能实现。

安装

可以通过npm或yarn进行安装：

npm install --save html2canvas
# 或者
yarn add html2canvas

引用

在项目中引入html2canvas：

import html2canvas from "html2canvas";

要将页面元素转换为图片，首先需要获取要截图的DOM元素，然后调用html2canvas方法：

const element = document.getElementById('your-element-id');
html2canvas(element).then(canvas => {
  // canvas对象已经生成，可以进行后续操作
});

默认情况下，html2canvas生成的是PNG格式的图片。要将其转换为JPG格式，可以使用Canvas的toDataURL方法：

const canvas = await html2canvas(document.getElementById('your-element-id'));
const jpgDataUrl = canvas.toDataURL('image/jpeg', 0.9); // 第二个参数是图片质量（0-1）

直接下载

通过创建一个隐藏的<a>标签，设置其href属性为JPG数据URL，并触发点击事件，即可实现图片下载：

function downloadImage(dataUrl, filename) {
  const link = document.createElement('a');
  link.href = dataUrl;
  link.download = filename || 'screenshot.jpg';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

// 使用示例
downloadImage(jpgDataUrl, 'output.jpg');

通过Base64编码下载

另一种下载方式是先将图片转换为Base64编码，然后再进行下载：

function downloadImageBase64(dataUrl, filename) {
  fetch(dataUrl)
    .then(res => res.blob())
    .then(blob => {
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = filename || 'screenshot.jpg';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    });
}

// 使用示例
downloadImageBase64(jpgDataUrl, 'output.jpg');

生成告示牌图片

假设我们需要生成一个告示牌样式的图片并提供下载功能：

<div class="board" ref="imageDom">
  <div class="center">
    <p class="title">绿色公示牌 ( A类 )</p>
    <p>
      根据有关规定，该项目被主管部门评定为A类!悬挂绿牌,请项目全体从业人员继续保持项目良好安全生产状态，同时接受社会监督!
    </p>
    <span>监督机构:</span
    ><strong style="font-weight: 550">建筑工程质量安全监督服务站</strong
    ><br />
    <span>监督电话:0564—50221111</span>
  </div>
</div>
<div style="width: 100%; text-align: right; padding-right: 30px">
  <el-button
    size="mini"
    type="text"
    icon="el-icon-download"
    @click="downloadFn"
    >下载</el-button
  >
</div>

downloadFn() {
  const clientWidth = this.$refs.imageDom.offsetWidth;
  const clientHeight = this.$refs.imageDom.offsetHeight;
  let canvas = document.createElement("canvas");
  var scale = 2;
  canvas.width = clientWidth * scale;
  canvas.height = clientHeight * scale;
  const ops = {
    scale: scale,
    width: clientWidth,
    height: clientHeight,
    useCORS: true,
    allowTaint: true,
    tainTest: false,
    backgroundColor: null,
  };
  html2canvas(this.$refs.imageDom, ops).then((canvas) => {
    this.imgUrl = canvas.toDataURL("image/png");
    this.download(this.imgUrl, [canvas.width, canvas.height]);
  });
},
download(imgUrl, kh) {
  this.getUrlBase64(imgUrl, kh).then((base64) => {
    const link = document.createElement("a");
    link.href = base64;
    link.download = `图片.png`;
    link.click();
  });
},
getUrlBase64(url, kh) {
  return new Promise((resolve) => {
    let canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    const img = new Image();
    img.crossOrigin = "Anonymous";
    img.src = url;
    img.onload = () => {
      canvas.height = kh[1];
      canvas.width = kh[0];
      ctx.drawImage(img, 0, 0, kh[0], kh[1]);
      const dataURL = canvas.toDataURL("image/png");
      canvas = null;
      resolve(dataURL);
    };
  });
}

批量生成并下载图片

在某些场景下，我们需要批量生成并下载多张图片。这时可以结合jszip和file-saver库来实现：

import html2canvas from 'html2canvas';
import JSZip from 'jszip';
import FileSaver from 'file-saver';

createPics() {
  const base64Array = [];
  this.infoList.forEach((item, index) => {
    html2canvas(this.$refs[`pic${index}`][0]).then(canvas => {
      base64Array.push({
        name: `${item.code}_${item.name}.png`,
        data: canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, '')
      });
      if (base64Array.length === this.qrList.length) {
        this.downloadZip(base64Array);
      }
    });
  });
}

downloadZip(arr) {
  const date = new Date();
  const year = date.getFullYear();
  const month = ('00' + (date.getMonth() + 1)).substr(-2, 2);
  const day = ('00' + date.getDate()).substr(-2, 2);
  const zipName = `${year}${month}${day}(${this.infoList.length}个)`;

  const zip = new JSZip();
  arr.forEach(item => {
    zip.file(item.name, item.data, { base64: true });
  });
  zip.generateAsync({ type: 'blob' }).then(content => {
    FileSaver.saveAs(content, `${zipName}.zip`);
  });
}

1. 性能优化：对于大型复杂页面，建议先对需要截图的区域进行裁剪或隐藏不必要的元素，以提高截图速度和质量。
2. 跨域问题：如果页面包含跨域资源（如图片），需要设置useCORS: true和allowTaint: true，并确保服务器端支持CORS。
3. 图片质量：通过调整scale参数可以控制截图的清晰度，但过高的scale值会增加内存消耗和处理时间。
4. 兼容性：html2canvas在现代浏览器中表现良好，但在IE等旧版浏览器中可能需要额外的polyfill支持。

通过以上步骤和案例，相信你已经掌握了html2canvas的基本使用方法和一些实用技巧。在实际项目中，你可以根据具体需求灵活运用这些知识，为用户提供更便捷、更个性化的功能体验。