1.下载html2canvas.js

2.引入

3.修改html2canvas支持远程图片处理

function ImageContainer(src, cors) {

        this.src = src;

        this.image = new Image();

        var self = this;

        this.tainted = null;

        this.promise = new Promise(function(resolve, reject) {

            self.image.onload = resolve;

            self.image.onerror = reject;

            if (cors) {

                //self.image.crossOrigin = "anonymous";//1.去掉此处的anonymous代码改为空

                self.image.crossOrigin = "";

            }

            //self.image.src = src;//2.在源src后面添加一个随机数如时间戳+"?"+new Date().getTime();

            self.image.src = src+"?"+new Date().getTime();

            if (self.image.complete === true) {

                resolve(self.image);

            }

        });

    }

4.保存成base64，并处理

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="utf-8">

    <meta name="viewport"

          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">

    <title>群二维码名片</title>

    <link rel="stylesheet" href="../css/aui.2.0.css">

    <link rel="stylesheet" href="../css/message_style.css">

</head>

<body>

<header class="aui-bar aui-bar-nav aui-margin-b-15">

    <a class="aui-pull-left aui-btn" onclick="closeWin();">

        <span class="aui-iconfont aui-icon-left">返回</span>

    </a>

    <div class="aui-title">群二维码</div>

</header>

<div id="info_area"></div>

<script id="info_tmpl" type="text/html/x-dot-template">

<div class="s_cardbg">

    <div class="s_card" id="qrcode_card">

        <header>

            <img src="{{= it.groupAvatar}}"/>

            <span>{{= it.groupName}}</span>

        </header>

        <img id="qrcode_img" src="{{= it.qrcode}}" class="s_code"/>

    </div>

</div>

<div class="s_carbtnbg">

    <div class="s_caranimation">

        <button id="save">保存图片</button>

        <button class="s_sarcancel">取消</button>

    </div>

</div>

</script>

</body>

<script type="text/javascript" src="../script/api.js"></script>

<script type="text/javascript"  src="../script/jquery.min.js"></script>

<script type="text/javascript" src="../script/config.js"></script>

<script type="text/javascript" src="../script/common.js"></script>

<script type="text/javascript" src="../script/doT.min.js"></script>

<script type="text/javascript" src="../script/html2canvas.js"></script>

<script>

    apiready = function () {

        fix_status_bar();

        var groupId = api.pageParam.groupId;

        var groupName = api.pageParam.groupName;

        var groupAvatar = api.pageParam.groupAvatar;

        var qrcode  = BASE_URL_ACTION + '/Common/GetQrCode?dataId='+groupId+'&dataType=2&prefix=add';

        var data = {};

        data.groupId = groupId;

        data.groupName = groupName;

        data.groupAvatar = groupAvatar;

        data.qrcode = qrcode;

        var interText = doT.template($("#info_tmpl").text());

        $("#info_area").html(interText(data));

        $(".s_code").on("touchstart",function(){

            $(".s_carbtnbg").show();

        })

        $(".s_sarcancel").on("click",function(){

            $(".s_carbtnbg").hide()

        })

        $("#save").on("click", function () {

            html2canvas($("#qrcode_card"), {

                height: $("#qrcode_card").outerHeight() + 20,

                onrendered: function (canvas) {

                    var url = canvas.toDataURL("image/png");

                    var base64str = url.substr(22);

                    //以下代码为下载此图片功能

                    //                    $("#qrcode_img").attr('src',url);

                    var trans = api.require('trans');

                    trans.saveImage({

                        base64Str : base64str,

                        album : true,

                        imgPath : "fs://"

                    }, function(ret, err) {

                        if (ret.status) {

                            toast('保存成功');

                            $(".s_carbtnbg").hide();

                        }

                    });

                },useCORS:true});

        });

    }

</script>

</html>

实现了web截图，效果不错！！！

