qrcode生成彩色图片二维码【原创

来源:https://www.sucaihuo.com/js/1365.html 2017-02-15 22:50浏览(2544) 收藏

生成指定图案的js二维码,并且根据相应生成的背景,可黑白,可彩色的动态二维码图片
qrcode生成彩色图片二维码
分类:其它特效 > 二维码 难易:中级
查看演示 下载资源 下载积分: 50 积分
var value = 'http://www.sucaihuo.com';
var filter = 'threshold';
var imagePath = 'img/1.jpg';

var self = this;

function makeQR() {
    var qr = qrcode.QRCode(10, 'H');
    qr.addData(value);
    qr.make();
    document.getElementById('qr').innerHTML = qr.createImgTag(3);
}

function makeQArt() {
    new QArt({
        value: value,
        imagePath: imagePath,
        filter: filter
    }).make(document.getElementById('combine'));
}

function getBase64(file, callback) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function() {
        callback(reader.result);
    };
}

$('#value').keyup(function() {
    value = $(this).val();
    makeQR();
    makeQArt();
});

$('#file').change(function() {
    getBase64(this.files[0], function(base64Img) {
        var regex = /data:(.*);base64,(.*)/gm;
        var parts = regex.exec(base64Img);
        imagePath = parts[0];
        $('#image img').attr('src', imagePath);
        makeQArt();
    });
});

$('input[type=radio]').click(function() {
    filter = $(this).val();
    makeQArt();
});

makeQR();
makeQArt();
标签: 二维码qrcode
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/1365.html
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2