Use JavaScript to assist in importing pictures

Use JavaScript to assist in importing pictures

Demand

Let's talk about demand first. Spring Festival Home To see my parents, Dad hooked on photography. He put the usual photos uploaded to the Chengdu Picture Network, the Chengdu Image network dedicated to a "Quick shoot Chengdu" section, for everyone to take pictures of the life of the share up. The Daily editor will also select one of the most distinctive images, published in the "Chengdu Business Newspaper".

Quick Shoot Chengdu section of the website is: http://photo.chengdu.cn/diary.php, in addition, this Chengdu picture Network also comes with a "Pat guest Forum", The Forum's website is: http://photo.chengdu.cn/bbs/.

After he excitedly introduced me to his brilliant achievements, he put forward his needs: he hopes to "shoot Chengdu" after the picture, can automatically save the picture to his "on the Forum" in the "personal album".

Research

A simple study of this site. Obviously this website comes with the forum is to change someone else's open source system, and "quick shoot Chengdu" This function because the demand is more special, can see is another developed system. These 2 sets of systems simply combine the user's personal authentication function. There is no implementation of the image from "Quick shoot Chengdu" into the "Forum album" function. So, I can only find a way to achieve it. Either do it all by hand or write a program.

A simple attempt to manually copy, found completely not feasible, mainly is the text of the picture introduced by the CSS to the layout together, if simply copy the text out, the order of the text will be confused. So it's only programmed.

The technical steps we need to implement programmatically are simple:

1. Analog landing to the quick shoot Chengdu.
2. Click on "My work" from the personal page to see a list of your works.
3. Download each of the works in your work list, including all the pictures and the corresponding introductory text.
4. The simulation landed in the "Pat Guest Forum".
5. For each work, create a corresponding album in the Forum's album, and then upload the corresponding image, and match the corresponding text.

Technical Solutions

In fact, my most familiar language is Java, but if I do this in Java, I need to:

1. Understand the login Form, simulate the browser login process, and then save the successful login Cookie.
2. Simulate a variety of Web page requests, the corresponding page content crawling over.
3. Parses HTML content, matches the URL of the image with a regular expression, and introduces the content of the text. And then save them all.
4. Learn about the content of this BBS's corresponding Form, simulate uploading pictures and introduction.

These steps are troublesome, and some well-done sites, in order to prevent the simulation of landing, usually in the login before the execution of a confusing JavaScript, the Form of the user name and password for further processing and POST to the server. Considering that this website is a change of open source BBS, may have the corresponding function. Then I need to look at the JS code, understand what it has done, and implement the corresponding logic in Java.

Every language has its good place, for the web, the most convenient to deal with Javascript is of course. If you use Javascript, the above troublesome steps can be omitted. So finally, I wrote 2 pieces of Javascript to handle the job.

First JavaScript, take out the corresponding image URL and introductory text, generate a second JavaScript code

var PS = $ ('. Lazyload '); var ts = $ (' H5 '); for (var i =0; i < ps.length; ++i) { Console.log ($ (ps[i]). attr (' original ')); } Console.log ($ ($ (' H2 ') [0]). Text ()); console.log ( for (var i = 0; i < ps.length; ++i) { console.log ( ' document.getElementsByTagName ("textarea") [' + i + '].value= ' \ \ '); console.log ( "Picture properties:" + $ (ts[i* 2]). Find ( console.log ( "Picture Description:" + $ (ts[i* 2+1]). Find ( } /span>

The second Javascript is generated by the first Js, which is used to fill in the introductory text of the corresponding picture in the Forum album.

With the above section of JS, I guided the photo steps are as follows:

1. Open the "Quick shoot Chengdu" page and find the photo topic you need to export.
2. Execute the section of JS I mentioned above, it will list the images that need to be downloaded, and generate another section of JS.
3. Manually download the pictures listed above to local.
4. In the Forum's personal album, these images are selected to upload, and then execute the generated another section of JS, the picture will be automatically filled in.

Originally upload pictures This step should also be done automatically, but I can not solve the browser restrictions on JS: The browser does not allow JS to help users select local files. So this step can only be done manually.

The work of the Guide picture finally took 1.5 hours to complete with the help of JS script. But the heart still a little uncomfortable, listen to Zyc said can use Nodejs and jsdom to simulate browser-related functions in the command line, so I intend to try to use this work with Nodejs and jsdom to complete. In the study, after the completion of a summary of the blog.

Use JavaScript to assist in importing pictures