推荐关注 Meteor JSLint - a Javascript code quality tool jsFiddle D3.js WebStorm 推荐书目 Javascript 权威指南第 5 版
Closure: The Definitive Guide
Closure: The Definitive Guide 
请教 data:image 问题，固定宽高纯透明图像，为什么 length 差两三倍？
nowheretoseek 2024-04-09 09:50:22 +08:00 1419 次点击这是一个创建于 550 天前的主题，其中的信息可能已经有所发展或是发生改变。
我需要一些固定宽高的透明图像，在 chrome 的 console 中运行 js 代码生成，核心代码如下：
```js
const canvas_tmp = document.createElement("canvas");
canvas_tmp.width = width;
canvas_tmp.height = height;
const base64 = canvas_tmp.toDataURL();
console.log(base64);
```
生成的 base64 长度大约 400：
```
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPkAAAAgCAYAAADQft53AAAAAXNSR0IArs4c6QAAANpJREFUeF7t0wERAAAIAjHpX9oef7MBQ3aOAIG0wNLphCNA4IzcExCICxh5vGDxCBi5HyAQFzDyeMHiETByP0AgLmDk8YLFI2DkfoBAXMDI4wWLR8DI/QCBuICRxwsWj4CR+wECcQEjjxcsHgEj9wME4gJGHi9YPAJG7gcIxAWMPF6weASM3A8QiAsYebxg8QgYuR8gEBcw8njB4hEwcj9AIC5g5PGCxSNg5H6AQFzAyOMFi0fAyP0AgbiAkccLFo+AkfsBAnEBI48XLB4BI/cDBOICRh4vWDwCD4VoACGTmyVVAAAAAElFTkSuQmCC
```
可是在一个在线 sprites 工具[Responsive CSS Sprite Generator]( https://responsive-css.spritegen.com/)生成的长度只有 170 左右：
```
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAikAAABLAQMAAACP/oUlAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAABxJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAA4MFM0AAWaWeL4AAAAASUVORK5CYII=
```
都是纯透明的占位图像，没其余元素，怎么会差这么多？怎么生成这种体积小的？
```js
const canvas_tmp = document.createElement("canvas");
canvas_tmp.width = width;
canvas_tmp.height = height;
const base64 = canvas_tmp.toDataURL();
console.log(base64);
```
生成的 base64 长度大约 400：
```
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPkAAAAgCAYAAADQft53AAAAAXNSR0IArs4c6QAAANpJREFUeF7t0wERAAAIAjHpX9oef7MBQ3aOAIG0wNLphCNA4IzcExCICxh5vGDxCBi5HyAQFzDyeMHiETByP0AgLmDk8YLFI2DkfoBAXMDI4wWLR8DI/QCBuICRxwsWj4CR+wECcQEjjxcsHgEj9wME4gJGHi9YPAJG7gcIxAWMPF6weASM3A8QiAsYebxg8QgYuR8gEBcw8njB4hEwcj9AIC5g5PGCxSNg5H6AQFzAyOMFi0fAyP0AgbiAkccLFo+AkfsBAnEBI48XLB4BI/cDBOICRh4vWDwCD4VoACGTmyVVAAAAAElFTkSuQmCC
```
可是在一个在线 sprites 工具[Responsive CSS Sprite Generator]( https://responsive-css.spritegen.com/)生成的长度只有 170 左右：
```
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAikAAABLAQMAAACP/oUlAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAABxJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAA4MFM0AAWaWeL4AAAAASUVORK5CYII=
```
都是纯透明的占位图像，没其余元素，怎么会差这么多？怎么生成这种体积小的？
1 条回复
 | 1 nowheretoseek OP  2 保存下来两张图像比较了下，大致明白了，canvas 生成的图像默认是 32bit ，在线工具生成的是 1bit 。 |
Select Language