解析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)是一种轻量级 ...
随机推荐
- 编程开发之--java多线程学习总结（1）问题引入与概念叙述
1.经典问题,火车站售票,公共票源箱,多个窗口同时取箱中车票销售 package com.lfy.ThreadsSynchronize; /** * 解决办法分析:即我们不能同时让超过两个以上的线程进 ...
- 经典DP 洛谷p1880 石子合并
https://www.luogu.org/problemnew/show/P1880 题目 题目描述 在一个圆形操场的四周摆放N堆石子,现要将石子有次序地合并成一堆.规定每次只能选相邻的2堆合并成新 ...
- Mac 10.12打开任何来源选项
在终端中输入: sudo spctl --master-disable 然后输入密码即可.最终会出现如下图所示:
- Android:刚6瓶啤酒4两56度白酒下肚,居然20分钟做了一手机版网站 !
刚6瓶啤酒4两56度白酒下肚,居然20分钟不到时间做了一手机版网站 !人有多大潜力你知道吗? 大家有兴趣的可以用手机或微信打开 http://xh.yunxunmi.com/ 看看俺这酒后之做! 更 ...
- 四大组件之BroadcastReceiver
BroadcastReceiver,顾名思义就是“广播接收者”的意思,它是Android四大基本组件之一,这种组件本质上是一种全局的监听器,用于监听系统全局的广播消息.它可以接收来自系统和应用的的广播 ...
- ServiceLoader解读
SPI的全名为Service Provider Interface.普通开发人员可能不熟悉,因为这个是针对厂商或者插件的.在java.util.ServiceLoader的文档里有比较详细的介绍. 简 ...
- js解决千分符问题
js脚本function: //js数字千分符处理 function commafy(num) { num = num + ""; var re = /(-?\d+)(\d{3}) ...
- Django获取Header中的信息
今天需要从header中获取一些信息,查了一些资料,需要注意一下几点: request.META.get("header key") 用于获取header的信息 注意的是heade ...
- Unicode和UTF-8之间的转换
转自:http://www.cnblogs.com/xdotnet/archive/2007/11/23/unicode_and_utf8.html#undefined 最近在用VC++开发一个小工具 ...
- maven在pom文件中添加你想要的jar包
概述:POM 文件里面的依赖jar包经常需要添加, 仅需要在google中代码查找 :maven 你需的jar包名称 repository 用了Maven,所需的JAR包就不能再像往常一样,自己找到并 ...