JS如何实现页面截屏功能实例代码
"页面截屏"是前端经常遇到的需求，比如页面生成海报，弹窗图片分享等，因为浏览器没有原生的截图API，所以需要借助canvas来实现导出图片实现需求。
可行性方案
- 方案1： 将 DOM 改写成 canvas ，调用canvas的toBlob或者toDataURL方法即刻上传到七牛云或服务器
- 方案2： 使用第三方库html2canvas.js实现 canvas ， 在不更改页面已有DOM的情况下优雅生产canvas
解决方案的选择
方案1：需要手动计算每个DOM元素的Computed Style，然后需要计算好元素在canvas的大小位置等属性。
方案1难点
- 需要弃用已有的html页面，改用canvas重写。
- 页面结构层复杂的情况下用canvas写，不易重构。
- 有一定canvas基础。
方案2：该项目在Github上stars已有两万多start，作者仍在积极维护。API非常简单，在已有项目中开箱即用。
html2canvas
因为是常见的需求，所以社区会有成熟的解决方案，首先试试社区的解决方案。
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Hello world!</h4>
</div>
html2canvas(document.querySelector("#capture")).then(canvas => {
document.body.appendChild(canvas)
});
以上是官网的实例用法。在网页上出现了一个新的 canvas DOM。接下来我们只需要把canvas转换成图片就好。这里使用canva原生的toDataURL和toBlob方法上次到七牛云。
使用时需要注意。此处如果生产的画布中有跨域图片，需要配置allowTaint为true。
如果是原生canvas实现，canvas需要所有跨域图片请求完成才可绘制。有两种解决方案
- 方案1：在html上写好img标签，src写好对应的图片url。缺点很明显，会污染页面的布局结构。
- 方案2：使用js，使用new Image()的方式。设置src到对应的图片url，在onload回调中处理相关操作。优点：可行性最高，不过有回调地狱的问题。我们用Promise改写一下
function asyncImage(url) {
const img = new Image();
img.src = url;
img.setAttribute('crossOrigin', 'anonymous');
return new Promise((resolve, reject) => {
img.onload = () => resolve(img);
img.onerror = reject;
});
}
好的，大功告成~是不是可以交付需求了呢？开开心心提测，但是在移动端测试的时候发现生产的图片非常模糊。这样是不行的，明显low了许多（测试不给过orz）。
github有相应的解决方案 传送门 ，这个回答也是解决很多人的问题
基本原理：将canvas宽高放大两倍。把css把canvas的style设置成1倍大小。
var shareContent = YourTargetElem;
var width = shareContent.offsetWidth;
var height = shareContent.offsetHeight;
var canvas = document.createElement("canvas");
var scale = 2 || window.devicePixelRatio ; //也可以使用设备像素比
canvas.width = width * scale;
canvas.height = height * scale;
canvas.getContext("2d").scale(scale, scale);
var opts = {
scale: scale,
canvas: canvas,
logging: true,
width: width,
height: height
};
html2canvas(shareContent, opts).then(function (canvas) {
var context = canvas.getContext('2d');
var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);
document.body.appendChild(img);
$(img).css({
"width": canvas.width / 2 + "px",
"height": canvas.height / 2 + "px",
})
});
原理我们已经知道了，实际操作之后图像也确实清晰了很多。但是问题还是没有解决掉。
缩小虽然提高了清晰度，但是我们需要的图片是原始比例的大小。。
最终多次尝试无果后，选择放弃使用框架。直接用原生canvas撸一个！
canvas绘制
我们知道，在高清屏的设备下，任何绘制canvas中的图像、文字、线条、形状都可能会出现模糊的问题。可通过引入 GitHub 中的 hidpi-canvas 有效地解决。
- 首先去 GitHub 下载 hidpi-canvas.js 文件：传送门；
- 在项目中引入 hidpi-canvas.js 文件;
- 调用 getPixelRatio() 函数，得到 ratio 值；
- 在 drawImage() 中，将 width 和 height 乘以 ratio；
- 最终的canvas导出为Blog，转换成文件对象上传七牛云。
核心代码如下
function asyncImage(url) {
const img = new Image();
img.src = url;
img.setAttribute('crossOrigin', 'anonymous');
return new Promise((resolve, reject) => {
img.onload = () => resolve(img);
img.onerror = reject;
});
}
async function drawCanvas(){
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
var ratio = getPixelRatio(context); // 关键代码
canvas.width = 300 * ratio; // 画布宽度
canvas.height = 300 * ratio; // 画布高度
var divWidth = 300 * ratio; // 用于内容居中
var divHeight = 300 * ratio; // 用于内容居中
const image = await asyncImage('picUrl')
const imgWidth = 550
const imgHeight = 300
context.drawImage(this, 50, 50, imgWidth * ratio, imgHeight * ratio)
// Some other code
const Blob = canvas.toBlob((Blob)=>{
//上传七牛云
});
}
最终生成的图片终于清晰了...只需要根据dom的offsetWidth等适配不同屏幕就可以了。
总结
如果对图片的清晰度要求不高，或者图片需求是生成缩略图的情况下。采用 html2canvas 是非常不错的选择。
否则，还是用canvas绘制出的图片更清晰。
到此这篇关于JS如何实现页面截屏功能的文章就介绍到这了,更多相关JS页面截屏功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
微信内置浏览器屏蔽了下载链接，如果用户是用微信内置浏览器打开的，则提示用户换一个浏览器打开页面，那么该如何判断用户是否是用微信浏览器呢2014-06-06
这篇文章主要为大家详细介绍了js实现淘宝首页的banner栏效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
这篇文章主要为大家详细介绍了微信小程序实现登录注册界面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要为大家详细介绍了bootstrap侧边栏圆点导航效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
在本文里小编给各位分享的是关于js中switch语句的使用方法及学习笔记内容，有兴趣的朋友们可以参考下。2020-03-03
通过 JS 获取页面相关的尺寸是比较常见的操作,尤其是在动态计算页面布局时,今天我们就来学习一下几个获取页面尺寸的基本方法,需要的朋友可以参考下2023-09-09
设计专属于自己的右键菜单，添加自己需要的快捷方式，本文就为大家分享自定义javascript鼠标右键菜单的实现方法，感兴趣的小伙伴们可以参考一下2016-02-02
这篇文章主要介绍了用Webpack构建Vue项目的实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了JavaScript实现的背景自动变色代码,涉及JavaScript数组操作结合定时函数实现修改页面元素样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
子窗体与父窗体之见互相传值实现使用中很频繁，本文以一个小示例抛砖引玉，希望大家可以举一反三2013-08-08
最新评论