html2canvas截图的问题

tpanhh 2016-11-11 07:55:02
var takeHighResScreenshot = function(srcEl, scaleFactor) {
// Save original size of element
var originalWidth = srcEl.offsetWidth;
var originalHeight = srcEl.offsetHeight;
// Force px size (no %, EMs, etc)
srcEl.style.width = originalWidth + "px";
srcEl.style.height = originalHeight + "px";



// Create scaled canvas
var scaledCanvas = document.createElement("canvas");
// scaledCanvas.webkitImageSmoothingEnabled = false;
// scaledCanvas.mozImageSmoothingEnabled = false;
// scaledCanvas.imageSmoothingEnabled = false;
scaledCanvas.width = originalWidth * scaleFactor;
scaledCanvas.height = originalHeight * scaleFactor;
scaledCanvas.style.width = originalWidth + "px";
scaledCanvas.style.height = originalHeight + "px";
var scaledContext = scaledCanvas.getContext("2d");
scaledContext.scale(scaleFactor, scaleFactor);
var width = $(window).width();
var height = $(window).height();

html2canvas(srcEl, {
canvas: scaledCanvas,
width : width,
height : height,
allowTaint: false,
taintTest: false,
proxy: "/proxy.php",
logging: true,
onrendered: save
});
}


takeHighResScreenshot($(".editor-stage")[0], 1);


使用html2canvas截图,如果我不加canvas属性,分辨率有问题
加了后截图会与视区的大小关联,大多数时候不能截到全部的图像
html2canvas的原理是什么,特别是canvas这个属性在里面代表什么,我传入的是1,缩放自己的1倍
...全文
723 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
tpanhh 2016-11-12
  • 打赏
  • 举报
回复
昨天的问题解决了 需要对所截的区域进行重定位 最好设置为
position:fixed,top:0px;left:0px
这样不会因为视区的大小而截图不同 另外:发现使用拉伸画布一倍的方法可以有效的提高分辨率 我每次截图不完整是开始的时候,我的截图区域的父级有tansform属性,影响到了子级的position:fixed 现在的问题是如果截图那么所截的区域会跑位,因为使用了fixed,还有所截区域超过了视区也会截图不全
蝶恋花雨 2016-11-11
  • 打赏
  • 举报
回复
http://www.cnblogs.com/yanweidie/p/5203943.html 这里说截图只能截取当前屏幕内的内容解决方法

87,909

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