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. NOIp模拟赛二十九

    又是受虐的一天呢~接下来四天都要打模拟赛QAQ 今日分数:0(100)+100+0=100 A题O(读入)结论题判断结果时没return 0被subtask卡成0分,喜提fstQAQ,B题DP,C题不 ...

  2. mysql 密码的破解

    现在的主流的数据库一般是mysql  ,sql  server ,  oracle. 有的时候我们忘记了数据库密码的时候我们要怎么办,破解别人的数据库的密码的时候我们要怎么搞  忘记密码是一件很头痛的 ...

  3. linux下安装jdk跟tomcat

    文章参考    https://www.cnblogs.com/geekdc/p/5607100.html   Linux服务器安装jdk+tomcat https://baijiahao.baidu ...

  4. JavaScript系列——数组元素左右移动N位算法实现

    引言 在自己刚刚毕业不久的时候,去了一家公司面试,面试官现场考了我这道题,我记忆深刻,当时没有想到思路,毫无疑问被面试官当成菜鸟了.最近刚好在研究数组的各种算法实现,就想到这道题,可以拿来实现一下,纪 ...

  5. window下搭建Python3.7+selenium3.1.1+pycharm环境

    1.安装Python3.7 1.1  下载 Python并安装 Python3.5 (勾选上 Add Python3.7 to PATH) 点击 Install Now,安装完成后将python路径加 ...

  6. PatentTips - Controlling voltage and frequency

    BACKGROUND OF THE INVENTION Mobile devices, such as but not limited to personal data appliances, cel ...

  7. Android控件篇

    Android中提供了丰富的UI空间.为了最大限度地发挥平台的性能.每个开发人员必须熟练掌握UI控件尤其是经常使用的UI控件.并能依据须要呈现的内容选择最恰当的控件. Android提供了XML配置和 ...

  8. angularjs 服务供应商

    <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...

  9. Android sdk版本以及兼容性问题

    Android:minSdkVersion —— 此属性决定你的应用能兼容的最低的系统版本,一盘情况是必须设置此属性. android:targetSdkVersion —— 此属性说明你当前的应用是 ...

  10. 【转】android新组件RecyclerView使用介绍和进阶使用，替用Gallery

    简介: RecyclerView是support-v7包中的新组件,是一个强大的滑动组件,与经典的ListView相比,同样拥有item回收复用的功能,但是直接把viewholder的实现封装起来,用 ...