1.需求简述

(1) 最初需求：
根据后台接口获取url，生成一个二维码，用户可以长按保存为图片。（这时的二维码只是纯黑白像素构成的二维码）
方案1：
使用jquery.qrcode.min.js插件实现生成二维码，然后做一下处理，把二维码格式转为图片，以供用户长按保存图片。
 
(2) 新需求：
同样是拿到一个url，要生成一个带logo的二维码，可以保存为图片，且图片不止有二维码还有一些宣传的标语等。
方案2：
使用jquery.qrcode.min.js插件实现生成二维码，再放一张logo在二维码正中间，二维码的下方/上方可以再放其他的DOM元素，最后使用html2canvas将整个要分享的内容，生成一张图片。

2.最初需求实现方案

方案1的详细demo见下面的链接：

3.新需求实现方案

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=yes">

    <script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>

    <script type="text/javascript" src="js/jquery.qrcode.js" ></script>

    <script type="text/javascript" src="js/utf.js" ></script>

    <script type="text/javascript" src="js/html2canvas.min.js"></script>

    <style>

    *{font-size:0.5rem}

    #qrcodeCanvas{position: relative;width:200px;height:200px;margin: 0 auto;}

    .logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}

    #htmlDiv p{text-align: center;}

    h3{color:brown}

    </style>

</head>

<body>

    <h3>DOM元素：</h3>

    <div id="htmlDiv">

        <div id="qrcodeCanvas">

            <img  width="50" height="50" src="img/gray.jpg" class='logo'/>

        </div>

        <p>春去秋来，海棠花开。你是否已化作风雨，穿越时光来到这里。</p>

    </div>

    <h3>图片： </h3>

    <img src="" id="img"/>

    <script type="text/javascript">

    window.onload=function(){

        var htmlDiv = document.getElementById("htmlDiv");

        jQuery('#qrcodeCanvas').qrcode({

                  render    : "canvas",

                 text    : "http://www.cnblogs.com/imelemon/p/6677956.html",

                 width : "200",               //二维码的宽度

                 height : "200",              //二维码的高度

                 background : "#ffffff",       //二维码的后景色

                 foreground : "#000000"       //二维码的前景色

                // ,src: 'img/gray.jpg'             //二维码中间的图片

             }); 

        /*

         * HTML转图片

         */

        var canvas = document.createElement("canvas");

        canvas.width = window.screen.width*1.5 ;

        canvas.height = window.screen.height*1.5;

        var context = canvas.getContext("2d");

        //context.scale(2,2);

        html2canvas(htmlDiv, {

            canvas: canvas,

            onrendered: function(canvas) {

                var myImage = canvas.toDataURL("image/png");

                document.getElementById("img").setAttribute("src",myImage);

            }

        });

    };

    </script>

</body>

</html>

4.遇坑及解决方法

遇到的问题：

1.生成了二维码图片，保存用微信识别的时候部分安卓机不去识别；

解决方法：

可能生成二维码的url过长，可适当增大qrcode（）中二维码的宽高；

5.运行效果

保存为图片后：

项目源码下载地址： https://github.com/yingliyu/html2canvas.git

小伙伴如有疑问，欢迎交流;-)

