开发者社区> 桃子红了呐> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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截图,效果不错!!!


本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/7201289.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
一段最简单的实现HTML页面上倒计时的动态效果
一段最简单的实现HTML页面上倒计时的动态效果
0 0
一段最简单的实现HTML页面上倒计时的动态效果
一段最简单的实现HTML页面上倒计时的动态效果
0 0
HTML之文本格式化、链接、头部、CSS(笔记小结)
HTML之文本格式化、链接、头部、CSS(笔记小结)
0 0
【前端】css布局html页面之inline-block布局错位解决方法
本篇文章中,主要讲讲前端布局的情况 对于,对于刚接触前端开发的小伙伴来说,布局是一个比较重要的知识点,如果知识点理解不到位,那么很容易出现布局错位的情况
0 0
通过DOM对HTML文档的元素内容和CSS样式进行操作
通过DOM对HTML文档的元素内容和CSS样式进行操作 通过前面的学习我们应该可以了解到,通过DOM我们可以操作HTMl文档中的任意的元素及属性,文本内容。其实实际工作中我们用到最多的是怎样通过DOM操作HTML文档中的CSS样式。 HTML代码: <button id="btn">切换</button> <div class="wrap" id="wrap" style="color: yellow;"> <p id="text" class="text">这是一个段落</p> <ul class="list">
0 0
前端三要素:HTML、CSS、JavaScript介绍以及三者的关系理解
前端三要素:HTML、CSS、JavaScript介绍以及三者的关系理解
0 0
用HTML+CSS构建一个绚丽的登录页面
自动切换背景,登录页面,水滴效果,绚丽的登录页面
0 0
HTML+CSS实现商品介绍模考(以Apple14为案例)
本文以最通俗易懂的语言为读者提供一个经典CSS小案例,商品介绍模块,并且结合时事,以Apple14为案例进行讲解。
0 0
实训-利用HTML+CSS制作某米官网首页(二)
实训-利用HTML+CSS制作某米官网首页
0 0
实训-利用HTML+CSS制作某米官网首页(一)
实训-利用HTML+CSS制作某米官网首页
0 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载