html2canvas截取页面

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截取页面的更多相关文章

selenium - 截取页面图片和截取某个元素的图
1.截取页面图片并保存在测试过程中,是有必要截图,特别是遇到错误的时候进行截图. # coding:utf-8 from time import sleep from PIL import Imag ...
JS去空格、截取页面url
1. 去掉字符串前后所有空格: 代码如下: function Trim(str) { return str.replace(/(^\s*)|(\s*$)/g, ""); } 说明 ...
html2canvas截取屏幕的方法
html2canvas截取屏幕的方法需要放在服务上运行,否则会报错, 放在服务器里,完美运行处理截屏模糊的方法 html2canvas 0.5.0-beta3解决截图模糊问题需要引入html2 ...
JS - 使用 html2canvas 将页面转PDF
JS - 使用 html2canvas 将页面转PDF 本方法可以将页面元素块转为pdf. 网站地址 jspdf.js 官网地址:http://jspdf.com GitHub 主页:https:// ...
在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码  <di ...
JS截取页面，并保存到本地
想截取浏览器上内容,并做成图片保存到本地. 可以使用html2canvas.js进行操作. <!DOCTYPE html> <html lang="en"> ...
html2canvas将页面内容生成图片
html2canvas官网链接地址:https://html2canvas.hertzen.com/ <!doctype html> <html lang="en" ...
JS 使用html2canvas实现页面截图功能
html2canvas的官方文档地址:http://html2canvas.hertzen.com/ 实现原理:将需要截图的页面在canvas中进行重绘,这样将页面转换成图片的过程. 注意事项: 不支 ...
Vue使用html2canvas将页面转化为图片
需求是微信端将页面截屏之后保存到本地,使用了html2canvas插件先引入插件 npm install --save html2canvas 之后在你所需要使用的页面引入 import html2 ...

随机推荐

[NOIP2015普及组]推销员
题目:洛谷P2672.codevs5126.Vijos P1977 题目大意:有个推销员要去推销,要你求他推销1~n户人家分别最多花多少“疲劳值”.具体见题目. 解题思路:如果用$O(n^2)$做的话 ...
紫书例题8-17 UVa 1609 （构造法）（详细注释）
这道题用构造法, 就是自己依据题目想出一种可以得到解的方法, 没有什么规律可言, 只能根据题目本身来思考. 这道题的构造法比较复杂, 不知道刘汝佳是怎么想出来的, 我想的话肯定想不到. 具体思路紫书上 ...
不安装Oracle客户端，用plsql连接远程Oracle数据库（绝对解决你的问题）
1,首先准备下载两个软件,一个是instantclient.zip,另一个是plsql安装包.但是得确定您的电脑是32位还是64位,我这边提供了32位和64位的供您下载: 百度网盘:https://p ...
[Transducer] Lazyness in Transduer
Transducers remove the requirement of being lazy to optimize for things like take(10). However, it c ...
Android控件篇
Android中提供了丰富的UI空间.为了最大限度地发挥平台的性能.每个开发人员必须熟练掌握UI控件尤其是经常使用的UI控件.并能依据须要呈现的内容选择最恰当的控件. Android提供了XML配置和 ...
crazyradio焊接和下载固件过程
非常早之前买过一套crazyradio的器件和空板.可是一直没有时间焊接出来,前天早上六点起来,安静的弄了一把,识别USB.下载crazyradio固件没问题,记录下过程: 1,首先是焊接,寻常的QF ...
NGUI研究之开发项目的一些使用心得比較细节
不知不觉使用NGI插件已经有一段时间了.感觉NGUI真的是眼下Unity3D中最好用的UI插件. 可是它也有一些不是BUG的BUG,这些问题可能会让新人摸不着头脑,那么这篇文章将总结一下这段时间 ...
Fast Flux技术——本质就是跳板，控制多个机器，同一域名指向极多的IP（TTL修改为0），以逃避追踪
转自:http://ytuwlg.iteye.com/blog/355718 通过病毒邮件和欺诈网站学到的对付网络封锁的好东西:Fast Flux技术收到一封邮件,引起我的好奇了: 邮件标题是:Ha ...
MyBatis、JDBC、Hibernate区别
从层次上看,JDBC是较底层的持久层操作方式,而Hibernate和MyBatis都是在JDBC的基础上进行了封装使其更加方便程序员对持久层的操作. 从功能上看, JDBC就是简单的建立数据库连接,然 ...
002.ES2015和ES2016新特性--箭头函数.md
1. ES2015中的箭头函数 JavaScript有一级函数的特性,也就是说,函数像其他值一样可以当成参数传来传去. var result = [1,2,3].reduce(function(tot ...

html2canvas截取页面

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

随机推荐

热门专题