js如何实现页面截图生成并分享功能，如何向后端传递

通过html2canvas生成分享图片

什么是 html2canvs?

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

它的屏幕截图是基于 DOM 的，因此可能不会 100% 精确到真实的表示，因为它不会生成实际的屏幕截图，而是基于页面上可用的信息构建屏幕截图。所以一个比较常见的应用场景就是我们可以使用它在 H5 端生成分享图。

1. 下载

html2canvas官网： http://html2canvas.hertzen.com/

2. 使用

//引入改文件
<script src="./js/html2canvas.js"></script>

3. 调用

 // 获取分享图片 base64
 function getShareImgBase64 () {
     return new Promise((resolve) => {
         setTimeout(() => {
             // #capture 就是我们要获取截图对应的 DOM 元素选择器
             html2canvas(document.querySelector('#capture'), {
                 useCORS: true, // 【重要】开启跨域配置
                 scale: window.devicePixelRatio < 3 ? window.devicePixelRatio : 2,
                 allowTaint: true, // 允许跨域图片
             }).then((canvas) => {
                 const bs64 = canvas.toDataURL('image/jpeg', 1.0);
                 resolve(bs64);
             });
         }, 300); // 这里加上 300ms 的延迟是为了让 DOM 元素完全渲染完成后再进行图片的生成
     });
 }
 //通过then接收
getShareImgBase64().then((res) => {
    console.log(res);
})

注意：生成的图片是bs64格式的，向后端传建议使用form表单直接上传文件

let bytes = window.atob(bs64)
let ab = new ArrayBuffer(bytes.length)
let ia = new Uint8Array(ab)
for (let i = 0; i < bytes.length; i++) {
  ia[i] = bytes.charCodeAt(i)
}
let imgs = new File([ab], name, { type: 'image/jpg' })
const formData = new FormData()
formData.append('file', imgs)
//此处上传直接使用ajax还,直接把formData放到data那里就行，不需要键值对形势

如果遇到报错：

Error: Failed to execute ‘atob’ on ‘Window’: The string to be decoded is not correctly encoded
错误:无法在’Window’上执行’atob’:要解码的字符串未正确编码

解决办法：将上面报错的那行代码换成下面这种就可以了

let bytes = atob(bs64.replace(/^data:image\/(png|jpeg|jpg);base64,/, ''));

完整的代码：

// 获取分享图片 base64
function getShareImgBase64 () {
 return new Promise((resolve) => {
     setTimeout(() => {
         // #capture 就是我们要获取截图对应的 DOM 元素选择器
         html2canvas(document.querySelector('#capture'), {
             useCORS: true, // 【重要】开启跨域配置
             scale: window.devicePixelRatio < 3 ? window.devicePixelRatio : 2,
             allowTaint: true, // 允许跨域图片
         }).then((canvas) => {
             const bs64 = canvas.toDataURL('image/jpeg', 1.0);
             let bytes = window.atob(bs64.replace(/^data:image\/(png|jpeg|jpg);base64,/, ''))
             let ab = new ArrayBuffer(bytes.length)
             let ia = new Uint8Array(ab)
             for (let i = 0; i < bytes.length; i++) {
                 ia[i] = bytes.charCodeAt(i)
             }
             let imgs = new File([ab], name, { type: 'image/jpg' })

             resolve({"bs64":bs64,"imgs":imgs});
         });
     }, 300); // 这里加上 300ms 的延迟是为了让 DOM 元素完全渲染完成后再进行图片的生成
 });
}

截图效果：