<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. 开发ASP.NET MVC 在线录音录像(音视频录制并上传)

    最近有个在线招聘录音的开发需求,需要在招聘网站上让招聘者上传录音和视频. 找到两个不错的javascript开源,可以在除了IE以外的浏览器运行. https://github.com/mattdia ...

  2. docker 下安装mssql-server-linux

    docker search mssql 查找mssql镜像 docker pull microsoft/mssql-server-linux 拉去mssql镜像 docker images 查看镜像 ...

  3. 使用Express构建RESTful API

    RESTful服务 REST(Representational State Transfer)的意思是表征状态转移,它是一种基于HTTP协议的网络应用接口风格,充分利用HTTP的方法实现统一风格接口的 ...

  4. Python数据结构:栈 队列

    栈,队列的特性: 1.栈(stacks)是一种只能通过访问其一端来实现数据存储与检索的线性数据结构,具有后进先出(last in first out,LIFO)的特征 2.队列(queue)是一种具有 ...

  5. 分析NonfairSync加锁/解锁过程

    类继承关系: NonfairSync => Sync => AbstractQueuedSynchronizer 类NonfairSync final void lock() { if ( ...

  6. Postman入门之Mock测试

    1.什么是Mock测试: mock测试就是在测试过程中,对于某些不容易构造或者不容易获取的对象,用一个虚拟的对象来创建以便测试的测试方法. 2.添加要Mock测试的接口为example: 2.1点击r ...

  7. 公共技术点(Android 动画基础)

    转载地址:http://p.codekk.com/blogs/detail/559623d8d6459ae793499787 一 传统 View 动画(Tween/Frame) 1.1 Tween 动 ...

  8. MYSQL 的静态表和动态表的区别, MYISAM 和 INNODB 的区别

    MyISAM是MySQL的默认数据库引擎(5.5版之前),由早期的ISAM(Indexed Sequential Access Method:有索引的顺序访问方法)所改良.虽然性能极佳,但却有一个缺点 ...

  9. 【java初探外篇01】——关于Java修饰符

    本文记录在学习Java语言过程中,对碰到的修饰符的一些疑问,在这里具体的拿出来详细学习和记录一下,以作后续参考和学习. Java修饰符 Java语言提供了很多修饰符,但主要分两类: 访问修饰符 非访问 ...

  10. Maven 打包遇到的问题

    [ERROR] No compiler is provided in this environment. Perhaps you are running on a JRE rather than a ...