html2canvas介绍

1、html2canvas的作用就是允许让我们直接在用户浏览器上拍摄网页或其部分的“截图”。
2、常用于网页截图和图片制作。

html2canvas引入

1、请结合loadScript函数使用。

  1. this.utils.loadScript('//g.alicdn.com/platform/c/html2canvas/1.0.0-alpha.12/dist/html2canvas.min.js');

html2canvas使用案例

我们借助html2canvas实现一个简单的截图功能。
1、首先将html2canvas引入，且在页面didMount生命周期调用。
image.png
2、复制以下JS。

  1. // URL 转 base64
  2. function loadDataUrl(url, callback) {
  3.   const xhr = new XMLHttpRequest();
  4.   xhr.open('GET', url);
  5.   xhr.responseType = 'blob';
  6.   xhr.send();
  7.   xhr.onload = function () {
  8.     const reader = new FileReader();
  9.     reader.readAsDataURL(xhr.response);
  10.     reader.onloadend = function () {
  11.       callback(reader.result);
  12.     };
  13.   };
  14. }

3、页面构成
图片上传组件：最大上传文件个数1、绑定onSuccess回调函数，函数示例如下。

  1. //下述$内唯一标识需修改为你自己当前页面的图片组件
  2. export function onSuccess(file, value) {
  3.   let url = value.length > 0 ? location.origin + value[0].url : "";
  4.   this.$('image_koi91j89').set("src", url);
  5. }

容器：CSS配置如下，宽高可根据需要自行改变。

  1. :root {
  2.   height: 300px;
  3.   width: 300px;
  4.   align-items: center;
  5.   justify-content: center;
  6.   display: flex;
  7.   overflow: hidden;
  8. }

图片组件：放入上述容器内，宽高配置跟上述容器一致，可根据当前效果自行设置摆放方式。
image.png
按钮：绑定下述JS，第2行$内唯一标识需修改为上述容器的唯一标识，27行scale属性可自行修改，为等比放大倍率，scale: 2，最终生成图片宽/高 = 容器宽/高*2。

  1. export function onDownload(ctx) {
  2.   const root = ReactDOM.findDOMNode(this.$("div_koi91j88"));
  3.   // h2c 对同域图片不加 crossOrigin，但宜搭上传的文件比较特殊，是 302 出来的跨域，
  4.   // 因此使用 XHR 转 base64 处理，以避免跨域资源导致污染 canvas 无法导出。
  5.   Promise.all(Array.from(root.querySelectorAll('*')).map(el => new Promise(resolve => {
  6.     if (~(el.src || '').indexOf(`${location.host}/ossFileHandle`)) {
  7.       loadDataUrl(el.src, dataUrl => {
  8.         el.src = dataUrl;
  9.         resolve();
  10.       });
  11.     } else {
  12.       const bgImg = getComputedStyle(el).backgroundImage || '';
  13.       if (~bgImg.indexOf(`${location.host}/ossFileHandle`)) {
  14.         loadDataUrl(/url\(['"](.+)['"]\)/.exec(bgImg)[1], dataUrl => {
  15.           el.style.backgroundImage = `url(${dataUrl})`;
  16.           resolve();
  17.         });
  18.       } else {
  19.         resolve();
  20.       }
  21.     }
  22.   }))).then(() => html2canvas(root, {
  23.     width: root.clientWidth,
  24.     height: root.clientHeight,
  25.     useCORS: true,
  26.     allowTaint: false,
  27.     scale: 2
  28.   }).then(canvas => {
  29.     if (!this.utils.isMobile()) {
  30.       const a = document.createElement('a');
  31.       a.download = '头像.jpg';
  32.       a.href = canvas.toDataURL();
  33.       document.body.appendChild(a);
  34.       a.click();
  35.       document.body.removeChild(a);
  36.     } else {
  37.       const url = canvas.toDataURL('image/jpeg');
  38.       this.utils.dialog({
  39.         type: 'show',
  40.         content: (
  41.           <div style={{ height: 'auto', userSelect: 'none', '-webkit-user-select': 'none' }} >
  42.             <div
  43.               style={{
  44.                 padding: '0 10px',
  45.                 color: '#888',
  46.                 fontSize: '12px', userSelect: 'none'
  47.               }}
  48.             >
  49.               长按下图保存至相册
  50.           </div>
  51.             <img style={{ width: '100%', userSelect: 'none', tabIndex: "1", borderRadius: '5px', marginTop: '15px', objectFit: 'contain', }} src={url} />
  52.           </div>
  53.         ),
  54.         footer: false,
  55.         title: '下载海报'
  56.       })
  57.     }
  58.   }));
  59. }

4、效果
PC端：
image.png
移动端（钉钉内）：
Screenshot_20220422_161910.jpg
PC钉钉工作台暂不支持