<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. Runtime 全方位装逼指南

    Runtime是什么?见名知意,其概念无非就是“因为 Objective-C 是一门动态语言,所以它需要一个运行时系统……这就是 Runtime 系统”云云.对博主这种菜鸟而言,Runtime 在实际 ...

  2. Vue2.5开发去哪儿网App 城市列表开发

     一,城市选择页面路由配置                                                                                        ...

  3. odoo开发笔记:抛出警告的方式

    上边rase 加3种写法,都能实现,跑出警告的功能.

  4. Android_ 重写系统Crash处理类,保存Crash信息到SD卡 和 完美退出程序的方法

    转载时注明地址:http://blog.csdn.net/xiaanming/article/details/9344703 我们开发Android应用的时候,当出现Crash的时候,系统弹出一个警告 ...

  5. Mac终端配置,DIY你的Terminal (iTerm 2 + Oh My Zsh)

    使用mac osx一年以来,自带的Terminal终端一直都是白底黑字,食之无味,越来越缺乏新鲜感,怎么也得想个法子来刺激下眼球. 不然花那么多大洋买你回来是要哪般,难道真是为来学习工作??? 怎么可 ...

  6. PHP设计模式:观察者模式

    示例代码详见https://github.com/52fhy/design_patterns 观察者模式 观察者模式(Observer)是对象的行为模式,又叫发布-订阅(Publish/Subscri ...

  7. Python学习--14 序列化

    把变量从内存中变成可存储或传输的过程称之为序列化,在Python中叫pickling,在其他语言中也被称之为serialization,marshalling,flattening等等. pickle ...

  8. SpringCloud入门之eclipse新建maven子项目和聚合项目

    一.new maven project :  next 二.勾选 create a simple project  :  next 三.Group Id:项目的包路径 如com.test,之后创建的C ...

  9. 从QQ音乐开发,探讨如何利用腾讯云SDK在直播中加入视频动画

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯游戏云发表于云+社区专栏 看着精彩的德甲赛事,突然裁判一声口哨,球赛断掉了,屏幕开始自动播放"吃麦趣鸡盒,看德甲比赛&q ...

  10. Python面试题目--汇总

    原文链接-https://github.com/taizilongxu/interview_python Python语言特性 1 Python的函数参数传递 2 Python中的元类(metacla ...