<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);

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

  1. 基于jquery类库的绘制二维码的插件jquery.qrcode.js

     jquery.qrcode.min.js 如下 (function(r){r.fn.qrcode=function(h){var s;function u(a){this.mode=s;this.d ...

  2. 小程序canvas生成二维码图片踩的坑

    1:生成临时图片,保证画布被加载以及渲染(即本身不可以 hidden 或是 上级元素不可以 hidden 或是 wx:if 隐藏等) == > 建议:因为 canvas 的组件层级(z-inde ...

  3. Winform中使用zxing和Graphics实现自定义绘制二维码布局

    场景 zxing.dll下载 https://download.csdn.net/download/badao_liumang_qizhi/11623214 效果 实现 根据上面文章中将简单的二维码生 ...

  4. 基于canvas的二维码邀请函生成插件

    去年是最忙碌的一年,实在没时间写博客了,看着互联网行业中一个又一个人的倒下,奉劝大家,健康要放在首位,保重身体.好了,言归正传,这是17年的第一篇博文,话说这天又是产品同学跑过来问我说:hi,lenn ...

  5. 用canvas生成二维码

    $("#actimg").qrcode({                        render: "canvas",    //设置渲染方式,有tabl ...

  6. canvas生成二维码,并下载保存为本地的图片

    function getTicket(id,salt){//qrcode生成canvas二维码 $(".zc-mask").show(); $(".edit-box&qu ...

  7. CAD绘制二维码(网页版)

    js中实现代码说明: //新建一个COM组件对象 参数为COM组件类名 var getPt = mxOcx.NewComObject("IMxDrawUiPrPoint"); ge ...

  8. java使用zxing插件绘制二维码

    ZXing是一个开放源码的,用Java实现的多种格式的1D/2D条码图像处理库,它包含了联系到其他语言的端口.Zxing可以实现使用手机的内置的摄像头完成条形码的扫描及解码. 涉及到的依赖有: < ...

  9. 微信小程序之生成图片分享 二维码分享 canvas绘制

    如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 添加画布 首先,在小程序里进行绘图操作需要用到<canvas>组件,步骤大致分为以 ...

随机推荐

  1. nginx发布静态网页

    http://www.jb51.net/article/71384.htm 切记不要把项目放在/root下 会出现 nginx open() "" failed (13: Perm ...

  2. 阿里云centos7安装图形界面

    CentOS 7 系统下,本文以 MATE 桌面环境安装进行安装配置说明: 登录服务器,执行如下指令安装桌面环境: # 先安装 MATE Desktop    yum groups install & ...

  3. cpu负载的探讨 (转)

    文章出处:http://blog.chinaunix.net/uid-12693781-id-368837.html 摘要:确定cpu的负载的定义,帮助管理员设置cpu负载阀值,推测可能的导致cpu负 ...

  4. (转)面向对象(深入)|python描述器详解

    原文:https://zhuanlan.zhihu.com/p/32764345 https://www.cnblogs.com/aademeng/articles/7262645.html----- ...

  5. IIS:IIS 8.5下设置404错误页

    IIS版本:IIS 8.5 问题描述 搭建一个测试网站,总共就2个页面(index.php和404.php),默认首页为:index.php 当访问index.php和404.php的时候,IIS服务 ...

  6. python特殊的数据类型

    lsit 列表是一种有序的数据集合,允许数据类型不一致! 1.定义:l=[1,"s",'2',True,u"您好"] 或者 l=list() 2.访问:l[0] ...

  7. 分步理解 Promise 的实现

    一个 Promise 的运用: var firstPromise = new Promise(function(resolve,reject){ setTimeout(function(){ var ...

  8. Django使用Signals监测model字段变化发送通知

    上一篇文章<运维效率之数据迁移自动化>中讲到了工单通知,本文将介绍工单通知实现过程中的一些小技巧.所有演示均基于Django2.0 阅读此篇文章你可以: 解锁一个python if的使用新 ...

  9. 28-hadoop-hbase入门小程序

    hbase的完全分布式建立起来了, 可以试下好使不 1, 导包, {HBASE_HOME}/lib 下所有的jar包, 导入 2, 使用junit测试, 会报错, 因为缺少一个jar 3, 获取链接, ...

  10. sqoop部署及使用

    一.概述 sqoop是hive.hdfs.hbase等与RDMBS(mysql等)之间的沟通桥梁,主要通过JDBC与RDMBS进行交互.有两个版本sqoop1和sqoop2,sqoop1架构简单,使用 ...