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);
amazeui+canvas绘制二维码的更多相关文章
- 基于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 ...
- 小程序canvas生成二维码图片踩的坑
1:生成临时图片,保证画布被加载以及渲染(即本身不可以 hidden 或是 上级元素不可以 hidden 或是 wx:if 隐藏等) == > 建议:因为 canvas 的组件层级(z-inde ...
- Winform中使用zxing和Graphics实现自定义绘制二维码布局
场景 zxing.dll下载 https://download.csdn.net/download/badao_liumang_qizhi/11623214 效果 实现 根据上面文章中将简单的二维码生 ...
- 基于canvas的二维码邀请函生成插件
去年是最忙碌的一年,实在没时间写博客了,看着互联网行业中一个又一个人的倒下,奉劝大家,健康要放在首位,保重身体.好了,言归正传,这是17年的第一篇博文,话说这天又是产品同学跑过来问我说:hi,lenn ...
- 用canvas生成二维码
$("#actimg").qrcode({ render: "canvas", //设置渲染方式,有tabl ...
- canvas生成二维码,并下载保存为本地的图片
function getTicket(id,salt){//qrcode生成canvas二维码 $(".zc-mask").show(); $(".edit-box&qu ...
- CAD绘制二维码(网页版)
js中实现代码说明: //新建一个COM组件对象 参数为COM组件类名 var getPt = mxOcx.NewComObject("IMxDrawUiPrPoint"); ge ...
- java使用zxing插件绘制二维码
ZXing是一个开放源码的,用Java实现的多种格式的1D/2D条码图像处理库,它包含了联系到其他语言的端口.Zxing可以实现使用手机的内置的摄像头完成条形码的扫描及解码. 涉及到的依赖有: < ...
- 微信小程序之生成图片分享 二维码分享 canvas绘制
如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 添加画布 首先,在小程序里进行绘图操作需要用到<canvas>组件,步骤大致分为以 ...
随机推荐
- Runtime 全方位装逼指南
Runtime是什么?见名知意,其概念无非就是“因为 Objective-C 是一门动态语言,所以它需要一个运行时系统……这就是 Runtime 系统”云云.对博主这种菜鸟而言,Runtime 在实际 ...
- Vue2.5开发去哪儿网App 城市列表开发
一,城市选择页面路由配置 ...
- odoo开发笔记:抛出警告的方式
上边rase 加3种写法,都能实现,跑出警告的功能.
- Android_ 重写系统Crash处理类,保存Crash信息到SD卡 和 完美退出程序的方法
转载时注明地址:http://blog.csdn.net/xiaanming/article/details/9344703 我们开发Android应用的时候,当出现Crash的时候,系统弹出一个警告 ...
- Mac终端配置,DIY你的Terminal (iTerm 2 + Oh My Zsh)
使用mac osx一年以来,自带的Terminal终端一直都是白底黑字,食之无味,越来越缺乏新鲜感,怎么也得想个法子来刺激下眼球. 不然花那么多大洋买你回来是要哪般,难道真是为来学习工作??? 怎么可 ...
- PHP设计模式:观察者模式
示例代码详见https://github.com/52fhy/design_patterns 观察者模式 观察者模式(Observer)是对象的行为模式,又叫发布-订阅(Publish/Subscri ...
- Python学习--14 序列化
把变量从内存中变成可存储或传输的过程称之为序列化,在Python中叫pickling,在其他语言中也被称之为serialization,marshalling,flattening等等. pickle ...
- SpringCloud入门之eclipse新建maven子项目和聚合项目
一.new maven project : next 二.勾选 create a simple project : next 三.Group Id:项目的包路径 如com.test,之后创建的C ...
- 从QQ音乐开发,探讨如何利用腾讯云SDK在直播中加入视频动画
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯游戏云发表于云+社区专栏 看着精彩的德甲赛事,突然裁判一声口哨,球赛断掉了,屏幕开始自动播放"吃麦趣鸡盒,看德甲比赛&q ...
- Python面试题目--汇总
原文链接-https://github.com/taizilongxu/interview_python Python语言特性 1 Python的函数参数传递 2 Python中的元类(metacla ...