一次canvas中文字转化成图片后清晰度丢失的探索

本文最初记录在 2017 年 D2 期间。知乎问题为:参加第12届D2前端技术论坛,你有什么收获?
主要是想说一下百度的小姐姐分享的话题 《打造前端复杂应》。

最近正好接手了这样一个类似的项目,(百度 h5 百度脑图)不过整体全是基于 canvas 的,而且也没有事件广播,没有数据驱动,没有模型,全是直接 jquery 直接操作 DOM 的。整体感觉很混乱。现在一个人维护,改起来,感觉很忧伤。

不过听完分享之后,不管是事件广播,还是直接数据的双向绑定,都让我多了很多思路去改造。目前第一步就是先加入了 webpack、ES6、React、PubSub ,先把之前的 jquery 逐渐干掉吧。


不过小姐姐提到百度脑图 和 百度 H5 分别使用 SVG 以及 原生 DOM 来实现的,这样当然没什么问题,不过也提到为什么没用 canvas 的原因,主要是 事件绑定,元素选择相关的等等一些方面的考虑。

但是实际上,根据我项目的使用来说,直接使用 canvas 也是可以的,基本能解决掉提出来的顾虑,当然主要是有这个强大的开源 canvas 操作库:

fabric.js: Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

事件,动画,选中,变换,loadJOSN(),toJSON() 。强大之处,不太好用几句话说清楚,部分功能如下图,建议官网体验:

阅读全文

从零学习 canvas (一)

由于上一篇描述的原因。有图像处理的需求,于是我就开始学习 canvas 啦,和以前的一样,这一篇也是一边学一边写,敲出来的。有不正确的地方,欢迎指出。
canvas 本身的 api 描述是比较简单,但是衍生出来的东西,操作,图像处理,动画,性能,还是非常的多的。所以对于 canvas 的学习不出意外的话,将会是一个系列。这就是第一篇了。下面就开始吧

前言

1
<canvas id="canvas" style="background:blue;">浏览器不支持canvas</canvas>

在不支持 canvas 的浏览器中,显示标签中的内容。
绘图区域 默认是 300 x 150。
canvas 中的宽高是实际的宽高,css 中的宽高会等比缩放。
在开始绘图之前需要先,获取绘图环境。

1
2
3
4
5
const canvas = document.querySelector('#canvas');
if(canvas.getContext){
const context = canvas.getContext('2d');
// .... 绘制
}
阅读全文

浅谈 electron 中的 session 管理(隔离)

已经有很长一段时间没有产出博客了。
一. 是因为花了很多时间去专研业务,能够做到目前的基本业务流程理清,大致了然于胸(导致了一个问题:有人找我解决问题,我可能会先问一句,你的需求是什么?)
二. 确实是自己这一段时间确实懈怠了,每天上班回去就不想敲代码了,看看剧,看看小说,刷刷微博。虽然在组内有过一些分享,整理过一些东西,但是却没有将其在博客产出了。
这样的情况,让我明显的感觉到自己的成长速度相对于第一年成长的速度,慢了几个等级。这让我有一种危机感,于是克服这种懈怠,跳出舒适区,继续强健自己。重新回归吧。
最后。还是引用这个博客的描述:”兴趣遍地都是,专注和坚持才是真正稀缺的。”

不多说了,开始吧。

基础介绍

由于公司的项目内部调整,有幸接触 2 个星期的 electron 开发。(然后我又被拥抱变化了。。)实现了一个多账号的切换,并且同时对于多账号的聊天窗口做一个浏览器 tab 的集成的需求,这里对于接触到的知识点,做一个总结。以免完全忘记(忽略代码规范,我自己都看不下去)

electron-中文文档

阅读全文

FlexBox 布局详解

很久没有写博客了,这里把之前学习 flex 布局的一篇笔记整理了一下。发布到博客上。赶一个五月的末班车吧。还是得坚持啊!!

flex 弹性布局
FlexBox 可控制子元素:

  • 水平或垂直排成一行
  • 控制子元素的对齐方式
  • 控制子元素的高度/宽度
  • 控制子元素的显示顺序
  • 控制子元素是否折行

** display:flex; 创建 Flexbox 元素 **
在 flex 布局中必须理解的概念就是区分主轴和辅轴(侧轴):

阅读全文

ES6 简单特性学习记录

变量定义的新方式:let/ const

let 特性:

  1. 不允许重复声明
  2. 没有变量提升(预解析)
  3. 块级作用域(一对 {} 包括的区域称为一个代码块,let 声明的变量只在该代码块起作用)

例子1 :简单的打印数据

使用 var:

1
2
3
for(var i = 0; i<10 ; i++ ){
setTimeout(()=>console.log(i)) // 执行10次,全都打印 10
}

使用 let:

1
2
3
for(let i = 0; i<10 ; i++ ){
setTimeout(()=>console.log(i)) // 执行10次,打印 0 - 9
}

之前我们要实现这样的打印,必须使用闭包:

1
2
3
4
5
for(var i = 0; i<10;i++){
(function(j){
setTimeout(()=>console.log(j)) // 执行10次,打印 0 - 9
})(i)
}
阅读全文
使用搜索:谷歌必应百度