基于canvas的二维码邀请函生成插件
去年是最忙碌的一年,实在没时间写博客了,看着互联网行业中一个又一个人的倒下,奉劝大家,健康要放在首位,保重身体。
好了,言归正传,这是17年的第一篇博文,话说这天又是产品同学跑过来问我说:hi,lenny,你看现在市面上流行各种装逼H5,随便输入点名字啥的就给我生成房产证了,这种还可以分享出去,传播率可高了,或者你再看这里,一键生成邀请函,牛逼吧,要不你也帮我做一个这个功能,我去玩点传播手段。
我看见效果后第一反映就是,肯定canvas进行的图片拼接,现在市面上流行的效果具体是如何实现的我没有去看源码,思路很清晰,于是晚饭后没有下班,开始我的插件制作之旅了。
首先,我们需要思考,既然是图片处理,那么就必然存在图片下载,我们知道图片的onload是异步回调,所有的资源必须在下载完成后才可以进行接下来的逻辑,前置资源下载的逻辑就很关键,我们不仅需要在onload事件回调后去处理我们后续的流程,同时需要在所有必须资源加载完成后才执行,所以我们需要构建一个资源数组大致如下:
[{
{
name: 'bg',
src: '../img/bg.jpg'
}, {
name: 'z',
src: '../img/z.png'
}]
为了获得最终的complete事件,我们需要利用一个全局变量监听onload或者onerror次数:
var i = 1;
arr.forEach(function(obj, index, array) {
function onLoad() {
_self[obj.name] = img;
if (i < array.length) {
++i;
} else {
console.log('complete');
};
}
var img = new Image();
img.onload = onLoad;
img.onerror = onLoad;
img.src = obj.src;
好了,资源加载完成事件我们得到了,可以继续下面的逻辑,既然是基于canvas,当然需要创建并初始化我们的canvas,我根据自己的需求,这个功能在我所使用的项目中不论初始化多少次,只会存在一个,所以我做了如下的控制:
init: function() {
var LCanvasImg_canvas = document.querySelector('#LCanvasImg_canvas');
if (LCanvasImg_canvas) {
LCanvasImg_canvas.width = this.params.cw;
LCanvasImg_canvas.height = this.params.ch;
LCanvasImg_canvas.style.display = this.params.display;
this.canvas = LCanvasImg_canvas;
} else {
var canvas = document.createElement('canvas');
canvas.id = 'LCanvasImg_canvas';
canvas.width = this.params.cw;
canvas.height = this.params.ch;
canvas.style.display = this.params.display;
document.body.appendChild(canvas);
this.canvas = canvas;
}
this.clear();
},
canvas创建好了,接下来我们需要实现图片渲染的能力,canvas的图片渲染使用的是drawImage方法,根据官方文档,该方法有3种传参方式:
JavaScript 语法 1
在画布上定位图像:
context.drawImage(img,x,y);
JavaScript 语法 2
在画布上定位图像,并规定图像的宽度和高度:
context.drawImage(img,x,y,width,height);
JavaScript 语法 3
剪切图像,并在画布上定位被剪切的部分:
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
于是,我们也充分的判断好我们调用的drawImage参数:
addImg: function(obj, callback) {
var _self = this;
var canvas = _self.canvas;
var ctx = canvas.getContext("2d");
if (obj.hasOwnProperty('sx') && obj.hasOwnProperty('sy') && obj.hasOwnProperty('sw') && obj.hasOwnProperty('sh') && obj.hasOwnProperty('x') && obj.hasOwnProperty('y') && obj.hasOwnProperty('width') && obj.hasOwnProperty('height')) {
ctx.drawImage(_self[obj.name], obj.sx, obj.sy, obj.sw, obj.sh, obj.x, obj.y, obj.width, obj.height);
} else if (obj.hasOwnProperty('x') && obj.hasOwnProperty('y') && obj.hasOwnProperty('width') && obj.hasOwnProperty('height')) {
ctx.drawImage(_self[obj.name], obj.x, obj.y, obj.width, obj.height);
} else if (obj.hasOwnProperty('x') && obj.hasOwnProperty('y')) {
ctx.drawImage(_self[obj.name], obj.x, obj.y);
} else {
ctx.drawImage(_self[obj.name], 0, 0);
}
_self.showImg();
},
接下来我们需要开发文字生成的能力,这个比较简单,如果对canvas相关api熟悉点的,这部分没有难度:
addFont: function(obj) {
var _self = this;
var canvas = _self.canvas;
var ctx = canvas.getContext("2d");
ctx.font = obj.fontsize + "px " + obj.fontfamily; //文字的字体大小和字体系列
var ftop = obj.ftop; //文字top
var fleft = obj.fleft; //文字left
ctx.textBaseline = "top"; //设置绘制文本时的文本基线。
ctx.fillText(obj.txt, fleft, ftop);
ctx.lineWidth = 1;
ctx.fillStyle = "#000";
ctx.strokeStyle = "rgba(255,255,255,0.4)";
ctx.strokeText(obj.txt, fleft, ftop);
},
最后一步是二维码的生成,这个有点坑,自己开发肯定来不及了,我选用的是一个开源插件:qrcode,根据这个插件,我们可以在一个img中动态生成二维码的base64字串,而有了这个字串,我们也很方便的将内容输出到我们的canvas中,为了保证体验,这个插件的最外层div直接display:none,避免它干扰到我们的实际项目。
<div id="qrcode" style="display: none;"></div>
/**
*
* 初始化二维码生成插件
*
*/
var qrdata = '';
var myqr = document.querySelector('#myqr');
var qrcode = document.querySelector('#qrcode');
var qr = new QRCode(qrcode, {
width: 300,
height: 300,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.L
});
由于这个img是动态变化的,我们获取base64字串的时候一定要在该img的onload事件的回调内去获取,这点非常重要:
function buildQr () {
var img = qrcode.querySelector('img');
img.onload = function() {
qrdata = img.src;
main();
};
qr.makeCode(myqr.value);
}
ok,准备工作都完成了,接下来我们需要开始初始化我们的插件了,我预先埋下了很多可配置的参数:
var canvasImg = null; function main() {
//初始化
canvasImg = new LCanvasImg({
cw: 768,//canvas width
ch: 1163,//canvas height
iw: '100%',//output img width
ih: 'auto',//output img height
display:'none'//canvas display
});
//资源加载
canvasImg.load([{
name: 'qr',
src: qrdata
}, {
name: 'bg',
src: '../img/bg.jpg'
}, {
name: 'z',
src: '../img/z.png'
}], build);
};
看见上面的build变量了吗?我们将图片生成逻辑全部写在这个build方法中,在load资源complete后,会执行build;
function build() {
var farr = [{
txt: document.querySelector('#mytxt1').value,
fontsize: 26,
fontfamily: 'fzjt',
ftop: 140,
fleft: 194
}, {
txt: '胡鑫',
fontsize: 26,
fontfamily: 'fzjt',
ftop: 220,
fleft: 394
}, {
txt: '邓逸昕',
fontsize: 26,
fontfamily: 'fzjt',
ftop: 220,
fleft: 294
}, {
txt: document.querySelector('#mytxt1').value,
fontsize: 26,
fontfamily: 'fzjt',
ftop: 220,
fleft: 194
}];
canvasImg.addImg({
name: 'bg',
x: 0,
y: 0,
width: 768,
height: 1163
});
farr.forEach(function(obj) {
canvasImg.addFont(obj);
});
canvasImg.addImg({
name: 'z',
x: 0,
y: 0,
width: 100,
height: 100
});
canvasImg.addImg({
name: 'z',
sx: 0,
sy: 0,
sw: 150,
sh: 150,
x: 100,
y: 100,
width: 100,
height: 100
});
canvasImg.addImg({
name: 'qr',
x: 400,
y: 800,
width: 200,
height: 200
});
};
window.onload = buildQr;
最后一句话非常重要,为什么这里我需要用window.onload事件,如果你使用的是webfont,当webfont下载成功后,其实还有一小段时间需要将font字体载入进浏览器中,只有在window.onload事件时,webfont字体文件才能生效。
最后奉上效果截图:
整个demo已经上传至github上了,如果需要做类似需求的同学可以下载该插件,可以节约大家许多时间
资源地址:https://github.com/xfhxbb/LCanvasImg
基于canvas的二维码邀请函生成插件的更多相关文章
- 【krpano】二维码自动生成插件(源码+介绍+预览)
简介 在krpano生成的全景支持HTML5在手机中展示,而在手机中打开全景网址时不方便,需要输入网址. 最近研究了如何让krpano全景根据自己当前的网址,自动生成二维码,并在电脑浏览时,可以展示出 ...
- 基于Metronic的Bootstrap开发框架经验总结(14)--条码和二维码的生成及打印处理
在很多项目里面,对条形码和二维码的生成和打印也是一种很常见的操作,在Web项目里面,我们可以利用JS生成条形码和二维码的组件有很多.本文引入两个比较广泛使用的JS组件,用来处理条形码和二维码的生成处理 ...
- Android zxing 解析二维码,生成二维码极简demo
zxing 官方的代码很多,看起来很费劲,此demo只抽取了有用的部分,实现了相机预览解码,解析本地二维码,生成二维码三个功能. 简化后的结构如下: 废话少说直接上代码: BaseDecodeHand ...
- 二维码js生成库
jr-qrcode 把字符串生成二维码,并以Base64 URL形式输出. 支持白色二维码,即反色二维码. 兼容性 插件使用了H5的canvas特性进行二维码绘制,最后输出base64 url,因此本 ...
- 基于Zxing的二维码的二维码扫描之横屏扫描
最近项目条码扫描要改为横屏,网上所搜了一下,然后发现我写的需要改动几行代码就可以了,还是很给力的. 如未查看之前的代码,请移步: 基于Zxing的二维码生成和二维码扫描 修改下面写代码就可以实现横屏条 ...
- 二维码的生成细节和原理 -- 转http://news.cnblogs.com/n/191671/
二维码又称 QR Code,QR 全称 Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的 Bar Code 条形码能存更多的信息,也能表示更多的数据类型:比如:字 ...
- 【来龙去脉系列】QRCode二维码的生成细节和原理
二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能表示更多的数据类型:比如:字符,数字, ...
- Java 条形码 二维码 的生成与解析
Barcode简介 Barcode是由一组按一定编码规则排列的条,空符号,用以表示一定的字符,数字及符号组成的,一种机器可读的数据表示方式. Barcode的形式多种多样,按照它们的外观分类: Lin ...
- ios-深度解析二维码的生成与使用
利用一个小demo来对二维码进行学习,总共四个界面(主界面,生成二维码界面,识别二维码界面,扫描二维码界面) 一.二维码的介绍 1.什么是二维码? 二维条码/二维码是用某种特定的 ...
随机推荐
- iOS 旋转
实现一张图片的旋转部分角度显示: [cpp] view plaincopy UIImageView image = [[UIImageView alloc]init]; image.frame = C ...
- S3C2440看门狗解析
个PCLK周期的复位信号 也就是说,在某些环境下,看门狗可以当做定时器使用,当他中断的时候并不发生复位,只发生中断,我看看图 看门狗的中断和复位信号是可以依靠wtcon来切断的(看门狗的时钟是无法切断 ...
- Linux cronolog
1. 关于本文 本文将以cronolog 1.6.2.apache 2.2.6为例,以CentOS 5为平台,讲述cronolog的安装和设置. 2. 关于cronolog cronol ...
- JS数字金额大写转换
/** 数字金额大写转换(可以处理整数,小数,负数) */ var digitUppercase = function(n) { var fraction = ['角', '分']; var digi ...
- ios-贝塞尔曲线
git下载地址:git@github.com:lu459700780/UIBezierPath.git 演示: #import "ViewController.h" @interf ...
- R语言实战(五)方差分析与功效分析
本文对应<R语言实战>第9章:方差分析:第10章:功效分析 ================================================================ ...
- Java编程思想非主流知识点
1. Java中的多态性理解(注意与C++区分) Java中除了static方法和final方法(private方法本质上属于final方法,因为不能被子类访问)之外,其它所有的方法都是动态绑定,这意 ...
- 弹出式菜单(下拉菜单)实现——PopupMenu
PopupMenu代表弹出式菜单,它会在指定组件上弹出PopupMenu,默认情况下,PopupMenu会显示在该组件的下方或上方.PopupMenu可增加多个菜单项,并可为菜单项增加子菜单. 使用P ...
- Django 设置cookies与获取cookies.
在Django里面,使用Cookie和Session看起来好像是一样的,使用的方式都是request.COOKIES[XXX]和request.session[XXX],其中XXX是您想要取得的东西的 ...
- loading.io一个可以直接生成loading gif图标的站点
官网是:http://loading.io/ 进去后,可以拖动左图大小,然后点右边的make gif就可以自动生成所选大小的gif图标了,生成后会弹出一个download窗,点download下载即可 ...