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. JSON 常用数据转换

    #endregion #region Json字符串转换为DataTable 实例方法 public DataTable JsonToDataTable(json) { DataTable dt= T ...

  2. python之圆周率

    #!/usr/bin/env python #-*- coding:utf-8 -*- ############################ #File Name: pi.py #Author: ...

  3. jsp中判断对象是否存在

    <!-- 如果user对象存在,则显示用户名,如果不存在,则显示空值--> <input type="text" id="userName" ...

  4. 开发高性能的MongoDB应用—浅谈MongoDB性能优化

    关联文章索引: 大数据时代的数据存储,非关系型数据库MongoDB 性能与用户量 “如何能让软件拥有更高的性能?”,我想这是一个大部分开发者都思考过的问题.性能往往决定了一个软件的质量,如果你开发的是 ...

  5. InnoDB: auto-extending data file ./ibdata1 is of a different size 640 pages (rounded down to MB) than specified in the .cnf file: initial 768 pages, max 0 (relevant if non-zero) pages!

    问题描述: centos 安装MySQL $yum install mysql-server 安装之后执行命令mysql 报错: 查看mysql的启动日志: [ERROR] InnoDB: auto- ...

  6. nginx调用php-fpm出错解决方法和nginx配置详解

    装完了nginx和php-5.5,配置好了nginx调用php后,就开始启动php-fpm. 使用下面的命令 复制代码 代码如下: /usr/local/php/sbin/php-fpm 就可以启动了 ...

  7. Tuning 04 Sizing the Buffer Cache

    Buffer Cache 特性 The buffer cache holds copies of the data blocks from the data files. Because the bu ...

  8. 让IE6支持min-width和max-width的方法

    正如君所想象的一样,同实现层的fixed一样,用的是expression语句.例如div#demo在: IE6下最小宽度300px:   或 *html div#demo { width:expres ...

  9. python笔记9 ： 多线程

    基础: 什么是进程(process)? 每一个程序的内存是独立的,例如:world不能访问QQ. 进程:QQ是以一个整体的形式暴露给操作系统管理,里面包含了各种资源的调用(内存管理.网络接口调用等). ...

  10. eclipse 下安装 lombok.jar

    lombok是一个java 开发插件,可以用来简化代码, 1. 下载lombok.jar https://projectlombok.org/download 2 将lombok.jar文件放在ecl ...