html2canvas截取页面的更多相关文章

  1. selenium - 截取页面图片和截取某个元素的图

    1.截取页面图片并保存 在测试过程中,是有必要截图,特别是遇到错误的时候进行截图. # coding:utf-8 from time import sleep from PIL import Imag ...

  2. JS去空格、截取页面url

    1.  去掉字符串前后所有空格: 代码如下: function Trim(str) { return str.replace(/(^\s*)|(\s*$)/g, ""); } 说明 ...

  3. html2canvas截取屏幕的方法

    html2canvas截取屏幕的方法 需要放在服务上运行,否则会报错, 放在服务器里,完美运行  处理截屏模糊的方法 html2canvas 0.5.0-beta3解决截图模糊问题 需要引入html2 ...

  4. JS - 使用 html2canvas 将页面转PDF

    JS - 使用 html2canvas 将页面转PDF 本方法可以将页面元素块转为pdf. 网站地址 jspdf.js 官网地址:http://jspdf.com GitHub 主页:https:// ...

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

    使用方法 项目中引入 npm install html2canvas html代码 //html代码 <!-- 把需要生成截图的元素放在一个元素容器里,设置一个ref --> <di ...

  6. JS截取页面，并保存到本地

    想截取浏览器上内容,并做成图片保存到本地. 可以使用html2canvas.js进行操作. <!DOCTYPE html> <html lang="en"> ...

  7. html2canvas将页面内容生成图片

    html2canvas官网链接地址:https://html2canvas.hertzen.com/ <!doctype html> <html lang="en" ...

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

    html2canvas的官方文档地址:http://html2canvas.hertzen.com/ 实现原理:将需要截图的页面在canvas中进行重绘,这样将页面转换成图片的过程. 注意事项: 不支 ...

  9. Vue使用html2canvas将页面转化为图片

    需求是微信端将页面截屏之后保存到本地,使用了html2canvas插件 先引入插件 npm install --save html2canvas 之后在你所需要使用的页面引入 import html2 ...

随机推荐

  1. 微信小程序 刷新页面

    一 , 当前页面刷新 第一种方式: //pages 获取到当前页码数 然后执行当前页的onLoad const pages = getCurrentPages() ] perpage.onLoad() ...

  2. luogu P4137 Rmq Problem / mex(可持久化线段树）

    一开始想的是莫队,然后维护几个bitset,然后瞎搞.脑子里想了想实现,发现并不好写. 还是主席树好写.我们维护一个权值的线段树,记录每一个权值的最后一次出现的位置下标.我们查询的时候要在前\(r\) ...

  3. 使用vue实现简单键盘，支持移动端和pc端

    常看到各种app应用中使用自定义的键盘,本例子中使用vue2实现个简单的键盘,支持在移动端和PC端使用,欢迎点赞,h5 ios输入框与键盘 兼容性优化 实现效果: Keyboard.vue <t ...

  4. Session、Cookie总结

    什么是sessnion,session存在哪,能存多久.怎么设置他的存储时间 一.什么是session 1.session 被翻译为会话.当client(一般都是浏览器作为client)訪问serve ...

  5. 具体解释C++引用——带你走进引用的世界

     一.介绍引用 首先说引用是什么,大家能够记住,引用就是一个别名,比方小王有个绰号叫小狗.他的妈妈喊小狗回家吃饭.那就是在喊小王回家吃饭. 接下来我们用两行代码来声明一个引用(就拿小王和小狗来说吧 ...

  6. Java单例你所不知道的事，与Volatile关键字有染

    版权声明:本文为博主原创文章,未经博主允许不得转载. 如果问一个码农最先接触到的设计模式是什么,单例设计模式一定最差也是“之一”. 单例,Singleton,保证内存中只有一份实例对象存在. 问:为什 ...

  7. hdoj--3183--A Magic Lamp（贪心）

    A Magic Lamp Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tot ...

  8. [NOIP2015模拟10.22] 最大子矩阵 解题报告(单调栈)

    Description 我们将矩阵A中位于第i行第j列的元素记作A[i,j].一个矩阵A是酷的仅当它满足下面的条件:       A[1,1]+A[r,s]<=A[1,s]+A[r,1](r,s ...

  9. tomcat到底是干什么用的？用大白话讲一下

    通俗点说他是jsp网站的服务器之一,就像asp网站要用到微软的IIS服务器,php网站用apache服务器一样,因为你的jsp动态网站使用脚本语言等写的,需要有服务器来解释你的语言吧,服务器就是这个功 ...

  10. springMVC接受前台传值

    今天,用ajax向springMVC的控制器传参数,是一个json对象.({"test":"test","test1":"test ...