canvas 下载大体积图片解决方法

遇到问题

在慧眼项目中，客户有下载高清热力图的需求，于是乎觉得这就是一个将canvas保存成图片的过程。要高清图片就保存成png格式就行了，比较容易实现，就动手了。代码如下

1
2
3
4
5
6
7

var imageData = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
save_link.href = imageData;
save_link.download = '百度慧眼' + (new Date()).getTime() + '.png';
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);

然而千算万算没想到这段代码也能有问题，并且非常诡异。在下载体积较小的图片的时候，一切正常，但是图片稍微大一点，或者是mac下的2倍图片，浏览器就会报“网络错误”这个错误

这让人很费解，百度了一下也查不到这个问题所在的原因是什么，于是只能寻求解决办法。

发现问题

由于在项目中需要前端计算地图区域多边形面积，所以用到了BMapLib.GeoUtils.getPolygonArea()方法。但是在计算项目中矩形面积的时候，居然有时会出现面积是0的情况，并且传入的点数据实际上并没有什么问题。
那么问题出现了！究竟是什么原因导致一个矩形的面积会返回为0呢？为了探清这一真相，我们必须深入这个BMap几何运算库里面找到答案。

主要是介绍一下react-router注册路由的这两种写法，在传递参数时的区别。

1
2

<Route path="/changzhu" component={() => <Changzhu />} />
<Route path="/changzhu" component={Changzhu} />

遇到这个问题的起因，是在抽离地块部分二级菜单组件的时候，考虑到组件的通用性，设想今后可能会有点击Link时，将数据通过Link传入路由渲染的组件这一需求，决定将留出路由传递参数的接口。

忘记梦的原因

斯图吕贝尔的理论

1. 强度太弱。梦中激发感觉和知觉的兴奋太弱。
2. 人容易忘记只发生过一次的事。
3. 产生记忆时，感觉，念头，想法等应在恰好的结合中，不能各自行事，在梦里这些因素没能合理配合，很快会分解。
4. 大多数人对梦没什么兴趣，很快遗忘。（通过有意识的重复锻炼可以更好的记住梦的内容）

贝尼尼的补充理论

1. 清醒状态和睡眠状态的感觉变化不利于两者间内容的复制。
2. 梦里意念中的神乎其神的内容素材很难转换到现实清醒的意识中。

数据类型

非数字转换成数字

有三个方法Number()，parseInt()，parseFloat()（其中一元+操作符与Number()函数相同）

最近看了文龙的博客，他的主页有几个线条动画构成的 “I AM MOFEI” 字样，我觉得特别好玩，起初我以为是用canvas画的，但是也没想明白这么复杂的线条路程应该怎么画。后来，他告诉我用SVG动画来做的，这就简单的在网上找了一下SVG的动画姿势，整理一下。

周锐JD

写出块级元素、行内元素

块级元素：div， p， form， ul， li， ol， dl， form， address， fieldset， hr， menu， table
行内元素：span， strong， em， br， img， input， label， select， textarea， cite
注意：img标签是一种特殊的可以设置宽和高的行内元素

布局

布局有table布局，盒子布局，flex布局（弹性布局），栅格布局。
flex布局
学习flex布局可以通过玩这个小游戏：FLEXBOX FROGGY