As required by the project, you need to quickly browse the image at the front end and merge the images at the back end. You can learn from the experiences of many people on the internet and share your experiences with the main code.
Front-end code:
Window. onload = function (){
Document. getelementbyid ("fileupload1"). attachevent ("onchange", showimg, false );
}
Function showimg (){
Document. getelementbyid ("IMG"). Filters. Item ("DXImageTransform. Microsoft. alphaimageloader"). src = Document. getelementbyid;
}
The fileupload control in vs is used to upload images. on the client side, you can directly use js to obtain its value and add an onchange event to it.
Note that the showing () function is used directly in ie6. getelementbyid ("IMG "). src = document. getelementbyid ("fileupload1 "). value can be used to instantly browse images. However, in IE7, the security is enhanced and direct IMG in JS is not allowed. SRC assignment, so we use the alphaimageloader technology provided by Microsoft.
Remember to add a style as follows:
# IMG {filter: progid: DXImageTransform. Microsoft. alphaimageloader (sizingmethod = scale );}
Code for merging in the background: system. Drawing. Image image = system. Drawing. image. fromfile (PATH );
System. Drawing. Image copyimage = system. Drawing. image. fromfile (path2 );
Graphics G = graphics. fromimage (image );
// Draw the foreground image on the background image based on the specified parameters (perform the merging operation)
G. drawimage (copyimage, new rectangle (imgx, imgy, imgw, imgh), 0, 0, copyimage. Width, copyimage. Height, graphicsunit. pixel );
// Save the merged image in the path3 position in JPEG format
Image. Save (path3, system. Drawing. imaging. imageformat. JPEG );
Here, I obtain the address and name of the image uploaded by the fileupload control on the client (My uploaded image name is calculated using a class that obtains the maximum value of the database table ID + 1). Of course, we also need to obtain the size of the image sent from the client and the relative location of the two images during merging (this is a JS tip and it is not difficult to master ), the foreground image of the graphics class is drawn on the background image according to the specified parameters to complete the image merging operation.
At present, my project has not involved the problem of transparent color, GIF image problems, so there is no way to complete the processing of GIF images. however, there is a solution on the Internet. and the image at the beginning. the SAVE () method always reports a general error of GDI +, which is a permission issue on the Internet. My problem is that there is a problem with path writing, because after all, it is not a directly written path, track variables through debugging to find a path problem.
By the way, I forgot to mention that the parameters in the front-end JS are passed to the back-end through hidden controls. if you are interested, you can further expand this. I began to want to create a custom control like this. Wait for time to finish it!