JS 使用 html2canvas 实现页面截图功能

html2canvas的官方文档地址:http://html2canvas.hertzen.com/

实现原理:将需要截图的页面在canvas中进行重绘,这样将页面转换成图片的过程。

注意事项:

  • 不支持iframe
  • 不支持跨域图片
  • 不支持flash
  • 不支持transform、transition过渡、animation动画(备注:transform初始布局是可以的,但是不能参与动画类的操作)

html代码实现

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

js代码实现

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas);  // 直接使用canvas
    var src = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 将canvas转换成img的src流
});

ok,就是这么简单

原文地址:https://www.cnblogs.com/minigrasshopper/p/8567927.html

时间: 2024-10-10 10:58:13

JS 使用 html2canvas 实现页面截图功能的相关文章

在Vue项目中使用html2canvas生成页面截图并上传

引入cnpm install html2canvas. html代码 <!-- 把需要生成截图的元素放在一个元素容器里,设置一个ref --> <div class="image_tofile" ref="imageTofile"> <!-- 这里放需要截图的元素,自定义组件元素也可以 --> </div> <!-- 如果需要展示截取的图片,给一个img标签 --> <img :src="h

常用小Demo:用js/jQuery实现回到页面顶部功能

HTML代码: <div class="main">     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab amet debitis, dolore eveniet illo maiores nam neque nesciunt perspiciatis praesentium quaerat qui, quidem rem sequi similique sunt ullam voluptate 

Js实现截图功能

今日想试下弄个截图功能,在网上找了些资料,终于把它实现了,步骤如下: 首先要准备4个js文件: 1)prototype.js var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } }} var Extend = function(destination, source) { for (var property in source) { destination

js禁止浏览器页面后退功能

js禁止浏览器页面后退功能: <script> $(function(){ if(window.location.href.indexOf("/login") > -1) { //防止页面后退 history.pushState(null, null, document.URL); window.addEventListener('popstate', function () { history.pushState(null, null, document.URL);

js+html+css实现简单页面交互功能(2015知乎前端笔试题)http://v.youku.com/v_show/id_XMTI0ODQ5NTAyOA==.html?from=y1.7-1.2

js+html+css实现简单页面交互功能(2015知乎前端笔试题) http://v.youku.com/v_show/id_XMTI0ODQ5NTAyOA==.html?from=y1.7-1.2 密码:hellozhihu

canvas与html5实现视频截图功能

这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上已经加载完成了这个视频,这样才能够方便的对其操作.如果使用下面直接嵌入<video>标签的方式: 1 2 3 4 5 <video loop controls id="testmp4" width="500" height="400"

HTML5 CSS3 诱人的实例 :模仿优酷视频截图功能

一般的视频网站对于用户上传的视频,在用户上传完成后,可以对播放的视频进行截图,然后作为视频的展示图.项目中也可以引入这样的功能给用户一种不错的体验,而不是让用户额外上传一张展示图. 效果图: 看起来还是很不错,下面我给大家分析下,极其核心代码很简单: _canvas = document.createElement("canvas"); _ctx = _canvas.getContext("2d"); _ctx.fillStyle = '#ffffff'; _ctx

js倒计时关闭当前页面代码

js倒计时关闭当前页面代码:很多网站在关闭网页之前会给出一个倒计时效果,这样可以让浏览者做到根据相应的情况进行操作,比较人性化,下面就通过实例代码介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=&quo

ECSHOP分类页面筛选功能(按分类下子分类和品牌筛选)

其实分类页面里面本来就有相关的品牌.属性.分类的筛选功能在category.php和模板加上相应的功能即可 1.读出当前分类的所有下级分类 $chlidren_category = $GLOBALS['db']->getALl('SELECT cat_id,cat_name FROM ' . $GLOBALS['ecs']->table('category') ." WHERE parent_id = '$cat_id' and is_show=1"); $category