资讯专栏INFORMATION COLUMN

CanvasTools - 基于Canvas的截图辅助工具集

BigTomato / 1866人阅读

摘要:包含矩形,椭圆,画笔,文字,马赛克等多种工具以及撤销,保存等各种功能地址项目地址仿知乎截图反馈项目构思来源于知乎建议反馈功能中的截图反馈。期初看到该功能,惊为天人,不得不佩服知乎对用户体验的细节追求。

CanvasTools

基于Canvas的截图辅助工具集。包含矩形,椭圆,画笔,文字,马赛克等多种工具以及撤销,保存等各种功能

Github地址 项目地址 DEMO 仿知乎截图反馈

项目构思来源于知乎建议反馈功能中的截图反馈。期初看到该功能,惊为天人,不得不佩服知乎对用户体验的细节追求。然后又对比和参考了QQ截图(基本样式来源于此),花了三天时间完成了CanvasTools项目的构建。
截止目前,在完成了大部分功能的同时,也学习了大部分的Canvas API

可用功能

矩形工具

椭圆工具

画笔工具

文字工具

马赛克工具

撤销功能

保存功能(IE10+)

待完成功能

橡皮擦工具

如何使用 1.使用NPM

npm install

npm run build

2.直接使用

1.页面head标签中引入

2.在body中创建canvas以及用来放置工具条的容器

...

...

3.在 之前调用


文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/83369.html

相关文章

  • 基于casperjs、resemble.js实现一个像素对比服务

    摘要:写在最前本次分享一个提供设计稿与前端页面进行像素对比的服务,旨在为测试或者前端人员自己完成一个辅助性测试。图片像素对比工具。基本实现思路可以理解为通过将图片转为后,获取其图像像素点,之后对每个像素点进行一次比对。 写在最前 本次分享一个提供设计稿与前端页面进行像素对比的node服务,旨在为测试或者前端人员自己完成一个辅助性测试。相信我,在像素级别的对比下,网页对设计稿的还原程度一下子就...

    Jingbin_ 评论0 收藏0
  • 网页保存为图片及高清截图优化 | canvas跨域图片配置

    摘要:本次技术调研来源于项目中的一个重要功能需求实现微信长按网页保存为截图。以下主要解决两类跨域的图片资源包括已配置过的中的图片资源和微信用户头像图片资源。 本次技术调研来源于H5项目中的一个重要功能需求:实现微信长按网页保存为截图。 这里有个栗子(请用微信打开,长按图片即可保存):3分钟探索你的知识边界 将整个网页保存为图片是一个十分有趣的功能,常见于H5活动页的结尾页分享。以下则是项目中...

    zhaochunqi 评论0 收藏0
  • 网页保存为图片及高清截图优化 | canvas跨域图片配置

    摘要:本次技术调研来源于项目中的一个重要功能需求实现微信长按网页保存为截图。以下主要解决两类跨域的图片资源包括已配置过的中的图片资源和微信用户头像图片资源。 本次技术调研来源于H5项目中的一个重要功能需求:实现微信长按网页保存为截图。 这里有个栗子(请用微信打开,长按图片即可保存):3分钟探索你的知识边界 将整个网页保存为图片是一个十分有趣的功能,常见于H5活动页的结尾页分享。以下则是项目中...

    GHOST_349178 评论0 收藏0
  • 网页保存为图片及高清截图优化 | canvas跨域图片配置

    摘要:本次技术调研来源于项目中的一个重要功能需求实现微信长按网页保存为截图。以下主要解决两类跨域的图片资源包括已配置过的中的图片资源和微信用户头像图片资源。 本次技术调研来源于H5项目中的一个重要功能需求:实现微信长按网页保存为截图。 这里有个栗子(请用微信打开,长按图片即可保存):3分钟探索你的知识边界 将整个网页保存为图片是一个十分有趣的功能,常见于H5活动页的结尾页分享。以下则是项目中...

    Galence 评论0 收藏0
  • Windows操作系统——WindowsVulnScan提权辅助工具简介与使用教程

    摘要:主要用途为查找是否有公开的网站为。但缺点是该网站限制网络发包的速度,采用了单线程的方式,扫描耗时较长。希望本篇文章能对你有所帮助,有错误的地方,欢迎指出喜欢的话,不要忘记点赞哦 ...

    CarterLi 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<