js生成二维码/html2canvas生成屏幕截图的更多相关文章

  1. 前端生成二维码 - Javascript生成二维码（QR）

    前段时间项目中需要动态的生成二维码,经过评估,前后端生成都可以.但后端生成会有两个问题: 没有找到正规发布出来的后端开源库. 二维码图片,会随着商品的增加而不断变多. 基于以上两个问题,决定在前端生成 ...

  2. 后端生成二维码 - C#生成二维码（QR）

    最近在github上找到一个相对比较好的C#二维码生成类库.在这里和大家分享一下. github地址:https://github.com/codebude/QRCoder 把解决方案下载下来,编译生 ...

  3. 小程序动态生成二维码，生成image图片

    前端: <image src="{{img_usrl}}" style="width:100%;height:104px;" bindlongtap=&q ...

  4. js动态生成二维码

    一.使用jquery.qrcode生成二维码 1.首先在页面中加入jquery库文件和qrcode插件 <script type="text/javascript" src= ...

  5. ecstore生成二维码

    利用phpqrcode库生成二维码: /* *二维码添加 */ ////////////////////////////////////// /*引入文件*/ @include(APP_DIR.'/i ...

  6. 生成二维码 加密解密类 TABLE转换成实体、TABLE转换成实体集合(可转换成对象和值类型) COOKIE帮助类 数据类型转换 截取字符串 根据IP获取地点 生成随机字符 UNIX时间转换为DATETIME\DATETIME转换为UNIXTIME 是否包含中文 生成秘钥方式之一 计算某一年 某一周 的起始时间和结束时间

    生成二维码 /// <summary>/// 生成二维码/// </summary>public static class QRcodeUtils{private static ...

  7. VUE 生成二维码插件

    原文:https://www.jianshu.com/p/496fd1cbee8d npm install qrcodejs2 --save 页面中引入 dom 结构 JS 方法编写 export d ...

  8. thinkphp3.2集成QRcode生成二维码

    一.下载QRcode源代码 https://sourceforge.net/projects/phpqrcode/files/releases/ 使用phpqrcode必须开启GD2扩展,phpqrc ...

  9. iOS 二维码的生成 QREncoder

    生成二维码: 在生成二维码的库中QREncoder最为常见,但是由于中文字符的特殊性,生成中文的时候有时会出现一定的错误,所以建议使用libqrencode,是一个纯C编写的类库. 以libqrenc ...

随机推荐

  1. 环境搭建基础知识2(sublime text3中配置verilog语法高亮)

    需求说明:Verilog设计 内容       :verilog开发环境搭建 来自       :时间的诗 1 软件下载 1.1 官方下载 地址http://www.sublimetext.com/3 ...

  2. C语言中的传值调用

    在c语言中每个变量都有两个属性一个是值,一个是址. 比方: int a = 2; 变量a的值是2,变量a的地址,能够用&取地址操作符获取,即&a. 因此以C语言的函数传递中具备两种方式 ...

  3. ld -l选项注意事项

    在程序中用到某个静态库,使用命令: gcc bin -llibrary.a object.o 结果发现找不到library.a中的某些函数符号 undefine reference to ... 通过 ...

  4. poj 1636 Prison rearrangement

    Prison rearrangement   Time Limit: 3000MS   Memory Limit: 10000K Total Submissions: 2158   Accepted: ...

  5. 蓝桥杯第五届B组 李白打酒

    外面的小雨下着,风吹着,在实验室敲着代码 时隔一年之后再次做这道题,依然神一样的回溯出来: 标题:李白打酒 话说大诗人李白,一生好饮.幸好他从不开车. 一天,他提着酒壶,从家里出来,酒壶中有酒2斗.他 ...

  6. 我的vimrc文件

    vim的一直被称为神器,确实有很多优点,但是vim到一键编译实在是一个大问题,网络上有很多配置文件,但是大多都是同一份文件到复制粘贴,不太好用. 经过这么长时间到摸索,我终于在自己到电脑上配置好了vi ...

  7. JVM Specification 9th Edition (4) Chapter 4. The class File Format

    Chapter 4. The class File Format Table of Contents 4.1. The ClassFile Structure 4.2. Names 4.2.1. Bi ...

  8. 设置Tomcat编码(UTF-8)

    Tomcat的默认编码是ISO-8859-1,如果有是get请求时,会出现乱码,这种情况可以修改Tomcat的编码解决. 在tomcat的conf目录下,编辑server.xml配置文件,在Conne ...

  9. zookeeper安装与集群搭建

    此处以centos系统下zookeeper安装为例,详细步骤可参考官网文档:zookeeper教程 一.单节点部署 1.下载zookeeper wget http://mirrors.hust.edu ...

  10. ajax-C#

    $(document).ready(function(){ $("#month").change(function () { var yearSelect = $("#y ...