js如何实现页面截图生成并分享功能,如何向后端传递
JS 实现 如何 功能 生成 分享 页面 传递
2023-09-11 14:19:18 时间
通过html2canvas生成分享图片
什么是 html2canvs?
html2canvas 的作用就是允许让我们直接在用户浏览器上拍摄网页或其部分的“截图”。
它的屏幕截图是基于 DOM 的,因此可能不会 100% 精确到真实的表示,因为它不会生成实际的屏幕截图,而是基于页面上可用的信息构建屏幕截图。所以一个比较常见的应用场景就是我们可以使用它在 H5 端生成分享图。
- 下载
html2canvas官网: http://html2canvas.hertzen.com/
- 使用
//引入改文件
<script src="./js/html2canvas.js"></script>
- 调用
// 获取分享图片 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 元素完全渲染完成后再进行图片的生成
});
}
截图效果:
相关文章
- html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式
- Flutter加载Html并实现与JS 的双向调用
- Cocos2d-JS 实现将TiledMap中的每个 tile 变成物理精灵的方法
- js非数字值(NaN)和特殊值负零(-0)
- javascript实现java的map对象,js实现new map()
- js new一个对象的过程,实现一个简单的new方法
- 在ASP.NET MVC中使用typeahead.js支持预先输入,即智能提示
- vue.js之过渡动画
- -第2章 JS方法实现下拉菜单显示和隐藏
- 【HarmonyOS】基于JS UI的Java服务卡片如何实现动态定时刷新
- 基于Node.JS+MongoDB+Android实现新闻聚合网站【100010390】
- JS实现数组去重的常见方法
- JS手写实现call、apply、bind(超详细)
- 如何使用JS实现一个录屏功能
- bcrypt.js实现对登录注册中密码的加密存储和验证
- 【零基础学JS -4 】Javascript的变量-var let const
- 简单JS实现对表的行的增删
- 浅析js前端如何将word文档转为html:docx是怎样存储图片的、Java使用POI如何实现、前端使用Mammoth.js如何实现
- 详解JS面向对象的三大特征之多态
- [NodeJS]使用Node.js写一个简单的在线聊天室
- js实现iview表格 排名列
- js 实现图片实时预览
- 编程语言拟人化:Java、C++、Python、Ruby、PHP、C#、JS!--隆重推荐转
- Node.js V8模块