首先是这样一个需求, 要兼容IE7的旋转的角标
随着这个期数增多 ( 假设50期 ) 雪碧图也变的越来越大 , CCS3的 rotate 只能兼容到IE9
IE5 都支持的 filter旋转则是个沉重的知识点 ( 矩阵旋转并没有实验成功 )
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
那么 还有哪些方法可以解决这个问题呢 ,
找找插件
jQueryRotate官网写着兼容到IE6+ , 只要在jq后面引入就好了
写个test页面试一下
<script src="jquery.js"></script>
<script src="jQueryRotate.js"></script>
$('img').rotate(50);
wow , 效果好像不错, 但实际使用发现
只支持图片的旋转, 不支持DIV等HTML
插件的作者表示会在3.x的实验版本中尝试不稳定的支持(摔
但是到了这里 ,解决问题的思路稍微明朗了一些 , 如果有一个正的(0deg)图片 , 用rotate插件旋转过来解决问题了
或者我们找方法批量生成一个旋转的图片
那么试试SVG?
虽然SVG 同样从IE9+才开始被支持 , 但是感觉如此广泛的使用群体和平台, 相信会有低版本IE 的polyfill方案的
svg画起来还是很简单的 , 不信你看
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="150">
<text x="0" y="15" fill="red" transform="rotate(45,0 75)">2期</text>
</svg>
用一个text节点 , 中间写好文字就行
rotate(x, origin) origin 里是x,y坐标具体可以移步 http://www.zhangxinxu.com/wordpress/2015/10/understand-svg-transform/
当然 , 也有npm包, 可以用在node端用来快速生成svg , 然后直接输出到HTML里
https://www.npmjs.com/package/text-to-svg
npm install --save text-to-svg
那么下面就是去找处理兼容问题的包了(根本不会找不到)
有一个名为SVGWEB 的插件
https://www.rustybrick.com/svg-support-for-internet-explorer.html
https://code.google.com/archive/p/svgweb/
它会在低版本IE下把svg变成flash
但经过实验 , 面对svg复杂的path路径时 , 会失败
而且每一个svg都要用script标签包裹起来 , 感觉性能开销比较大
发散下思维,看看Unicode
unicode是字体在网页端最原始的应用方式，特点是：
- 兼容性最好，支持ie6+，及所有现代浏览器。
- 支持按字体的方式去动态调整图标大小，颜色等等。
- 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
- 注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用
那么去搜索一下 https://unicode-table.com/cn/
没什么惊喜... Unicode 看来跑题了
再次面向stackoverflow编程之后, 让我们试一试canvas
canvas 有方便的API把文字放到画布上
然后用 一个 toDataURL() 可以再把canvas画布变成一个base64 格式的png 输出
Base64编码是从二进制到字符的过程，可用于在HTTP环境下传递较长的标识信息, 是一种网上常用的加密格式, image 的src会将加密后的base64转换回二进制, 变成图片, 且IE7 下是支持的(没有开虚拟机XP)
好像可以着手批量生成图片了! 手写个服务器试试!
一共两个文件, 下面的html是index.html, 在下面的js 是 index.js 服务器端脚本 ( 等有了更工具化的版本试着发个npm)
node index.js 启动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas to img</title>
<style>
body {
background-color: blanchedalmond;
}
img {
padding: 50px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<canvas id="textCanvas"></canvas>
<button id="submit">生成图片</button>
<div id="tip">等待服务器确认</div>
<img class="elem0" src="" alt="">
<img class="elem1" src="" alt="">
<img class="elem2" src="" alt="">
<img class="elem3" src="" alt="">
<script>
var tip = document.getElementById('tip');
var sub = document.getElementById('submit');
var arr = [];
function createCanvas(w, h) {
var c = document.getElementById('textCanvas').getContext('2d');
c.canvas.width = w;
c.canvas.height = h;
// 描点, 画背景
c.beginPath();
c.moveTo(0, 0);
c.lineTo(30, 0);
c.lineTo(60, 30);
c.lineTo(60, 60);
c.closePath();
c.lineWidth = 1;
c.strokeStyle = '#ef9624';
c.fillStyle = '#ef9624';
c.stroke();
c.fill();
// 旋转画布, 准备写字
c.rotate(45 * Math.PI / 180);
c.translate(12, -30); // 勾股定理算出位移
c.font = '14px'; // 可以改字体
c.textAlign = 'center';
// 循环生成
for (let i = 1; i < 10; i++) {
let img = document.createElement('img');
let t = i + '期';
c.strokeStyle = '#ef9624';
c.fillStyle = '#fff';
c.fillText(t, 30, 24);
arr.push(c.canvas.toDataURL());
// 用背景色写一遍文字, 不再重新生成画布
c.strokeStyle = '#ef9624';
c.fillStyle = '#ef9624';
c.fillText(t, 30, 24);
c.strokeText(t, 30, 24);
}
}
createCanvas(60, 60);
// ajax发送
sub.addEventListener('click', function () {
var xhr = new XMLHttpRequest();
tip.innerText = '发送中';
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
if (JSON.parse(xhr.response).code === 10000) {
createImg();
}
}
};
xhr.open('POST', '/upload', true);
xhr.send(JSON.stringify(arr));
});
function createImg() {
let css = document.createElement('link');
css.rel = 'stylesheet';
css.setAttribute('href', './1.css');
css.setAttribute('type', 'text/css');
console.log(css);
tip.innerText = '加载css'
document.head.appendChild(css);
}
</script>
</body>
</html>
var http = require("http");
var url = require("url");
var querystring = require("querystring");
var fs = require("fs");
// 路由方法
var handle = {};
handle['/'] = function (response, postData) {
start(response, postData);
};
handle['/upload'] = function (response, postData) {
createCss(response, postData);
};
// 感觉可以再学习学习别人的框架, 看看静态资源请求怎么写
handle['/assets'] = function (response, postData) {
assets(response, postData);
};
function start(response, postData) {
response.writeHead(200, { "Content-Type": "text/html" });
console.log('__dirname', __dirname);
response.end(fs.readFileSync(__dirname + '/index.html'));
}
function createCss(response, postData) {
response.writeHead(200, { "Content-Type": "text/plain" });
var arr = JSON.parse(postData);
var css = '';
arr.forEach(function (element, index) {
css += `.elem${index} {\nbackground-image: url(${element});\n}\n`;
}, this);
fs.writeFileSync('1.css', css);
// 模拟个成功
var res = {
code: 10000,
msg: "ok"
};
response.end(JSON.stringify(res));
}
// 开始
var server = http.createServer(function (request, response) {
var postData = "";
var pathname = url.parse(request.url).pathname;
request.setEncoding("utf8");
request.addListener("data", function (postDataChunk) {
postData += postDataChunk;
});
request.addListener("end", function () {
if (typeof handle[pathname] === 'function') {
console.log('normal path', pathname);
handle[pathname](response, postData);
} else if (/\.css/g.test(pathname)) {
console.log('request a css', __dirname + pathname);
response.writeHead(200, { "Content-Type": "text/css" });
response.end(fs.readFileSync(__dirname + pathname));
}
});
});
console.log('http://localhost:3002/');
server.listen(3002);
最后: 并不是任何图片都能生成 DataURI 的，有些浏览器由于内存的限制，对 DataURI 的长度也会有所限制。例如：Opera 限制为 65000 characters。
最后的最后, base64 的优缺点
base64 可以减少HTTP请求. 同时比起图片更新上传清理缓存相对方便一点
缺点是因为字符串长度问题, 让导致css文件较大- -
未压缩的50期角标css是96kb, length为 97w
生产应用价值尚需讨论, 反正...我学了一手 Node.js的服务器hello world , 以及canvas 画图
