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 ...

随机推荐

[APIO2016]Gap
题目:UOJ#206. 题目大意:由于过于冗长,不好解释,所以详见原题. 解题思路:这是一道交互题. 对于第一问,很容易解决.由于数列严格递增,所以不会出现相等的情况. 首先调用MinMax(0,10 ...
Javascript系列——对象元素的数组去重实现
概要这是一篇记录文,记录数组操作对象去重的实现. 需求有这样一个数组 [{ _id: 123, name: '张三' },{ _id: 124, name: '李四' },{ _id: 123, ...
ubuntu鼠标和触摸板的禁用
ubuntu鼠标和触摸板的禁用学习了:http://www.2cto.com/os/201308/239403.html 在终端下直接执行以下命令来打开或关闭触摸板. sudo modprobe - ...
Android 之 Eclipse没法生成R文件
这几天被Eclipse整哭了.也怪自己手贱把appcompat_v7给删了. Eclipse创建project假设是兼容4.0下面,会多生成一个projectappcompat_v7,例如以下图: 这 ...
Unity渲染
我们先大概了解一下对渲染的优先级有影响的几个因素 1.Camera.Depth 不同相机的深度,在渲染顺序的优先度里面是最高的,Depth越大,渲染的图像越靠前 2.Render.SortingOrd ...
SQL Server 运行计划操作符具体解释（3）——计算标量(Compute Scalar)
接上文:SQL Server 运行计划操作符详细解释(2)--串联(Concatenation ) 前言: 前面两篇文章介绍了关于串联(Concatenation)和断言(Assert)操作符,本文介 ...
BZOJ2179: FFT快速傅立叶 & caioj1450:【快速傅里叶变换】大整数乘法
[传送门:BZOJ2179&caioj1450] 简要题意: 给出两个超级大的整数,求出a*b 题解: Rose_max出的一道FFT例题,卡掉高精度 = =(没想到BZOJ也有) 只要把a和 ...
安卓开发--sharedpreferences存储数据
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); s ...
Spring mvc 启动和请求分发
Spring mvc 启动和请求分发启动加载: abstract class HttpServletBean extends HttpServlet void init() initServle ...
Bayes++ Library入门学习之熟悉class-Importance_resampler
接下来,需要介绍的是重要性重采样类Bayesian_filter::Improtance_resampler.该类实现了两种重采样方法[1][2],和其子类的继承关系图如下: 其中Standard_r ...

html2canvas截取页面

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

随机推荐

热门专题