解析json结构绘制canvas
在工作中偶尔会遇到绘制转发卡/邀请卡的业务，且这个转发卡/邀请卡的风格会有很多，要求最后生成图片。这时候如果使用一张图片绘制一个canvas，这个工作量会相当大。分析一下转发邀请的内容，会发现所有的里面的元素都是一样的，只是风格不一致，所以我使用了解析json结构来绘制canvas，如果后期需要增加风格，只要增加json就可以了。
demo图大概这样：
点击下方的不同风格的图片就会生成不一样的图片。
下面我们要实现代码：
style样式:
*{padding: 0;margin: 0;}
body{width: 100%;height:100%;overflow: hidden;}
.ul{ position: fixed;bottom: 0;display: flex;width: 100%;font-size: 0;text-align: center; }
a{height: 1.2rem;flex: 1;font-size: 14px;margin: 0 .1rem .1rem; }
img{ width: 100%;height: 100%; }
.temp{ width:100%;height: 10rem;margin: 0 auto;}
html结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>canvas+json实现方法</title>
</head>
<body>
<div class="main">
<div class="temp">
<canvas id="canvas"></canvas>
</div>
<div class="ul">
<a href="javascript:drawPic(1)"><img src="data:images/1.jpg"></a>
<a href="javascript:drawPic(2)"><img src="data:images/2.jpg"></a>
<a href="javascript:drawPic(3)"><img src="data:images/3.jpg"></a>
<a href="javascript:drawPic(4)"><img src="data:images/4.jpg"></a>
</ul>
</div> <script src="jquery-3.2.1.min.js"></script>
<script src="demo.js"></script>
</body>
</html>
demo.js：
// 适应各种屏幕尺寸
;(function(win) {
var doc = win.document;
var docEl = doc.documentElement;
var tid;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
if (width > 640) { // 最大宽度
width = 640;
}
var rem = width / 6.4;
docEl.style.fontSize = rem + 'px';
}
win.addEventListener('resize', function() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener('pageshow', function(e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
refreshRem();
})(window); // 不同风格的json结构，在实际业务中可以移到服务器中
var json={
"success":true,
"msg":null,
"code":1,
"lists":[
{
"id":1,
"bgcolor":"rgb(0,0,0)",
"url":"./images/1.jpg",
"elements":[ //存放元素
{
"type":"img",
"url":"./images/user.jpg",
"style":{
"width":80,
"height":80,
"left":20,
"top":20,
"border":0,
"borderRadius":100 //100表示画原形图片 0表示矩形图片 0-100表示圆角图片
}
},
{
"type":"txt",
"content":"何小姐的博客",
"style":{
"color":"#fff",
"left":115,
"top":55,
"fontsize":20,
"fontfamily":"Microsoft Yahei",
"textalign":"left",
}
},
{
"type":"txt",
"content":"http://www.cnblogs.com/heyujun-/",
"style":{
"color":"#fff",
"left":115,
"top":80,
"fontsize":14,
"fontfamily":"Microsoft Yahei",
"textalign":"left",
}
}
]
},{
"id":2,
"bgcolor":"rgb(0,0,0)",
"url":"./images/2.jpg",
"elements":[ //存放元素
{
"type":"img",
"url":"./images/user.jpg",
"style":{
"width":80,
"height":80,
"left":20,
"top":20,
"border":0,
"borderRadius":100 //100表示画原形图片 0表示矩形图片 0-100表示圆角图片
}
},
{
"type":"txt",
"content":"何小姐的博客",
"style":{
"color":"red",
"left":115,
"top":55,
"fontsize":20,
"fontfamily":"Microsoft Yahei",
"textalign":"left",
}
},
{
"type":"txt",
"content":"http://www.cnblogs.com/heyujun-/",
"style":{
"color":"red",
"left":115,
"top":80,
"fontsize":14,
"fontfamily":"Microsoft Yahei",
"textalign":"left",
}
}
]
},{
"id":3,
"bgcolor":"rgb(0,0,0)",
"url":"./images/3.jpg",
"elements":[ //存放元素
{
"type":"img",
"url":"./images/user.jpg",
"style":{
"width":80,
"height":80,
"left":20,
"top":20,
"border":0,
"borderRadius":100 //100表示画原形图片 0表示矩形图片 0-100表示圆角图片
}
},
{
"type":"txt",
"content":"何小姐的博客",
"style":{
"color":"#fff",
"left":115,
"top":55,
"fontsize":20,
"fontfamily":"Microsoft Yahei",
"textalign":"left",
}
},
{
"type":"txt",
"content":"http://www.cnblogs.com/heyujun-/",
"style":{
"color":"#fff",
"left":115,
"top":80,
"fontsize":14,
"fontfamily":"Microsoft Yahei",
"textalign":"left",
}
}
]
},{
"id":4,
"bgcolor":"rgb(0,0,0)",
"url":"./images/4.jpg",
"elements":[ //存放元素
{
"type":"img",
"url":"./images/user.jpg",
"style":{
"width":80,
"height":80,
"left":20,
"top":20,
"border":0,
"borderRadius":100 //100表示画原形图片 0表示矩形图片 0-100表示圆角图片
}
},
{
"type":"txt",
"content":"何小姐的博客",
"style":{
"color":"#fff",
"left":115,
"top":55,
"fontsize":20,
"fontfamily":"Microsoft Yahei",
"textalign":"left",
}
},
{
"type":"txt",
"content":"http://www.cnblogs.com/heyujun-/",
"style":{
"color":"#fff",
"left":115,
"top":80,
"fontsize":14,
"fontfamily":"Microsoft Yahei",
"textalign":"left",
}
}
]
}
]
} var canvas, ctx;
// 根据json的id切换canvas内容
function drawPic(id){
$.each(json.lists,function(i,v){
if(v.id==id){
drawBackground(v.url, v);
}
});
} // 绘制背景图的方法
function drawBackground(url, v){
var tempW=$('.temp').width(),
tempH=$('.temp').height();
canvas=document.getElementById('canvas');
canvas.width=tempW;
canvas.height=tempH;
ctx=canvas.getContext('2d');
var Img = new Image();
// Img.crossOrigin="anonymous"; //跨域问题
Img.src=url;
Img.onload=function(){
ctx.save();
ctx.drawImage(Img, 0, 0, canvas.width, canvas.height);
ctx.restore();
$.each(v.elements,function(ii,vv){
if(vv.type=="img"){
drawImg(vv.url, vv.style);
}else if(vv.type=="txt"){
drawTxt(vv.content, vv.style);
}
});
}
} // 绘制圆形/圆角/矩形图片元素的方法
function drawImg(url, style){
var l=style.left,
t=style.top,
w=style.width,
h=style.height;
var Img=new Image();
// Img.crossOrigin="anonymous"; //跨域问题
Img.src=url;
Img.onload=function(){
ctx.save();
if(style.borderRadius == 0){
ctx.drawImage(Img, l, t, w, h);
}else if(style.borderRadius > 0 && style.borderRadius < 100){ }else if(style.borderRadius==100){
var d = w;
var cx = l + w/2;
var cy = t + w/2;
ctx.arc(cx, cy, w/2, 0, 2 * Math.PI);
ctx.clip();
ctx.drawImage(Img, l, t, d, d);
}
ctx.restore();
}
} // 绘制文字的方法
function drawTxt(cont, style){
ctx.beginPath();
ctx.fillStyle = style.color;
ctx.font = style.fontsize+'px '+style.fontfamily;
ctx.textAlign = style.textalign;
ctx.fillText(cont, style.left, style.top);
ctx.fill();
ctx.closePath();
} drawPic(1);
这样就实现了效果，由于跨域问题，这里的生成图片就略过了。
当然这种方法会有一个生成图片的时间段，导致页面看起来是在加载中，看个人怎么取舍。
参考：移动端页面使用rem来做适配 https://www.jianshu.com/p/eb05c775d3c6
如图有侵权，请联删。
解析json结构绘制canvas的更多相关文章
- C#用GDI+解析Json文件绘制Chart
using System.Collections.Generic; namespace Chart { public class Program { static void Main(string[] ...
- 一个Json结构对比的Python小工具兼谈编程求解问题
先上代码. jsondiff.py #!/usr/bin/python #_*_encoding:utf-8_*_ import argparse import json import sys rel ...
- 服务端提供的JSON数据接口与用户端接收解析JSON数据
JSON格式的服务接口:http://www.cnblogs.com/visec479/articles/4118338.html 首先来了解下JSON格式解析 json结构的格式就是若干个 键/值( ...
- Python实现Json结构对比的小工具兼谈编程求解问题
摘要: 通过使用Python编写一个解析Json结构对比的小工具,来提炼编程求解的通用步骤和技巧. 难度: 初级 先上代码. jsondiff.py #!/usr/bin/python #_*_enc ...
- 奇葩json结构解析--key是数字的json处理
json结构如下: { "ret": "ok", "data": { "57230": { "cat_id&q ...
- go语言之进阶篇json解析到结构体
1.json解析到结构体 示例: package main import ( "encoding/json" "fmt" ) type IT struct { ...
- Golang Json文件解析为结构体工具-json2go
代码地址如下:http://www.demodashi.com/demo/14946.html 概述 json2go是一个基于Golang开发的轻量json文件解析.转换命令行工具,目前支持转换输出到 ...
- 使用Newtonsoft.Json.dll(JSON.NET)动态解析JSON、.net 的json的序列化与反序列化（一）
在开发中,我非常喜欢动态语言和匿名对象带来的方便,JSON.NET具有动态序列化和反序列化任意JSON内容的能力,不必将它映射到具体的强类型对象,它可以处理不确定的类型(集合.字典.动态对象和匿名对象 ...
- C语言创建及解析Json的使用法则
参考原文:http://blog.csdn.net/xukai871105/article/details/33013455 JSON(JavaScriptObject Notation)是一种轻量级 ...
随机推荐
- fd与FILE结构体
文件描述符 fd 概念:文件描述符在形式上是一个非负整数.实际上,它是一个索引值,指向内核为每一个进程所维护的该进程打开文件的记录表.当程序打开一个现有文件或者创建一个新文件时,内核向进程返回一个文件 ...
- PXE+Kickstart 批量安装CentOS 7
安装之前 将需要安装 CentOS 的服务器与 PXE 服务器通过网络设备连接:PXE 服务器安装 CentOS,并且关闭firewalld.selinux,设置静态IP地址,本例设为10.0.0.1 ...
- java运行时的内存区域
1.概述 java虚拟机在执行java程序的过程中会把它所管理的内存划分为若干个不同的数据区域. 这些区域都有各自的用途,以及创建和销毁的时间,有的区域随着虚拟机进程的启动而存在,有些区域则依赖用户线 ...
- Formatting HDFS
Working on hadoop, especially on test clusters, I have managed to break my HDFS layer and sometimes ...
- xampp使用技巧及问题汇总
1)在win7上同时装有IIS 和 xampp1.8.2 ,会出现Apache启动时,提示80端口被占用的情况(一般是iis安装之后出现的常见情况). 情况1: xampp 在启动时会检测Apach ...
- auguements实参对象的数组化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- SSH使用密钥免密码登录
使用ssh远程连接服务器,有两种身份校验方式:账号密码和秘钥.使用秘钥的方式理论上更加安全,而且免去了输入密码的步骤,使用起来更方便(尤其对于sftp,scp等). 设置 SSH,打开密钥登录功能 编 ...
- 高性能的数据压缩库libzling-20160105
libzling(https://github.com/richox/libzling,求观看[watch],求星[star],求叉[fork])是一款高性能的数据压缩库,参见原贴:http://ww ...
- javac之向前引用
可以参考JLS7:https://docs.oracle.com/javase/specs/jls/se7/html/jls-8.html#jls-8.3.2.3 public class Test5 ...
- R语言提取字符串的一部分substring函数
这个函数提取字符串的一部分. 语法 substring()函数的基本语法是: substring(x,first,last) 以下是所使用的参数的说明: x - 是字符向量输入. first - 是第 ...