网页版截图工具上线啦

Posted 2020-07-03

最近由于公司的一些事情再加上忙着开发完善这个网页版截图工具，所以有差不多一个星期没有和大家分享一下代码学习上的心得，就在今天也就是愚人节，终于上线了。这款网页截图工具被定义为beta版本，目前工具还存在着几个bug没有时间解决， 这些Bug会在下个版本v2.0得到解决，同时如果是有什么好的功能或者是建议的话，也希望大家在下面进行留言(大家快来做做测试工程师)

一、为什么会有这款工具？

　　其实这款工具在目前市面是还是比较少见的，但是为什么我会制作这款工具呢，一个原因是公司应该说是半个月前，老板想要对图片进行比例的截取，但是目前截取工具也就是自定义截取、全屏截取、定宽高截取、模块截取这几种方式(详细参考工具:faststone)，但是就是没有按照比例进行截取的，所以通过目前市面上的工具还是比较难实现这种截取的，所以想通过去网上查找有没有相关实现截图的思路，但是网上有是有，但是它们的截图的制作思路是：通过你所要求的宽高，然后让图片只在跟之个区域重合的地方才显示，其他地方也就是隐藏，但是这种方法不是真实意义上的截图，而是一种对你的视觉进行欺骗，让你以为你这样已经获取了图片的一部分（其余的部分是隐藏而已），待你把图片保存了之后，你会发现这张图片会完完整整的保存下来，然后获取了之后再通过后台进行操作(php or asp and so on),虽然这样可以实现，但是从公司的角度上来看，这种方法是不可取的，试想想什么人会使用这款工具，当然就是公司的编辑，公司的编辑我们假设都不会技术，如果是使用带后台的截图工具的花，那不是每天电脑都要去为他们装一个环境吗，这个很麻烦的，所以当时就想着开发一个网页版本的，多快好省(其实我在开发之前也是没有把握的，毕竟没做过，不知道这个方案的可行性)

二、开发工具的思路

开发款工具其实在思路上面也是有过一番纠结的，毕竟这种东西也是基本上没人去弄过，网上的资料也是少之又少，所以在这里特别鸣谢博主焰尾迭，在思路上面提供的帮助

这个工具的实现我们可以分成3个步骤

1、先进行图片的上传

2、对图片进行截图

3、将截取后的图片保存下来

图片上传的原理是将图片转码成为：base64编码，然后将编码写进网页。这个思路的实现我们可以通过使用html5内置的FileReader来实现，这个不是什么难事

图片的截取，这里博主就要说到自己的辛酸了，当时在弄这个图片的截图的时候，找了很多的方法都没有实现，但是在百度的时候，发现有一个JS的类库，可以将图片转换成为Canvas对象，canvas对象可以进行内部的操作（这个会在后续的博文中讲到），所以抱着试一试的心态就去试了，发现这个真的能够截图

将图片下载下来这个的原理是：HTML5有一个内置的download属性，我们在实现的时候，只需要将download属性通过点击事件动态添加给图片转换的对象即可，这里面保存的名称是要我们自定一个，考虑到在使用的时候不能再外部定义保存名称，而且为了避免每次保存的名称有所冲突，所以采用当前的时间作为保存的名称。

三、工具地址

 http://www.leslieblog.online/onlinetool/cutpicturetool/

希望各位小伙伴多多来测试一下，人人都是测试工程师，也希望大家不论是在设计还是在技术以及bug上面提供一些个人的宝贵建议，在此不胜感激

你的点赞是我前进的动力