html2canvas如何生成一张透明背景色的图片

最近给后台管理系统的小工具模块新增了一个文字美化功能，就是输入一段文字可以生成一张好看的图片分享出去。通常情况下使用html2canvas就可以实现，但是如果设置了圆角效果的话，生成的图片虽然会显示圆角，但是由于背景色是默认的白色，所以截出来的图显示的是白色的背景加上圆角，效果非常不好。

要解决这个问题，可以通过设置html2canvas的option中的backgroundColor属性将背景设为透明色即可，设置为空即可：

    // word-container就是我们要获取截图对应的 DOM 元素选择器
    Html2canvas(document.querySelector('.word-container'), {
      useCORS: true, // 【重要】开启跨域配置
      backgroundColor: null, // null或transparent可将canvas背景设置为透明，解决圆角问题
      // scale: window.devicePixelRatio < 3 ? window.devicePixelRatio : 2,
      // dpi: window.devicePixelRatio * 2, //设备像素比
      allowTaint: true, // 允许跨域图片
    }).then((canvas) => {
      const url = canvas.toDataURL('image/png', 1.0);
      let a = document.createElement("a"); // 生成一个a元素
      a.download = "download.png"; // 设置图片名称
      a.href = url; // 将生成的URL设置为a.href属性
      a.click();
    });

按照以上配置设置后，还可以通过a链接引入生成的图片地址，再添加click事件，即可实现自动下载了。

本文章由javascript技术分享原创和收集