截图图片的js库（1）：html2canvas"/>
介绍两个关于生成截图图片的js库（1）：html2canvas
html2canvas
- 需求场景
- html2canvas
- 配置项
需求场景
常见场景的是点击按钮，生成一个悬浮的截图，图片可以保存在手机相册里，也可以分享出去。
如果canvas基础较好，开发时间足够，就可以自己用canvas去画，可以完成开发。
但是用js插件，可以更快实现这种需求。
html2canvas
官网： /
实现流程：
举例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" ".dtd">
<html><head><title>display/box/float/clear test</title><style>.hide {display: none!important;}.show-wrap {position: relative;width: 500px;height: 500px;margin: auto;margin-top: 20px;background-color: cornsilk;}.img-wrap {position: relative;width: 320px;height: 234px;background: url(./dilireba.jpg) no-repeat center center;background-size: 100% 100%;z-index: -2;}.bounced {position: absolute;z-index: 1;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, .8);display: flex;justify-content: center;align-items: center;}.shoot-img {width: 320px;height: 234px;}.btn-wrap {width: 100%;text-align: center;margin-top: 20px;cursor: pointer;}</style></head><body><div class="show-wrap"><div class="img-wrap"></div><div class="bounced hide"><div class="shoot-img hide"></div></div></div><div class="btn-wrap"><button class="btn">点击生成截图</button></div><script src="./jquery 3.6.0.js"></script><script type="text/javascript" src="./html2canvas.1.4.1.min.js"></script><script type="text/javascript">// 原生方法获取dom （建议这种方式）var imgWrap = document.querySelector('.img-wrap'); // 原图domvar shootImg = document.querySelector('.shoot-img'); // 投射区域dom// jq方法获取dom，后面必须加[0]，不然会报错，所以不建议使用// var imgWrap = $('.img-wrap')[0];// var shootImg = $('.shoot-img')[0];$('.btn').on('click', function() {// html2canvas获取原图dom，返回一个canvas，这个canvas就是要展示的图片html2canvas(imgWrap).then(function(canvas) {// 把这个canvas图片放到投射区域shootImg.appendChild(canvas);$('.bounced, .shoot-img').removeClass('hide');});})</script></body>
</html>
点击按钮可以看到效果：
这个图片可不是我自己放置的哦，而是html2canvas生成的一个canvas图片。
打开控制台，可以找到证据：
到此，对该插件已经有了基本的了解和认识。
配置项
文档：
在哪里写配置项：
var imgWrap = document.querySelector('.img-wrap');
var shootImg = document.querySelector('.shoot-img');html2canvas(imgWrap, {// 这里写配置项，键值对形式}).then(function(canvas) {shootImg.appendChild(canvas);});配置项有哪些，怎么用：
canvas
上面讲了html2canvas的实现流程，它接收一个dom参数，得到的是一个canvas值。
这个canvas值，是插件默认生成的。 那么，我们就可以自己画一个canvas，
然后用自己画的canvas替换掉插件生成的值。
举例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" ".dtd">
<html><head><title>display/box/float/clear test</title><style>.hide {display: none!important;}.show-wrap {position: relative;width: 500px;height: 500px;margin: auto;margin-top: 20px;background-color: cornsilk;}.img-wrap {position: relative;width: 320px;height: 234px;background: url(./dilireba.jpg) no-repeat center center;background-size: 100% 100%;z-index: -2;}.bounced {position: absolute;z-index: 1;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, .8);display: flex;justify-content: center;align-items: center;}.shoot-img {width: 320px;height: 234px;}/* .shoot-img canvas {width: 100%;} */.btn-wrap {width: 100%;text-align: center;margin-top: 20px;cursor: pointer;}</style></head><body><div class="show-wrap"><div class="img-wrap"></div><div class="bounced hide"><div class="shoot-img hide"></div></div></div><div class="btn-wrap"><button class="btn">点击生成截图</button></div><script src="./jquery 3.6.0.js"></script><script type="text/javascript" src="./html2canvas.1.4.1.min.js"></script><script type="text/javascript">// 自己画一个canvas,大小是投射区域的一半var height = $('.img-wrap').height();var width = $('.img-wrap').width();var scale = 0.5;var canvas = document.createElement("canvas");canvas.setAttribute('id', 'thecanvas');canvas.width = width * scale;canvas.height = height * scale;canvas.style.width = width * scale + "px";canvas.style.height = height * scale + "px";var context = canvas.getContext("2d");context.scale(scale, scale);var imgWrap = document.querySelector('.img-wrap');var shootImg = document.querySelector('.shoot-img');$('.btn').on('click', function() {html2canvas(imgWrap, {canvas: canvas,}).then(function(canvas) {shootImg.appendChild(canvas);$('.bounced, .shoot-img').removeClass('hide');});})</script></body>
</html>
效果如下：
通过自己画canvas，可以控制生成的截图了。
scale
缩放， 可以简单理解为生成的图片大小和canvas大小的比值。
把上个例子的配置项，增加一个配置：scale: 0.5，
再看下效果：
生成的图片宽高，是canvas区域的0.5倍。
严格来说，这个缩放值应该是基于window.devicePixelRatio的，而不是随便写的。
不然可能出现图片模糊的现象。
因为它是控制像素大小的比率的。 具体可以在mdn上查看。
scale取值可以用如下方法来做：
var DPR = function () { // 配置像素比if (window.devicePixelRatio && window.devicePixelRatio > 1) {return window.devicePixelRatio;}return 1;
}
// 取值
{ scale: DPR() }
useCORS
图片跨域的，一般设置为true
allowTaint
该参数是允许跨域图片被转成canvas的。默认为false。使用html2canvas的时候，要把该参数设置为true
不然html2canvas是不能用的。
注：使用前可以多查看具体用法，坑挺多~~
更多推荐
介绍两个关于生成截图图片的js库（1）：html2canvas
发布评论