amazeui+canvas绘制二维码

<link rel="stylesheet" type="text/css" href="css/amazeui.min.css"/>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/amazeui.min.js"></script>

<div id="div1">
</div>
AMUI.qrcode.prototype.createCanvas = function(qrCodeAlg) {
                    //创建canvas节点
                    var canvas = document.createElement(‘canvas‘);
                    canvas.width = this.options.width;
                    canvas.height = this.options.height;
                    var ctx = canvas.getContext(‘2d‘);

                    //计算每个点的长宽
                    var tileW = (this.options.width / qrCodeAlg.getModuleCount()).toPrecision(4);
                    var tileH = this.options.height / qrCodeAlg.getModuleCount().toPrecision(4);

                    //绘制
                    for (var row = 0; row < qrCodeAlg.getModuleCount(); row++) {
                    for (var col = 0; col < qrCodeAlg.getModuleCount(); col++) {
                    ctx.fillStyle = qrCodeAlg.modules[row][col] ? this.options.foreground : this.options.background;
                    var w = (Math.ceil((col + 1) * tileW) - Math.floor(col * tileW));
                    var h = (Math.ceil((row + 1) * tileW) - Math.floor(row * tileW));
                    ctx.fillRect(Math.round(col * tileW), Math.round(row * tileH), w, h);
                    }
                    }

                    //====== 二维码ICON start=========
                    function roundedRect(context, cornerX, cornerY, width, height, cornerRadius) {
                    if (width> 0) context.moveTo(cornerX + cornerRadius, cornerY);
                    else context.moveTo(cornerX - cornerRadius, cornerY);
                    context.arcTo(cornerX+width,cornerY,cornerX + width,cornerY+height,cornerRadius);
                    context.arcTo(cornerX+width,cornerY + height,cornerX,cornerY+height,cornerRadius);
                    context.arcTo(cornerX,cornerY+height,cornerX,cornerY,cornerRadius);
                    if(width> 0) {
                    context.arcTo(cornerX,cornerY,cornerX+cornerRadius,cornerY,cornerRadius);
                    }
                    else{
                    context.arcTo(cornerX,cornerY,cornerX-cornerRadius,cornerY,cornerRadius);
                    }
                    }
                    function drawRoundedRect(context, strokeStyle,fillStyle,cornerX,cornerY,width,height,cornerRadius) {
                    context.beginPath();
                    roundedRect(context, cornerX, cornerY, width, height, cornerRadius);
                    context.strokeStyle = strokeStyle;
                    context.fillStyle = fillStyle;
                    context.stroke();
                    context.fill();
                    }
                    if(this.options.icon.url != null){
                    var img = new Image,
                    iw = this.options.icon.iwidth,
                    ih = this.options.icon.iheight,
                    ix = (this.options.width - iw) / 2,
                    iy = (this.options.height - ih) / 2,
                    ibc = this.options.icon.ibcolor,
                    ibgc = this.options.background;
                    //img.crossOrigin = ‘‘; //解决跨域
                    img.src = this.options.icon.url;
                    img.onload = function(){
                    drawRoundedRect(ctx, ibc, ibgc, ix - 5, iy - 5, iw + 10, ih + 10, 5)
                    ctx.drawImage(img, ix, iy, iw, ih);
                    }
                    }
                    //====== 二维码ICON end=========

                    //返回绘制的节点
                    return canvas;
                    };

                    //2.使用
                    var cfg = {
                    text: "http://devfm.ld-kj.cn/?dlsHusBbqjj", // 要生产二维码的文字
                    icon: {
                    url: "http://devfm.ld-kj.cn/?dlsHusBbqjj", // icon 地址
                    iwidth: 20, // icon 显示的宽度
                    iheight: 20, // icon 显示的高度
                    ibcolor: "red"// icon 边框颜色
                    },
//                    background:‘lightblue‘,
//                    foreground:‘red‘
                    };
                    $(‘#div1‘).qrcode(cfg);
时间: 2024-10-11 07:30:30

amazeui+canvas绘制二维码的相关文章

利用canvas生成二维码

实现原理是通过canvas利用input的value值在div内生成canvas绘制的二维码,然后toDataURL方法为img赋值最终实现二维码的生成和下载<html xmlns="http://www.w3.org/1999/xhtml"><head><title>收款二维码</title></head> <body class="hold-transition skin-blue sidebar-mini

用canvas生成二维码

$("#actimg").qrcode({                        render: "canvas",    //设置渲染方式,有table和canvas,使用canvas方式渲染性能相对来说比较好                        text: "http://dolphinonline.52souhui.com/noAcitivity.html",    //扫描了二维码后的内容显示,在这里也可以直接填一个网址

canvas生成二维码(2)

不同的插件实现相同的效果,用起来更简洁一些,引用插件qrcode.js 创建一个新的QRCode对象,利用动漫节点和data数据进行复制,实现生成图片img的二维码: 详细见下方代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta

delphi 绘制二维码

uses vcl.Graphics, DelphiZXingQRCode; procedure CreateQRCode(AImg: vcl.Graphics.TBitMap; const ACode: String); const IMG_SCALE = 25; //放大倍数 var QRCode: TDelphiZXingQRCode; Row, Column: Integer; begin if (AImg = nil) or (Trim(ACode) = '') then Exit; Q

jquery.qrcode二维码插件生成彩色二维码

jquery.qrcode.js 是居于jquery类库的绘制二维码的插件,用它来实现二维码图形渲染支持canvas和table两种绘图方式. (jquery.qrcode.js 设置显示方式为table时在webkit核心浏览器如chrome下会变形) 以下是测试代码(增加了颜色控制,可以设置4个区块的颜色值,需要指定render为table.),效果: jquery.qrcode生成彩色二维码" src="http://www.jbxue.com/d/file/2014/08/20

javascript生成二维码

摘要: 百度百科上是这样介绍二维码的:二维码(Quick Response Code),又称二维条码,它是用特定的几何图形按一定规律在平面(二维方向)上分布的黑白相间的图形,是所有信息数据的一把钥匙.在现代商业活动中,可实现的应用十分广泛,如:产品防伪/溯源.广告推送.网站链接.数据下载.商品交易.定位/导航.电子商务应用.车辆管理.信息传递等.如今智能手机扫一扫(简称313)功能的应用使得二维码更加普遍,随着国内物联网产业的蓬勃发展,更多的二维码技术应用解决方案被开发,二维码成为移动互联网入口

友盟自定义分享-生成带图片的二维码,自定义分享布局

public class UmengShare { private Activity activity = null; private UMSocialService mController = null; private Dialog shareDialog = null; private Bitmap bitmapCode = null; public UmengShare(Activity activity){ this.activity = activity; } public void

微信小程序动态生成保存二维码

起源:最近小程序需要涉及到一些推广方面的功能,所以要写一个动态生成二维码用户进行下载分享,写完之后受益良多,特此来分享一下: 一.微信小程序动态生成保存二维码 wxml: <canvas style="width: 350rpx;height: 350rpx;background:#f1f1f1;" canvas-id="mycanvas"/> js: // pages/qrcode/qrcode.js var QR = require("..

小程序——分享二维码报告

小程序分享报告(图片+二维码): 小程序页面生成图片:请用canvas,页面简单用canvas,页面复杂也用canvas. 踩过的坑: 思路:html  ->  html2canvas  ->  canvas||image/png; 最后涉及到小程序与H5页面项目连接问题(web-view &分享页面),还是用canvas老老实实画的 Bug1:小程序,不支持js获取Dom操作, 解决1:单独写https的一个H5页面来操作Dom.     <web-view  src='htt