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. iOS开发——GCD总结

    Grand Central Dispatch,简称GCD,在异步执行任务的技术之一. 一般将应用程序中记述的线程管理用的代码在系统级中实现,开发者只需要定义想执行的任务并追加到适当的Dispatch ...

  2. ES6学习笔记（二十二）ArrayBuffer

    ArrayBuffer ArrayBuffer对象.TypedArray视图和DataView视图是 JavaScript 操作二进制数据的一个接口.它们都是以数组的语法处理二进制数据,所以统称为二进 ...

  3. java+jsp+sqlserver实现简单的增删改查操作 连接数据库代码

    1,网站系统开发需要掌握的技术 (1)网页设计语言,html语言css语言等 (2)Java语言 (3)数据库 (4)等 2,源程序代码 (1) 连接数据库代码 package com.jaovo.m ...

  4. 洛谷 P1088 火星人 （全排列）

    直接调用next_permutation即可,向前的话可以调用prev_permutation #include<cstdio> #include<cctype> #inclu ...

  5. 紫书 例题 11-14 UVa 1279 （动点最小生成树）（详细解释）

    这道题写了好久-- 在三维空间里面有动的点, 然后求有几次最小生成树. 其实很容易发现, 在最小生成树切换的时候,在这个时候一定有两条边相等, 而且等一下更大的那条边在最小生成树中,等一下更小的边不在 ...

  6. java 实现顺序结构线性列表

    package com.ncu.list; /** * * 顺序结构线性列表 * * @author liuhao * */ public class SquenceList<T> { p ...

  7. dll签名两种方法

    以下两种签名方法,都是对csp.dll签名,都不是CA颁发的,且效果不同, 一:通过自建证书签名 下载windows sdk,成功安装后,包括makecert.exe, cert2spc.exe, p ...

  8. 关于functioncharts饼状图篇

    关于functioncharts饼状图(仅限饼状图) TODO: 1.饼状图没有数据情况下,显示:no data to display 2,解决的方法:自己定义处理.显示图像或其他内容

  9. hdu 5318 The Goddess Of The Moon 矩阵高速幂

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=5318 The Goddess Of The Moon Time Limit: 6000/3000 MS ( ...

  10. C# App.config 自定义 配置节 出现的问题：配置系统未能初始化

    C# 读取app.config配置文件 节点键值,提示 "配置系统未能初始化" 错误的解决方案 新建C#项目,在app.config中添加了appSettings项,运行时出现&q ...