基于canvas的二维码邀请函生成插件
作者：ppk2 发布时间：2024-04-17 10:40:53
标签：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;
来源：http://www.cnblogs.com/xfhxbb/p/LCanvasImg.html
0
投稿猜你喜欢
- 代码如下:'个人代码风格注释（变量名中第一个小写字母表表示变量类型） 'i:为Integer型; 's:为Strin
- 升级了浏览器到IE9，今天进入公司网站后台突然发现有些页面进不去了，F12调试显示有JS错误：DOM Exception: INVALID_
图片的间隙 （1）问：我有一张大图片，把它切割后在Dreamweaver中进行拼接，可是总是有间隙，不知为什么？ 答：不知你是否把表格的边距- 为什么要建立索引？当在非常大的表中进行查询，如果数据库进行全表遍历的话那么速度是会非常慢的，而我们的索引则可以建立一个b+树的结构，可以自上
- 客户端HTTP请求URL只是标识资源的位置，而HTTP是用来提交和获取资源。客户端发送一个HTTP请求到服务器的请求消息，包括以下格式：请求
- Form介绍在HTML页面中利用form表单向后端提交数据时，都会写一些获取用户输入的标签并且用form标签把它们包起来。与此同时我们在好多
- 索引概述介绍索引（index）是帮助MySQL高效获取数据的数据结构(有序)。在数据之外，数据库系统还维护着满足 特定查找算法的数据结构，这
- 如果你有对触发器和事务的概念，有些了解，这篇文章，对你来说会是很简单，或能让你更进一步的了解触发器里面的一些故事，和触发器中事务个故事。在这
- 内联优化是一种常见的编译器优化策略，通俗来讲，就是把函数在它被调用的地方展开，这样可以减少函数调用所带来的开销(栈的创建、参数的拷贝等)。当
- 全文检索引擎入门灰常不幸的是，关系型数据库对全文检索的支持没有被标准化。不同的数据库通过它们自己的方式来实现全文检索，而且SQL
- 前言SQL模式影响MySQL支持的SQL语法和执行的数据验证检查。MySQL服务器可以在不同的SQL模式下运行，并且可以针对不同的客户端以不
- 最近工作中写了几个存储过程，需要向存储过程中传递字符串，因为SQL Server 2000中没有内置类似于 split 的函数，只好自己处理
- 作为k8s官方维护的客户端，k8s go-client对于go语言中使用k8s可以说是唯一选项。但是官方的使用示例我个人觉得并不是很清晰，尤
- Window.Open详解 一、window.open()支持环境：JavaScript1.0+/JScript1.0+/Nav2
- 本文用的是sciki-learn库的iris数据集进行测试。用的模型也是最简单的，就是用贝叶斯定理P(A|B) = P(B|A)*P(A)/
- 问题描述前端 vue 框架，后台 php，百度跨域问题后台加这段代码header("Access-Control-Allow-Or
- RSA加密是一种非对称加密，通常使用公钥加密，私钥解密，私钥签名，公钥验签。在公开密钥密码体制中，加密密钥（即公开密钥）PK是公开信息，而解
- 一、内容简介使用while循环编写重复执行的语句使用哨兵值控制循环使用for循环实现计数器控制使用break、continue控制循环二、w
- 最近在使用tensorflow进行网络训练的时候，需要提取出别人训练好的卷积核的部分层的数据。由于tensorflow中的tensor和py
- 案例故事:百度网盘非会员大量上传文件，会弹出：“上传文件数量超出500个现在，开通超级会员后可继续上传”，其实是限制拖入500张相片，并非限
