Web screenshot Tool Online

Recently due to some of the company's things and busy to develop this web version of the tool, so there are almost one weeks without sharing with you the Code learning experience, in today is April Fools ' Day, finally on the line. This web tool is defined as a beta version, there are still several bugs in the tool there is no time to resolve, these bugs will be resolved in the next version of V2.0, and if there is any good features or suggestions, but also want to leave a message below (everyone quickly to do test engineer)

Why is there such a tool?

In fact, this tool is still relatively rare in the current market, but why I will make this tool, one reason is that the company should say half a month ago, the boss wants to do a proportional interception of the picture, but the current interception tool is custom interception, full screen interception, fixed width high interception, module interception of several ways (detailed reference tool : FastStone), but is not in accordance with the scale of interception, so through the current market tools are still relatively difficult to achieve this interception, so want to go online to find there is no related to the idea of implementation, but the online there is, but their production idea is: through the width of your request, Then let the picture only in the area coincident with the display, the other place is hidden, but this method is not the real sense, but a kind of deception of your vision, so you think you have already acquired a part of the picture (the rest of the part is hidden), after you save the picture, You will find that this image will be saved and then retrieved and then manipulated in the background (PHP or ASP and so on), although this can be done, but from the company's point of view, this method is not desirable, just imagine what people will use this tool, of course, the company's editor, The company's editors we assume that there is no technology, if the use of the tool with the background of the flower, it is not every day the computer to install an environment for them, this is very troublesome, so at that time thinking to develop a web version of the M.F.B. s (in fact, I was not sure before the development, after all did not do, Do not know the feasibility of the scheme)

Second, the idea of developing tools

Development of the tool in fact there is a tangled in the idea, after all, this thing is basically no one to get, the online information is also less and less, so here special thanks to Bo main flame tail, in the idea of the help provided above

The implementation of this tool can be divided into 3 steps

1. Upload the image first

2, to the picture

3. Save the captured pictures

The principle of image uploading is to transcode the image into: Base64 code, and then write the code into the page. The implementation of this idea can be achieved by using HTML5 built-in FileReader, which is not difficult

Picture interception, here bloggers will talk about their bitterness, at that time in the picture, find a lot of methods are not realized, but in Baidu, found that there is a JS class library, you can convert the picture into a canvas object, The canvas object can be manipulated internally (this will be discussed in the next blog post), so try it out with a try and find out that this really can

Download the image of this principle is: HTML5 has a built-in download property, when we implement, we just need to add the Download property by clicking the event dynamically added to the image conversion object, which is saved in the name is to us to customize one, The current time is used as the saved name, considering that it is not possible to save the name externally when it is used, and to avoid conflicting names each time it is saved.

Third, the tool address

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

I hope you have a lot of small partners to test, everyone is a test engineer, but also hope that you are in the design or technical and bug above to provide some personal valuable advice, here is grateful

Your praise is the driving force of my progress.

Web Tools Online