首先是這樣一個需求, 要兼容IE7的旋轉(zhuǎn)的角標(biāo)
隨著這個期數(shù)增多 ( 假設(shè)50期 ) 雪碧圖也變的越來越大 , CCS3的 rotate 只能兼容到IE9
IE5 都支持的 filter旋轉(zhuǎn)則是個沉重的知識點 ( 矩陣旋轉(zhuǎn)并沒有實驗成功 )
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官網(wǎng)寫著兼容到IE6+ , 只要在jq后面引入就好了
寫個test頁面試一下
<script src="jquery.js"></script>
<script src="jQueryRotate.js"></script>
$('img').rotate(50);
wow , 效果好像不錯, 但實際使用發(fā)現(xiàn)
只支持圖片的旋轉(zhuǎn), 不支持DIV等HTML
插件的作者表示會在3.x的實驗版本中嘗試不穩(wěn)定的支持(摔
但是到了這里 ,解決問題的思路稍微明朗了一些 , 如果有一個正的(0deg)圖片 , 用rotate插件旋轉(zhuǎn)過來解決問題了
或者我們找方法批量生成一個旋轉(zhuǎn)的圖片
那么試試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節(jié)點 , 中間寫好文字就行
rotate(x, origin) origin 里是x,y坐標(biāo)具體可以移步 http://www.zhangxinxu.com/wordpress/2015/10/understand-svg-transform/
當(dāng)然 , 也有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
但經(jīng)過實驗 , 面對svg復(fù)雜的path路徑時 , 會失敗
而且每一個svg都要用script標(biāo)簽包裹起來 , 感覺性能開銷比較大
發(fā)散下思維,看看Unicode
unicode是字體在網(wǎng)頁端最原始的應(yīng)用方式，特點是：
- 兼容性最好，支持ie6+，及所有現(xiàn)代瀏覽器。
- 支持按字體的方式去動態(tài)調(diào)整圖標(biāo)大小，顏色等等。
- 但是因為是字體，所以不支持多色。只能使用平臺里單色的圖標(biāo)，就算項目里有多色圖標(biāo)也會自動去色。
- 注意：新版iconfont支持多色圖標(biāo)，這些多色圖標(biāo)在unicode模式下將不能使用
那么去搜索一下 https://unicode-table.com/cn/
沒什么驚喜... Unicode 看來跑題了
再次面向stackoverflow編程之后, 讓我們試一試canvas
canvas 有方便的API把文字放到畫布上
然后用 一個 toDataURL() 可以再把canvas畫布變成一個base64 格式的png 輸出
Base64編碼是從二進(jìn)制到字符的過程，可用于在HTTP環(huán)境下傳遞較長的標(biāo)識信息, 是一種網(wǎng)上常用的加密格式, image 的src會將加密后的base64轉(zhuǎn)換回二進(jìn)制, 變成圖片, 且IE7 下是支持的(沒有開虛擬機(jī)XP)
好像可以著手批量生成圖片了! 手寫個服務(wù)器試試!
一共兩個文件, 下面的html是index.html, 在下面的js 是 index.js 服務(wù)器端腳本 ( 等有了更工具化的版本試著發(fā)個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">等待服務(wù)器確認(rèn)</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();
// 旋轉(zhuǎn)畫布, 準(zhǔn)備寫字
c.rotate(45 * Math.PI / 180);
c.translate(12, -30); // 勾股定理算出位移
c.font = '14px'; // 可以改字體
c.textAlign = 'center';
// 循環(huán)生成
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發(fā)送
sub.addEventListener('click', function () {
var xhr = new XMLHttpRequest();
tip.innerText = '發(fā)送中';
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);
};
// 感覺可以再學(xué)習(xí)學(xué)習(xí)別人的框架, 看看靜態(tài)資源請求怎么寫
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 的，有些瀏覽器由于內(nèi)存的限制，對 DataURI 的長度也會有所限制。例如：Opera 限制為 65000 characters。
最后的最后, base64 的優(yōu)缺點
base64 可以減少HTTP請求. 同時比起圖片更新上傳清理緩存相對方便一點
缺點是因為字符串長度問題, 讓導(dǎo)致css文件較大- -
未壓縮的50期角標(biāo)css是96kb, length為 97w
生產(chǎn)應(yīng)用價值尚需討論, 反正...我學(xué)了一手 Node.js的服務(wù)器hello world , 以及canvas 畫圖
