推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
这是一个创建于 262 天前的主题，其中的信息可能已经有所发展或是发生改变。
我需要一些固定宽高的透明图像，在 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