随笔分类 - canvas
摘要：场景 很多时候，都会遇见图片上传的场景。 在上传给服务器之前。 前端为了节省服务器的存储空间。 会对图片进行压缩。 下面我们来一起学习一下图片压缩。 图片压缩的步骤: 1.选择图片。使用 <input type="file">来实现 2.将选择的图片显示出来。 获取到图片的base64,然后进行赋值
阅读全文
摘要：开篇 最近在做一个图片截图的功能。 因为工作时间很紧张， 当时是使用的是一个截图插件。 周末两天无所事事，来写一个简单版本的截图功能。 因为写的比较简单，如果写的不好,求大佬轻一点喷 读取图片并获取图片的宽度和高度思路 首先读取文件我们使用input中类型是file。 我们需要对读取的对象进行限制，
阅读全文
摘要：开场白 今天遇到一个场景；就是更改一个图片的颜色； 当听到这个。我直呼好家伙；这个是要上天了呀。 但是仔细一思考；借助canvas好像也能实现； 于是下来研究了一下，并不难； 我们下面来看看怎么实现的 基本思路 主要是获取图片的像素点；ctx.getImageData() 然后去更改图片的像素点；
阅读全文
摘要：起因 今天遇见一个特别有意思的小功能。 就是更换人物图像的背景颜色。 大致操作步骤就是:点击人物-实现背景颜色发生变化 将图片绘画到canvas画布上 我们需要将图片绘制到canvas画布上。 这样做的目的是为了方便我们去操作像素点来更改颜色。 首先创建 Image 的实例。将图片的地址赋值给图片实
阅读全文
摘要：初识canvas canvas 我们可以理解为是一个画布。 它是一个载体。 我们的文字，图案，都是在这个载体(画布)上来进行操作的。 canvas的5个要素 canvas 具有的5个要素： 1.id 元素的唯一标识 2.width 宽度 3.height 高度 4.画笔,上下文 canvas.get
阅读全文
摘要：canvas添加水印思路 1.在画布上写上水印的名称(时间加上用户名) 2.canvas转化为base64，作为body的背景色 3.优化倾斜度和透明度 4.如果用户去除body的style水印消失 5.鸡肋 MutationObserver 在画布上写上水印的名称 <body> <canvas i
阅读全文
摘要：签名的实现功能 我们要实现签名： 1.我们首先要鼠标按下,移动，抬起。经过这三个步骤。 我们可以实现一笔或者连笔。 按下的时候我们需要移动画笔，可以使用 moveTo 来移动画笔。 e.pageX,e.pageY来获取坐标位置 移动的时候我们进行绘制 ctx.lineTo(e.pageX,e.pag
阅读全文
