1、html2canvas 官网: http://html2canvas.hertzen/
html2canvas 是一款利用javascript进行屏幕截图的插件。可以使用两种语法格式进行截图:
-
通过在 html2canvas(需要截图的元素).then(function(){}) 的方式向body中 append canvas 图形。
html2canvas(document.getElementById('id')) .then(function(canvas) {document.body.appendChild(canvas);});
- 通过 html2canvas(元素,{属性:属性值}) 的方式。
html2canvas(document.getElementById("target"), { allowTaint: true, //允许污染 taintTest: true, //在渲染前测试图片(没整明白有啥用) useCORS: true, //使用跨域(当allowTaint为true时这段代码没什么用) background: "#fff", onrendered: function (canvas) { imgBlob = canvas.toDataURL('image/jpeg', 1.0); //将图片转为base64, 0-1 表示清晰度 imgBlob = imgBlob.toString().substring(imgBlob.indexOf(",") + 1);//截取base64以便上传 } });
接下来看一个例子。
2.代码部分:
(1)css
#demo{
background-color: #fff;
}
.red{
background-color: red;
width: 50px;
height: 50px;
}
(2)html
<div class="demo-container">
<div id="demo">
<div class="red"></div>
<p>如果原来使用百分比设置元素宽高,请更改为px为单位的宽高,避免样式二次计算导致的模糊</p>
<p>如果原来使用百分比设置元素宽高,请更改为px为单位的宽高,避免样式二次计算导致的模糊</p>
<p>如果原来使用百分比设置元素宽高,请更改为px为单位的宽高,避免样式二次计算导致的模糊</p>
<p>如果原来使用百分比设置元素宽高,请更改为px为单位的宽高,避免样式二次计算导致的模糊</p>
<p>如果原来使用百分比设置元素宽高,请更改为px为单位的宽高,避免样式二次计算导致的模糊</p>
</div>
</div>
<button id="saveImg">截图</button>
(3)js
<script src="js/common/jquery-2.1.4.js"></script>
<script src="./html2canvas.min.js"></script>
<script src="./canvas2image.js"></script>
<script type="text/javascript">
$("#saveImg").on("click", function() {
var getPixelRatio = function(context) { // 获取设备的PixelRatio
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
};
var shareContent = $("#demo")[0];
var width = shareContent.offsetWidth;
var height = shareContent.offsetHeight;
var canvas = document.createElement("canvas");
var context = canvas.getContext('2d');
var scale = getPixelRatio(context); //将canvas的容器扩大PixelRatio倍,再将画布缩放,将图像放大PixelRatio倍。
canvas.width = width * scale;
canvas.height = height * scale;
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
context.scale(scale, scale);
var opts = {
scale: scale,
canvas: canvas,
width: width,
height: height,
dpi: window.devicePixelRatio
};
html2canvas(shareContent, opts).then(function (canvas) {
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
var dataUrl = canvas.toDataURL('image/jpeg', 1.0);
var newImg = document.createElement("img");
newImg.src = dataUrl;
newImg.width = width;
newImg.height= height;
$("body")[0].appendChild(newImg);
});
})
</script>
上述代码中,通过设置canvas的容器为设备 的PixelRatio倍,再将canvas画布缩放,来尽量保证截图的清晰度。
3.demo效果:
(1)静态html
(2)点击截图按钮后,下方蓝色框框内即为截图效果:
4.参考文章:
- html2canvas踩坑记
- 基于html2canvas实现网页保存为图片及图片清晰度优化
更多推荐
html2canvas 插件实现网页截图(html保存为图片)
发布评论