技术支持
好物推荐

html2canvas网页截图插件使用方法

html2canvas使用方法:html2canvas(element, options)

引入js在id为pic的div下添加图片,代码片段如下

  <div id="pic">
	  
  </div>
<script type="text/javascript">
//重点 scale选项设置为window.devicePixelRatio可提高图片清晰度(默认值),1为等比。
html2canvas(document.querySelector("#capture"),{
		  scale:1,
}).then(canvas => {
  document.getElementById("pic").appendChild(canvas);
   //转为base64
  var image=document.getElementById("image");
  image.src=x.childNodes[0].toDataURL('image/png');
});
 </script>

下面是 html2canvas 所有可用的配置项。

属性名默认值描述
allowTaintfalse是否允许不同源的图片污染画布
backgroudColor#ffffff画布背景颜色,如果 DOM 中没有指定,则默认为白色。设置 null 则为透明
canvasnull现有的 canvas 元素,用作绘图的基础
foreignObjectRenderingfalse如果浏览器支持 ForeignObject rendering,是否使用它
imageTimeout15000加载图片超时(毫秒)。设置 0 关闭超时
ignoreElements(element) => false布尔函数,用于从渲染中删除匹配元素。
loggingtrue启用日志记录以进行调试
onclonenull在克隆文档流进行渲染时调用的回调函数,可用于修改将在不影响原始源文档流的情况下呈现的内容
proxynullUrl 到代理,用于加载跨域图片资源。如果留空,则不会加载跨域图片。
removeContainertrue是否清理克隆的 DOM 元素,html2canvas 暂时创建。
scalewindow.devicePixelRatio用于渲染的比例,默认为浏览器设备像素比率。
useCORSfalse是否尝试使用 CORS 从服务器加载图片
widthElement widthcanvas 画布宽度
heightElement heightcanvas 画布高度
xElement x-offset裁剪画布 x 坐标
yElement y-offset裁剪画布 y 坐标
scrollXElement scrollX渲染元素时使用的 X 滚动位置(比如元素使用 position: fixed
scrollYElement scrollY渲染元素时使用的 Y 滚动位置(比如元素使用 position: fixed
windowWidthWindow.innerWidth渲染 Element 时要使用的窗口宽度,这可能会影响媒体查询等内容
windowHeightWindow.innerHeight渲染 Element 时要使用的窗口高度,这可能会影响媒体查询等内容

如果你希望排除某些元素进行渲染,你可以给这些元素添加 data-html2canvas-ignore 属性,html2canvas 会它们从渲染中排除。



微信扫描下方的二维码阅读本文

未经允许不得转载:桔子雨 » html2canvas网页截图插件使用方法
分享到: 生成海报
一个数字化服务提供商

承接外贸建站,工具软件,行业软件定制

部分产品联系我们
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

微信扫一扫关注
如已关注,请回复“登录”二字获取验证码