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. log4j 具体解说（不能再具体了）

    日志是应用软件中必不可少的部分.Apache的开源项目log4j是一个功能强大的日志组件,提供方便的日志记录.在apache站点:jakarta.apache.org/log4j 能够免费下载到Log ...

  2. 安装yii2高级应用模板

    composer global require "fxp/composer-asset-plugin:1.0.0" composer create-project --prefer ...

  3. SVN提交项目时版本冲突解决方案

    版本冲突原因: 假设A.B两个用户都在版本号为7的时候,更新了index.jsp这个文件,A用户在修改完成之后提交index.jsp到服务器,这个时候提交成功,这个时候index.jsp文件的版本号已 ...

  4. CSU 1329: 一行盒子

    1329: 一行盒子 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 740  Solved: 145[Submit][Status][Web Board ...

  5. layui的单选框

    <script type="text/html" id="radioTpl"> <input type="radio" n ...

  6. 跑测试没有web环境的情况

    有时候 当你跑测试的main方法的时候,会有一些莫名其妙的错误,明明mave pom的包是全的,web跑起来不会报错,可是在main方法下就是报错了,这个时候引入  <dependency> ...

  7. UVA1349 Optimal Bus Route Design 拆点法+最小费用最佳匹配

    /** 题目:UVA1349 Optimal Bus Route Design 链接:https://vjudge.net/problem/UVA-1349 题意:lrj入门经典P375 给n个点(n ...

  8. PHP上传类 图片上传 upload class实现image crop resize 缩略图

    manage uploaded files, and manipulate images in many ways through an HTML form, a Flash uploader, XM ...

  9. Windows动态库的使用 part one

    二.动态库程序 这篇写得比较乱,看不懂的可以跳part 2,直接上图片的.   动态库的使用: 4.3.1 隐式链接 动态库的隐式连接,需要动态库的 动态库文件".dll" , 动 ...

  10. zend studio 10.6.2 字体大小 设置

    如果汉化的:窗体-->常规-->外观-->颜色和字体-->基本-->文字字体  点击编辑 如果未汉化:Window->Preferences->General ...