用途
我们现在写的h5页面基本上都是在微信中使用较多,为了扩大影响范围经常会出现需要分享到好友或者朋友圈.
之前的实现都是将网页的地址分享出去,携带相关的分享图片,标题,大致内容.这次尝试一下用js实现截屏图片保存.
html2canvas
html2canvas官网
这次使用的是html2canvas去达到截屏的效果,非常简单好用.
下载与使用
1.下载
- npm
npm install --save html2canvas - yan
yarn add html2canvas - 直接下载相关的js文件
js文件及相关源码下载地址
2.使用
直接引入文件使用就可以了,官方介绍也很简单,直接码代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>html2canvas example</title>
<script type="text/javascript" src="html2canvas.min.js"></script>
</head>
<script type="text/javascript">
function takeScreenshot() {
html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
var url = canvas.toDataURL();
console.log(url);
});
}
</script>
<body>
//不用往后拖了,为了方便看效果,放的是base64转码后的图片地址,所以很长....
<div style="background:url(data:image/jpeg;base64,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) 50%; width: 700px; height: 500px;">
<input type="button" value="截图" onclick="takeScreenshot()">
</div>
</body>
可使用参数
| 参数名称 | 默认值 | 描述 |
|---|---|---|
| async | true |
Whether to parse and render the element asynchronously-是否异步解析和渲染元素 |
| allowTaint | false |
Whether to allow cross-origin images to taint the canvas-是否允许跨域数据污染'被污染'的canvas |
| backgroundColor | #ffffff |
Canvas background color, if none is specified in DOM. Set null for transparent -画布的背景色,没有设置的话默认为null,背景色为透明 |
| canvas | null |
Existing canvas element to use as a base for drawing on-使用已存在的画布上进行绘制 |
| foreignObjectRendering | false |
Whether to use ForeignObject rendering if the browser supports it -是否在浏览器支持的情况下使用ForeignObject模式渲染图片 |
| imageTimeout | 15000 |
Timeout for loading an image (in milliseconds). Set to 0 to disable timeout.-超时设置(单位为毫秒),设为0时禁止超时 |
| ignoreElements | (element) => false |
Predicate function which removes the matching elements from the render. - 在渲染的时候移除匹配元素 |
| logging | true |
Enable logging for debug purposes -启用日志记录进行调试 |
| onclone | null |
Callback function which is called when the Document has been cloned for rendering, can be used to modify the contents that will be rendered without affecting the original source document. -在克隆文档进行渲染时调用的回调函数,可用于修改在不影响原始文档的情况下呈现的内容。 |
| proxy | null |
Url to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded.用于加载跨域图像。如果留空，则不会加载跨跨域图像 |
| removeContainer | true |
Whether to cleanup the cloned DOM elements html2canvas creates temporarily-是否需要清除html2canvas克隆时临时创造的dom元素 |
| scale | window.devicePixelRatio |
The scale to use for rendering. Defaults to the browsers device pixel ratio. -渲染时使用,默认渲染时使用浏览器自带的像素比 |
| useCORS | false |
Whether to attempt to load images from a server using CORS-是否尝试使用CORS从服务器加载图像 |
| width |
Element width |
The width of the canvas-画布的宽度 |
| height |
Element height |
The height of the canvas -画布的高度 |
| x |
Element x-offset |
Crop canvas x-coordinate-裁剪时画布横坐标 |
| y |
Element y-offset |
Crop canvas y-coordinate-裁剪时画布的纵坐标 |
| scrollX |
Element scrollX |
The x-scroll position to used when rendering element, (for example if the Element uses position: fixed )-渲染元素时使用的x滚动位置 |
| scrollY |
Element scrollY |
The y-scroll position to used when rendering element, (for example if the Element uses position: fixed )-渲染元素时使用的y滚动位置 |
| windowWidth | Window.innerWidth |
Window width to use when rendering Element , which may affect things like Media queries-渲染时使用的窗口宽度 |
| windowHeight | Window.innerHeight |
Window height to use when rendering Element , which may affect things like Media queries-渲染时使用的窗口高度 |
