Text Detail ASP. NET Baidu Ueditor editor implement upload image add watermark effect instance

This article mainly introduces the ASP. NET Baidu Ueditor Editor 1.4.3 This version of the upload image to add watermark effect of the relevant information, text and sample code through the introduction of very detailed, I believe that we have a certain reference value, the need for friends below to see it together.

Objective

Recent work encountered a demand, is to realize the ASP. Baidu Ueditor Image upload add watermark function, by finding the relevant data finally realized, the following to share the implementation of the effect, the text at the end of the example code, we can refer to the study, the following to learn together.

First of all, look at the functional interface we want, if you find that this effect is not what you want, the back of the content will not be looked at.

Prepare

Download the Ueditor compressed package from the official website, I downloaded ueditor1_4_3-utf8-net this version, the following introduction is for this version.

Modify Interface

Let's find out where we're going to add the watermark [checkbox].

As a result, we should go to image.html this file to modify our HTML code, the 36th line of the image.html file to start adding a few lines of HTML code, such as:

Refresh the interface, click Multi-image upload > local upload, the interface becomes this:

Find a workable solution

Open Firebug, check the console, we upload a picture, look at the request information:

As you can see, the uploading of images is handled by CONTROLLER.ASHX, and there are the requested parameters: action and encode. Let's take a look at how controller.ashx is handled:

The foreground passed the parameter the value of the action parameter is Uploadimage, the class action is instantiated by the derived class Uploadhandler, and Uploadhandler is injected into the instance of the Uploadconfig class by the constructor, and finally by the action.Process() call:

This is File.WriteAllBytes the way to save the picture.

Above is the main processing code of "local upload" in the picture. Now think about it, we want to add watermark to the picture, how should we do it?

Someone quickly reacted: we can request controller.ashx from the front desk with whether or not to add a watermark "string" to pass to the backstage, the background through the judgment can be processed accordingly!

Realize

1. First find the request Controller.ashx, the parameters are from where to add, JS Foundation better students should not be difficult to locate:

Let's add a parameter to him: "Whether to add watermarks"

2. Get the parameters in the background and decide if you want to add watermarks

All right, that's it.

Upload a photo to see: