Research and Application of Online Image Processing Technology Based on HTML5
This study aimed to develop a web image processing application in order to process the pictures online. First, the front-page was designed and layout by HTML, CSS and BootStrap, then using File API to read the pictures or invoke the local camera to take p
- PDF / 252,076 Bytes
- 7 Pages / 439.37 x 666.142 pts Page_size
- 93 Downloads / 167 Views
Abstract This study aimed to develop a web image processing application in order to process the pictures online. First, the front-page was designed and layout by HTML, CSS and BootStrap, then using File API to read the pictures or invoke the local camera to take pictures, and draw them into Canvas. Next the basic image processing algorithm were studied, and through the JavaScript scripting language to achieve pixels processing. The result is that a web image processing application was developed. Users can get the basic adjustment function to the acquired images such as brightness, contrast and basic filter such as mosaic. This study used Canvas technology that provided by HTML5 to develop a high quality native applications without relying on plug-ins. Users do not need to download the client, just a web site that can get the basic adjustment function to the images. It was worth researching. Keywords Image processing
Web HTML5 Canvas
1 Introduction Due to the continuous improvement of the browsers’ performance and the growing popularity of wireless networks, whether a mobile phone or a computer, it is more and more dependent on the browser. In the application of many web pages, the field of image processing has attracted the attention of developers [1, 2]. Currently the most commonly used image post-processing software is client. Their processing platform is traditional C/S architecture. It is difficult to maintain, sharing and occupies large memory as well as suits the users with certain technical basis [3, 4]. In this paper, an image processing application was developed based on
C. Dong Z. Si (&) College of Packaging & Printing Engineering, Tianjin University of Science & Technology, Tianjin, China e-mail: [email protected] © Springer Nature Singapore Pte Ltd. 2017 P. Zhao et al. (eds.), Advanced Graphic Communications and Media Technologies, Lecture Notes in Electrical Engineering 417, DOI 10.1007/978-981-10-3530-2_46
367
368
C. Dong and Z. Si
HTML5 Canvas. It has the advantages of easy maintenance and sharing, users can process the pictures without installing the client. It will solve the problems that C/S architecture applications brought well.
2 HTML5 Canvas HTML5 is the choice of many mobile application and website now. It offers many new features such as local storage, geographic location, web multimedia, web works and so on [5, 6]. At present, the major browsers have a better support for Canvas. The support as follows (Table 1): Canvas is a new element of HTML5. It contains two attributes: height and width. The former defines the height and the latter defines the width of the Canvas. The element hasn’t the capabilities of rendering, only as s container of carrying pictures. It gets the drawing environment by calling the getContext() method of Canvas’s. Then use the build-in API combined with JavaScript language to draw graphics and handle pixels on the webpage. Canvas API provides two important functions: getImageData() and putImageData(), so that the browser has a capacity of pixel processing [7]
Data Loading...
