canvas
文章平均质量分 72
泡泡大怪兽
这个作者很懒,什么都没留下…
展开
-
前端页面添加水印
最近做的项目里都需要给页面设置水印,npm里有一些比较成熟的库可以直接用,但其实如果是简单的水印添加,自己写个工具函数也可以实现。前端水印的实现原理主要是利用canvas标签的一些属性,实现的思路:创建canvas元素 给canvas绘制文本,填充样式旋转角度、文字字体颜色等 将绘制好的canvas元素转换成base64格式的图片 动态创建一个div标签,相对位置属性为fixed,宽高设置为屏幕的可见大小,将上一步canvas转换的图片设置为div的背景图片并平铺满整个内部 最后将动态创建的原创 2022-05-30 22:58:56 · 5372 阅读 · 2 评论 -
前端压缩图片上传
背景上传图片文件这种需求在项目中经常遇到,不管是pc端还是移动端都会遇到上传图片的功能。由于现在手机拍摄功能的日益强大,相机拍摄的图片也越来越大动辄就是几M甚至十几M。这样上传可能对服务器会造成不小的压力,上传速度和体验也会大打折扣,所以经常就要限制上传的大小尺寸。如果在前端对图片进行压缩后上传,这样问题就能得到一定的缓解。实现思路通过input文件选择框拿到要上传的图片文件file FileReader.readAsDataURL()读取file内容。完成后result属性中将包含一个dat原创 2022-05-25 22:58:53 · 5384 阅读 · 0 评论