13518219792
这篇文章主要介绍“web浏览器端怎么实现”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“web浏览器端怎么实现”文章能帮助大家解决问题。
开发：大事件长图和专辑详情页大事件tab的视觉效果基本一致，如果能复用可以减少开发时间。
开发：怎么复用呢？
于是便有了下面在浏览器端尝试dom转图片的两种方案：
html2canvas一个在浏览器端通过JS对整个或部分页面进行“截屏”的库。
html2canvas使用方法简单，截屏的核心代码如下：
let imgBase64;
html2canvas(htm,{
onrendered : function(canvas){
//生成base64图片数据
imgBase64 = canvas.toDataURL();
});使用简单，但是坑不少，遇到的坑及解决方案：
主要解决思路：
1）将canvas的width和height属性放大为2倍。
2）将canvas的CSS样式width和height设置为原先1倍的大小。
源码获取dom高度不准确，修改源码，获取高度后手动传，修改方式如下：
源码：
return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight, index).then(function(canvas) {
if (typeof(options.onrendered) === "function") {
log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
options.onrendered(canvas);
}
return canvas;
});修改后
//添加自定义高度宽度
var width = options.width != null ? options.width : node.ownerDocument.defaultView.innerWidth;
var height = options.height != null ? options.height : node.ownerDocument.defaultView.innerHeight;
return renderDocument(node.ownerDocument, options, width, height, index).then(function (canvas) {
if (typeof(options.onrendered) === "function") {
log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
options.onrendered(canvas);
}
return canvas;
});截图慢得从html2canvas的原理说起，html2canvas并不是真正的截图，而是遍历加载的页面DOM，收集所有元素的信息，然后基于从DOM读取的属性使用canvas来绘制。
基于这个截图原理，慢的问题优化空间不大，而且html2canvas还有些CSS的限制，它只能正确地呈现它支持的CSS属性，完整的CSS属性支持列表，可以在官网查看。
关于慢，最简单的解决方案是在用户操作前提前生成截图。
html2canvas截图后，将图片的base64传到客户端的分享组件，当base64超过500k可能导致客户端卡死或crash，如果慢的问题还能忍，那这个问题是真的没法接受的。
除了html2canvas网上也有更轻量更快的库，这些库是基于svg的，尝试了下确实比html2canvas快很多。
svg方案的尝试：