»WordPress»As a blogger facing Baidu programming, Yunluo writes code like this
Some time ago, the function of article poster seems to be very popular. Today Yunluo also wants to write the code of this function. By the way, let's show how Yunluo usually writes code?
There are a lot of bloggers like Yunluo, who have never learned programming knowledge before. When writing code, they can Baidu Baidu and Baidu again. Today Yunluo shows you how to use Baidu to write its own code. Take article poster function as an example
Code not moved, Baidu first
Since we want to do the article poster function, we should first Baidu [article poster] this keyword, and then look at a finished article poster is like what kind of factors, what characteristics and so on.
Analysis of functional characteristics
Entertainment found a website with Article poster function. After experiencing this function, we can draw the following features:
1: It is initiated by a click, so there should be a click event; 2: After clicking, there will be a pop-up window, so there should be a pop-up function; 3: After clicking, there is an animation in the pop-up window, so there may be an Ajax operation; 4: The pop-up window has two lists. One list shows the contents of the poster and the other displays the operation buttons; 5: The content of article poster consists of article title, article abstract, article picture and two-dimensional code of article link; 6: Click the download button to turn the poster into a picture and download it
The above is basically the characteristics of an article poster. Many article poster functions of other websites are basically the same as this. Then we will do it for these characteristics.
Determine technical direction
After analyzing the functional features, they began to determine the technical direction. A good direction can reduce a lot of work.First of all, we all know that the pop-up window is the function of JS, so we must first use js to write, and then there is an operation similar to Ajax, which may need the help of back-end PHP to extract the title and content of the article. These operations can be solved by using the back-end PHP and the front-end JS. Next, we will start to split the target, and then solve one target and one target.
solve the problem
1. According to the features mentioned above, we will solve them one by one. First, click the event. Here I use jQuery's$.click()Events.
2. Pop up function. Because this is a function of many websites, I directly call the fancybox pop-up function of my website. This function is mainly used for pop-up pictures, but other things can also be used to play pop-up.
3. AJAX is a self-contained method of jQuery, which is very simple, but I prefer the simplified version$.post()perhaps$.get()I don't know if it's useful, so put it back first.
4. For pop-up demonstration, we can use itgridLayout, cloud here is a direct reference to a lightweight CSS framework to solve.
5. Get the article title, article abstract and article image. One can get it from the background using Ajax, and the other is to get it directly from the front page. Of course, the front-end problem can be solved. Try not to use the back-end. This one uses jQuery$('#id').text()The content can be obtained, and the image is also processed in the same way. In fact, the abstract here is very simple. It is to obtain the content of the article, and then cut it based on the number of words. Generally, the summary on the poster is only a few words. In addition, the picture here also needs to be modified for the web page. The first image obtained may not be the article image, but may be the logo of the website,So it may be the second picture. Of course, it depends on the specific situation.Then we can directly use qrcode.js to generate the QR code. This application is very extensive, so it has a lot of content to search and it is very simple to use.
6. The last point is that this function is the real core. The operation of clicking and downloading is actually very simple. The key point is to turn the web page into a picture. Baidu found that similar solutions are basically solved by using canvas or, to be exact, with a front-end library html2canvas.js. We will talk about how to use it later.
Verify the code process
One article is not mainly about code, but mainly about how to write such code, so the specific results are not discussed here, but mainly about the process.
If you are not sure whether a piece of code can be executed or not, you can try it. If it is a short JS code, you can run it in the console in F12 under the browser to see if there is any result.
In the process of verification, try to reduce the use of variables. Yunluo recommends using the control variable method. In short, try not to use variables in the test code. For example, if you do pop-up code in the experiment, you don't need to use the code to get the title. You can write it manually. When the code is confirmed to be OK after debugging and testing, you can use the control variable method,And then freeze it, in short, don't change it.┗(＾0＾)┓
In addition, when writing code, use carriage return as much as possible to highlight the currently debugged code separately. Other irrelevant or frozen code can be left far away, such as the following: ﾟｰﾟ *) Code group A
Debugging modified code
Code group C
Identify core issues
In my understanding, if there is a piece of code that is the most painful and the most difficult to do, then I think this code is the core of this function. Of course, if you say that all the code is very painful, then I don't say it.
The sixth point of the above-mentioned points is the core of this.After Baidu search back and forth, I found that the hole of html2canvas is not small, there are several problems, one is the problem of cross domain image, one is the problem of image blur, one is the problem of image dislocation, because this article is only to make the function, not to do a finished product, so it is mainly to solve the problem of cross domain image.
solve the problem
After Baidu found that the problem of cross domain image can be solved with Base64 image format, because I don't know whether it is, so I must use code verification to test.
I took a screenshot of the poster containing the picture of the chain, and found that the picture was gone and the text was still there, indicating that the picture of the external chain failed to be taken. Then, I replaced the external picture with the base64 image. After reading it again, I found that the picture was effective. So it shows that using the base64 image can indeed solve the cross domain problem of the picture, and then started various baidu searches
20 minutes later.....
All kinds of failures, forget it. I'd better think about it in another direction.
As I said before, we should try to use the front-end for the problems that can be solved by the front-end. If the front-end can not be solved, the back-end can be added to support it. In fact, the cross domain problem is relative to the front-end, and the back-end PHP does not cross this problem, so we will use PHP to solve it.Use file directly_get_The contents() function obtains the remote image, and then converts it to Base64. The operation in this process is that the foreground obtains the image link, and then sends it to the back-end via Ajax. The back-end obtains the image URL sent by the foreground, and then converts it into Base64 format, and then returns it to the front-end as the Ajax result. This can solve the problem of cross domain images.
After using PHP to solve the problem of image crossing, I suddenly found that the pictures on my website are all from alicloud OSS. Then OSS seems to support setting cross domain problems. After a look at the OSS background, it is true. You can directly use wildcards to solve the cross domain settings,Then I took a look at qiniu cloud. Tencent cloud seems to support this cross domain problem....
OK, let's sum up the cross domain problem. If you have permission to set cross domain problems on the server side of the image, try to solve them on the server side. If you can't solve them, you can use PHP to convert them to Base64 format images to solve the cross domain problems.
This article uses the speech input method to input, so if there are errors, please do not care about these details, because the computer is not turned on, so the demo code will not be pasted
Published byClouds fall
No toss, no life, I am a rookie WordPress, a seller playing Taobao, welcome to know me, I am Yunluo!View all posts by cloud