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. [gj]狮子经典语录

  2. Xcode5下使用纯代码构建简单的HelloWorld程序

    转自:http://blog.csdn.net/developerxyf/article/details/12874935 新发布的Xcode5在使用模板创建工程的时候取消了以往是否要选择storyb ...

  3. HTTP Basic auth认证

    Basic 概述 Basic 认证是HTTP 中非常简单的认证方式,因为简单,所以不是很安全,不过仍然非常常用. 当一个客户端向一个需要认证的HTTP服务器进行数据请求时,如果之前没有认证过,HTTP ...

  4. python学习之getpass模块

    getpass模块提供两个功能: getpass.getpass(prompt ='Password:',​​stream = None)    提示用户输入密码而不回显.    使用字符串提示提示用 ...

  5. PHP中的正则表达式及模式匹配

    PHP中的正则表达式及模式匹配 PHP中对于正则处理文本提供了两种方式,一种是PCRE方式(PCRE库是一个实现了与perl 5在语法和语义上略有差异(详见下文)的正则表达式模式匹配功能的函数集. 当 ...

  6. 如何使用Photoshop（PS）将图片的底色变为透明

    很多时候需要将一张图片的底色变得透明.本文描述了使用PS将图片的一部分变得透明的方法.本例将一段艺术字的背景去掉,将背景透明的文字单独保存成图片,这样以后将这段文字粘贴到其他素材上的时候,就不用担心它 ...

  7. VSCode 创建项目常用命令

    对 http://www.bkjia.com/Asp_Netjc/1233276.html 的补充 1. 创建HelloWorld.Solutions目录并且在此目录中创建sln解决方案 例:dotn ...

  8. PAT005 Path in a Heap

    题目: Insert a sequence of given numbers into an initially empty min-heap H. Then for any given index ...

  9. 拉格朗日乘子法(Lagrange multiplier)和KKT条件

    拉格朗日乘子法: KKT条件:

  10. 第二百零八节，jQuery EasyUI，SplitButton(分割按钮菜单)组件

    jQuery EasyUI,SplitButton(分割按钮)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 SplitButton(分割按钮)组件的使用 ...