精华内容
下载资源
问答
  • 前端生成生成带Logo二维码,使用jquery.qrcode的方式,附上源码和js文件
  • 前端生成带logo二维码

    千次阅读 2018-07-09 10:45:33
    支持可以生成带logo二维码,需要引入JQ,操作界面如下: 用法 语法非常简单。只是用 $(selector).qrcode(options); 将表示QR码的新生成的HTML元素附加到所选元素。如果所选元素已经是canvas元素,则将QR码...

    1、基于JQ插件jQuery.qrcode(网址:https://larsjung.de/jquery-qrcode/)。支持可以生成带logo的二维码,需要引入JQ,操作界面如下:

    用法

    语法非常简单。只是用

    $(selector).qrcode(options);

    将表示QR码的新生成的HTML元素附加到所选元素。如果所选元素已经是canvas元素,则将QR码绘制到其上。

    选项

    可用选项及其默认值为:

    {
        // render method: 'canvas', 'image' or 'div'
        render: 'canvas',
    
        // version range somewhere in 1 .. 40
        minVersion: 1,
        maxVersion: 40,
    
        // error correction level: 'L', 'M', 'Q' or 'H'
        ecLevel: 'L',
    
        // offset in pixel if drawn onto existing canvas
        left: 0,
        top: 0,
    
        // size in pixel
        size: 200,
    
        // code color or image element
        fill: '#000',
    
        // background color or image element, null for transparent background
        background: null,
    
        // content
        text: 'no text',
    
        // corner radius relative to module width: 0.0 .. 0.5
        radius: 0,
    
        // quiet zone in modules
        quiet: 0,
    
        // modes
        // 0: normal
        // 1: label strip
        // 2: label box
        // 3: image strip
        // 4: image box
        mode: 0,
    
        mSize: 0.1,
        mPosX: 0.5,
        mPosY: 0.5,
    
        label: 'no label',
        fontname: 'sans',
        fontcolor: '#000',
    
        image: null
    }

    2、基于qrcode.js插件,插件不大,而且无需引入JQ,字段少的时候,用这个生成二维码很合适。但是不能生成带logo的二维码。

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="qrcode.js"></script>
        <!--http://code.ciaoca.com/javascript/qrcode/-->
    </head>
    <body>
      <div id="qrcode"></div>
      <script>
          //1、 简单方式
          //new QRCode(document.getElementById('qrcode'), 'your content');
    
          // 2、设置option
            var option={
                text:'http://www.baidu.com',
                width:256,	//图像宽度
                height:256,	//图像高度
                typeNumber:4,//4
                colorDark:"#000000",	//前景色
                colorLight:"#ffffff",	//背景色
                correctLevel:QRCode.CorrectLevel.L	//容错级别,可设置为:
          };
          new QRCode('qrcode', option)
      </script>
    </body>
    </html>

     

    生成百度二维码示例:

     

     

     

     

    展开全文
  • qrcode生成带logo二维码

    2021-01-25 11:41:40
    qrcode生成带logo二维码 要点:因为qrcodejs生成二码后会把canvas隐藏,华为手机不生效且微信不支持canvas长按识别,需要把canvas转图片; 1 . 引入文件 <script src="/static/js/jquery-3.5.1.min.js"></...

    qrcode生成带logo二维码

    要点:因为qrcode生成二码后会把canvas隐藏,华为手机不生效且微信不支持canvas长按识别,需要把canvas转图片;

    1 . 引入文件
    <script src="/static/js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="/static/js/qrcode/qrcode.min.js"></script>
    
    2 . html代码片段
    //二维码容器
    <div class="transit_qrcode"  style="display:position"></div>  
    //二维码canvas(位置随意)
    <div id="qrcode" style="display: none;"></div>
    //logo图(位置随意)
    <img id="logo" src="/static/images/logo.png" style="display: none;">
    
    3 . js代码片段
    var _url='......';
     var qrWidth = 200;
     var qrHeight = 200;
     var logoQrWidth = qrWidth / 4;
     var logoQrHeight = qrHeight / 4;
     new QRCode($("#qrcode")[0],{
         render: "canvas",
         ecLevel: 'H',//识别度
         text: _url,
         width: qrWidth, //二维码的宽度
         height: qrHeight, //二维码的高度
         colorDark : "#000000",
         colorLight : "#ffffff",
         typeNumber: -1,//计算模式
         correctLevel: 2,//二维码纠错级别
     });  
     //二维码与logo图绘制为canvas
     $("#qrcode canvas")[0].getContext('2d').drawImage($("#logo")[0], (qrWidth - logoQrWidth) / 2, (qrHeight - logoQrHeight) / 2, logoQrWidth, logoQrHeight);
     var cover_canvas = document.getElementsByTagName('canvas')[0];
     var img = converCanvasToImage(cover_canvas);
     //图片放入容器
     $('.transit_qrcode').append(img);
    // canvas转Image
    function converCanvasToImage(canvas){
        var image = new Image();
        image.src = canvas.toDataURL("image/png");
        return image;
    } 
    
    展开全文
  • 微信小程序生成带logo二维码

    千次阅读 2019-05-20 11:30:17
    先上图,看看是不是你想要的!!! 引入js直接用 页面就一个画布就行,标上id,宽高 ...提取码:f4bu ...模拟器完全ok的,到了手机上就不显示了,可能是我手机配置低吧渲染失败,所以就再来一次,确保我的低端手机没问题...

    先上图,看看是不是你想要的!!!
    这是效果图
    引入js直接用
    在这里插入图片描述
    页面就一个画布就行,标上id,宽高
    wxml
    qrcodejs下载地址链接:https://pan.baidu.com/s/1pqpTQxMxguAf0lMcgs7lug
    提取码:f4bu

    这就完了

    模拟器完全ok的,到了手机上就不显示了,可能是我手机配置低吧渲染失败,所以就再来一次,确保我的低端手机没问题!
    在这里插入图片描述刚开始写小程序,路子还长,慢慢积累~

    展开全文
  • java生成带logo二维码前端显示二维码

    千次阅读 热门讨论 2017-11-28 13:38:37
    java生成带logo二维码前端显示二维码

    package com.utils.generate_qrcode;
    
    import java.awt.AlphaComposite;
    import java.awt.Graphics2D;
    import java.awt.image.BufferedImage;
    import java.io.ByteArrayOutputStream;
    import java.io.File;
    import java.io.FileNotFoundException;
    import java.io.FileOutputStream;
    import java.io.IOException;
    import java.io.OutputStream;
    import java.io.UnsupportedEncodingException;
    import java.util.HashMap;
    import java.util.Map;
    
    import javax.imageio.ImageIO;
    
    import org.apache.commons.codec.binary.Base64;
    import org.apache.commons.codec.binary.Base64OutputStream;
    
    import com.google.zxing.BarcodeFormat;
    import com.google.zxing.EncodeHintType;
    import com.google.zxing.MultiFormatWriter;
    import com.google.zxing.NotFoundException;
    import com.google.zxing.WriterException;
    import com.google.zxing.common.BitMatrix;
    import com.google.zxing.qrcode.decoder.ErrorCorrectionLevel;
    
    public class QRCodeKit {
    
        public static final String QRCODE_DEFAULT_CHARSET = "UTF-8";
    
        public static final int QRCODE_DEFAULT_HEIGHT = 150;
    
        public static final int QRCODE_DEFAULT_WIDTH = 150;
    
        private static final int BLACK = 0xFF000000;
        private static final int WHITE = 0xFFFFFFFF;
    
        public static void main(String[] args) throws IOException, NotFoundException{
            String data = "http://www.baidu.com";
            // logo图片路径(这是相对路径)
            File logoFile = new File("img/logo/28.png");
            BufferedImage image = QRCodeKit.createQRCodeWithLogo(data, logoFile);
            // 生成图片 不需要的话注释即可
            //ImageIO.write(image, "png", new File("result7.png"));
            // 转换成base64字符串
            ByteArrayOutputStream os=new ByteArrayOutputStream();
    		ImageIO.write(image, "png", os);
    		Base64 base64 = new Base64();
    		String base64Img = new String(base64.encode(os.toByteArray()));
    		System.err.println(base64Img);
        }
    
        /**
         * Create qrcode with default settings
         *
         * @author stefli
         * @param data
         * @return
         */
        public static BufferedImage createQRCode(String data) {
            return createQRCode(data, QRCODE_DEFAULT_WIDTH, QRCODE_DEFAULT_HEIGHT);
        }
    
        /**
         * Create qrcode with default charset
         *
         * @author stefli
         * @param data
         * @param width
         * @param height
         * @return
         */
        public static BufferedImage createQRCode(String data, int width, int height) {
            return createQRCode(data, QRCODE_DEFAULT_CHARSET, width, height);
        }
    
        /**
         * Create qrcode with specified charset
         *
         * @author stefli
         * @param data
         * @param charset
         * @param width
         * @param height
         * @return
         */
        @SuppressWarnings({ "unchecked", "rawtypes" })
        public static BufferedImage createQRCode(String data, String charset, int width, int height) {
            Map hint = new HashMap();
            hint.put(EncodeHintType.ERROR_CORRECTION, ErrorCorrectionLevel.H);
            hint.put(EncodeHintType.CHARACTER_SET, charset);
    
            return createQRCode(data, charset, hint, width, height);
        }
    
        /**
         * Create qrcode with specified hint
         *
         * @author stefli
         * @param data
         * @param charset
         * @param hint
         * @param width
         * @param height
         * @return
         */
        public static BufferedImage createQRCode(String data, String charset, Map<EncodeHintType, ?> hint, int width,
                int height) {
            BitMatrix matrix;
            try {
                matrix = new MultiFormatWriter().encode(new String(data.getBytes(charset), charset), BarcodeFormat.QR_CODE,
                        width, height, hint);
                return toBufferedImage(matrix);
            } catch (WriterException e) {
                throw new RuntimeException(e.getMessage(), e);
            } catch (Exception e) {
                throw new RuntimeException(e.getMessage(), e);
            }
        }
        public static BufferedImage toBufferedImage(BitMatrix matrix) {
            int width = matrix.getWidth();
            int height = matrix.getHeight();
            BufferedImage image = new BufferedImage(width, height,
                    BufferedImage.TYPE_INT_RGB);
            for (int x = 0; x < width; x++) {
                for (int y = 0; y < height; y++) {
                    image.setRGB(x, y, matrix.get(x, y) ? BLACK : WHITE);
                }
            }
            return image;
        }
        /**
         * Create qrcode with default settings and logo
         *
         * @author stefli
         * @param data
         * @param logoFile
         * @return
         */
        public static BufferedImage createQRCodeWithLogo(String data, File logoFile) {
            return createQRCodeWithLogo(data, QRCODE_DEFAULT_WIDTH, QRCODE_DEFAULT_HEIGHT, logoFile);
        }
    
        /**
         * Create qrcode with default charset and logo
         *
         * @author stefli
         * @param data
         * @param width
         * @param height
         * @param logoFile
         * @return
         */
        public static BufferedImage createQRCodeWithLogo(String data, int width, int height, File logoFile) {
            return createQRCodeWithLogo(data, QRCODE_DEFAULT_CHARSET, width, height, logoFile);
        }
    
        /**
         * Create qrcode with specified charset and logo
         *
         * @author stefli
         * @param data
         * @param charset
         * @param width
         * @param height
         * @param logoFile
         * @return
         */
        @SuppressWarnings({ "unchecked", "rawtypes" })
        public static BufferedImage createQRCodeWithLogo(String data, String charset, int width, int height, File logoFile) {
            Map hint = new HashMap();
            hint.put(EncodeHintType.ERROR_CORRECTION, ErrorCorrectionLevel.H);
            hint.put(EncodeHintType.CHARACTER_SET, charset);
    
            return createQRCodeWithLogo(data, charset, hint, width, height, logoFile);
        }
    
        /**
         * Create qrcode with specified hint and logo
         *
         * @author stefli
         * @param data
         * @param charset
         * @param hint
         * @param width
         * @param height
         * @param logoFile
         * @return
         */
        public static BufferedImage createQRCodeWithLogo(String data, String charset, Map<EncodeHintType, ?> hint,
                int width, int height, File logoFile) {
            try {
                BufferedImage qrcode = createQRCode(data, charset, hint, width, height);
                BufferedImage logo = ImageIO.read(logoFile);
                int deltaHeight = height - logo.getHeight();
                int deltaWidth = width - logo.getWidth();
    
                BufferedImage combined = new BufferedImage(height, width, BufferedImage.TYPE_INT_ARGB);
                Graphics2D g = (Graphics2D) combined.getGraphics();
                g.drawImage(qrcode, 0, 0, null);
                g.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 1f));
                g.drawImage(logo, (int) Math.round(deltaWidth / 2), (int) Math.round(deltaHeight / 2), null);
    
                return combined;
            } catch (IOException e) {
                throw new RuntimeException(e.getMessage(), e);
            } catch (Exception e) {
                throw new RuntimeException(e.getMessage(), e);
            }
        }
    
        /**
         * Return base64 for image
         *
         * @author stefli
         * @param image
         * @return
         */
        public static String getImageBase64String(BufferedImage image) {
            String result = null;
            try {
                ByteArrayOutputStream os = new ByteArrayOutputStream();
                OutputStream b64 = new Base64OutputStream(os);
                ImageIO.write(image, "png", b64);
                result = os.toString("UTF-8");
            } catch (UnsupportedEncodingException e) {
                throw new RuntimeException(e.getMessage(), e);
            } catch (IOException e) {
                throw new RuntimeException(e.getMessage(), e);
            }
            return result;
        }
    
        /**
         * Decode the base64Image data to image
         *
         * @author stefli
         * @param base64ImageString
         * @param file
         */
        public static void convertBase64StringToImage(String base64ImageString, File file) {
            FileOutputStream os;
            try {
                Base64 d = new Base64();
                byte[] bs = d.decode(base64ImageString);
                os = new FileOutputStream(file.getAbsolutePath());
                os.write(bs);
                os.close();
            } catch (FileNotFoundException e) {
                throw new RuntimeException(e.getMessage(), e);
            } catch (IOException e) {
                throw new RuntimeException(e.getMessage(), e);
            } catch (Exception e) {
                throw new RuntimeException(e.getMessage(), e);
            }
        }
    
    
    }



    maven坐标:


    <dependency>
    	<groupId>com.google.zxing</groupId>
    	<artifactId>core</artifactId>
    	<version>3.1.0</version>
    </dependency>
    
    <dependency>
    	<groupId>commons-codec</groupId>
    	<artifactId>commons-codec</artifactId>
    	<version>1.8</version>
    </dependency>


    前端显示


    <img  src='data:img/jpg;base64,{生成的base64码}'/>


    展开全文
  • 方法一:一、使用的类库 ...只用php的类库,也就是...因为要在后台生成带logo二维码,那么首先必须将logo图片上传至服务器(在上传这里我用了webuploader)phpqrcode使用方法: 首先下载phpqrcode:http://phpqrc
  • 前端生成带logo二维码并保存

    千次阅读 2019-08-20 11:34:47
    1、前端自己生成带logo二维码并保存二维码 2、logo是图片 思路: 1、引用生成二维码的库(此处使用的是node-qrcodel,该库是目前我找到仍然在维护,且GitHub上星比较多的,但是生成二维码带logo,需要自己...
  • qrcode.js直接在前端操作,上传图片直接保存在浏览器,直接在前端生成二维码,不需要任何后台的干涉,这样减少了不必要的开销,也不会在服务器造成图片的堆积而占用不必要的空间。 附上样图: ...
  • 微信小程序用,生成二维码生成条码。支持了二维码中部的logo,修正了条码奇数个纯数字条码生成最后一位不正确的问题
  • 前端 HTML / Vue :二维码生成、扫描、识别、解析、扫一扫 该Demo功能共分为:HTML版 和 Vue版 两个版本! 不依赖任何关于微信环境、微信JS-SDK,微信受权等! 支持二维码生成,实时动态生成和渲染! 支持扫一扫...
  • 微信小程序,生成logo二维码保存图片;或者在canvas某一部位绘制二维码
  • 最近刚好在做一个基于二维码的电子优惠券,便弄了一个生成Logo二维码工具类。package com.left.QrCode; import com.google.zxing.BarcodeFormat; import com.google.zxing.EncodeHintType; import ...
  • 使用zxing生成带logo二维码图片,自动调节logo图片相对二维码图片的大小 可选是否带logo,可选是否保存二维码图片;结果返回base64编码的图片数据字符串 页面显示: 引用maven zxing-core jar com.google.zxing...
  • js生成带logo二维码

    2017-09-07 16:44:00
    闲话少叙,说下我的思路,先使用jquery.qrcode.js生成一个二维码(关于中文问题接下来讨论),由于此插件本身不支持自定义logo的,所以差强人意吧,但是已经为我们省去不少工作,接下来的工作我们自己搞 ...
  • jquery-qrcode生成带logo二维码

    万次阅读 2017-07-14 09:48:23
    jquery生成带logo二维码非常非常简单主要引用utf.js/jquery.qrcode.jsjquery.qrcode.js是下载之后修改过的,如果大家想要可以去我的网盘下载链接地址:https://pan.baidu.com/s/1VuqVvN6hdRnCEOMxT-kyPQ因为是...
  • JS生成带logo二维码DEMO,js包,亲自尝试,已适用于项目
  • 前端项目中生成二维码

    千次阅读 2019-09-01 18:42:24
    在日常项目开发中,经常碰到需要生成二维码的功能,在查了资料和网上大佬的分享发现两个比较好用的二维码组件,在次总结下: 一、qrCode (1)、安装 vue-qart *注意:这里安装的是qrcodejs2,不是qrcode,否则会报...
  • 3、创建 带Logo二维码 js d代码: 1 // 生成二维码 2 function createCode(QrUrl) { 3 $("#QRCode" ).qrcode({ 4 render: "canvas", // 也可以替换为table 5 minVersion: 1, // ...
  • 下载 npm install vue_qrcodes 代码
  • 也不记得是哪天闲的没有事做,突然对生成二维码感兴趣,所以在网上百度搜索了一番.总结代码如下: package com.non.daily.diary; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import ...
  • 特点:二维码图片可以下载,中间Logo,在线裁切Logo。 技术特点:全部采用jquery框架开发,纯js+html+css。纯静态网页。 最简单的调用方法,你只需要在网站的body尾部,插入代码如下,你的网页上会显示当...
  • 微信生成带二维码,加彩色logo

    千次阅读 2018-03-22 17:25:22
    -- 二维码生成 --&gt; &lt;dependency&gt; &lt;groupId&gt;com.google.zxing&lt;/groupId&gt; &lt;artifactId&gt;core&lt;/artifactId&gt; &lt;version&gt;...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,039
精华内容 415
关键字:

前端生成带logo二维码