首先是这样一个需求, 要兼容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页面试一下
$('img').rotate(50);
wow , 效果好像不错, 但实际使用发现
只支持图片的旋转, 不支持DIV等HTML
插件的作者表示会在3.x的实验版本中尝试不稳定的支持(摔
但是到了这里 ,解决问题的思路稍微明朗了一些 , 如果有一个正的(0deg)图片 , 用rotate插件旋转过来解决问题了
或者我们找方法批量生成一个旋转的图片
那么试试SVG?
虽然SVG 同样从IE9+才开始被支持 , 但是感觉如此广泛的使用群体和平台, 相信会有低版本IE 的polyfill方案的
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 启动
canvas to img
等待服务器确认
![]()
![]()
![]()
![]()
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文件较大- -
具体移步张鑫旭的文章
http://www.zhangxinxu.com/wordpress/2012/04/base64-url-image-%E5%9B%BE%E7%89%87-%E9%A1%B5%E9%9D%A2%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/
未压缩的50期角标css是96kb, length为 97w
生产应用价值尚需讨论, 反正...我学了一手 Node.js的服务器hello world , 以及canvas 画图