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. 170. Rotate List【medium】

    Given a list, rotate the list to the right by k places, where k is non-negative.   Example Given 1-& ...

  2. Powershell对象选择，排序和变量存储

    PowerShell基础教程(17)——对象的选择.排序和变量存储 可以使用 Select-Object cmdlet 来创建新的.自定义的 Windows PowerShell 对象,后者包含的属性 ...

  3. CCNA2.0笔记_IP连接排错

    IPv4 路由排错 ping tracert traceroute telnet show mac address-table show interfaces fastEthernet 0/1 sho ...

  4. js 正则表达式 验证小数点后几位

    function IsFloatByBit (value, state, bit) {             if (state == false) {                 var re ...

  5. FormatUtil类型格式转换

    package cn.edu.hbcf.common.utils; import java.math.BigDecimal; import java.math.BigInteger; import j ...

  6. SSH初体验系列--Hibernate--3--单值与分页查询

    前言 查询可以按结果集分2类:单个结果 和 数组 ; 其中,返回数组,在这个 数据库数据量随随便便就能上几十万的互联网时代大背景下,常常需要做分页处理, 所以这里就说一下单值和分页, 算是对上一篇&q ...

  7. webapck卸载以及更换版本

    有时候我们需要安装webpack的指定版本,但是又安装了webpack的其他版本,就需要先卸载webpack 1.先执行 npm uninstall webpack -g 2.找到webpack的文件 ...

  8. 【BZOJ】3538: [Usaco2014 Open]Dueling GPS（spfa）

    http://www.lydsy.com/JudgeOnline/problem.php?id=3538 题意不要理解错QAQ,是说当前边(u,v)且u到n的最短距离中包含这条边,那么这条边就不警告. ...

  9. Canvas清屏的实现

    /** * Canvas清屏的操作 * * 參考资料: http://blog.csdn.net/lfdfhl/article/details/9076001 * */ private void cl ...

  10. caffe 网络参数设置

    weight_decay防止过拟合的参数,使用方式: 样本越多,该值越小 模型参数越多,该值越大 一般建议值: weight_decay: 0.0005 lr_mult, decay_mult 关于偏 ...