Experience in developing a javascript component for implementing logo deformation effects when applied on product images
DOI:
https://doi.org/10.62911/ete.2024.02.02.10Keywords:
website, browser, logo, JavaScript, CSS, HTML, canvasAbstract
The development of an online store for selling goods is quite relevant in view of the possibilities of attracting new customers. The main task in promoting a store on the Internet market is to ensure competitive advantages and uniqueness of content. Visual configuration of a product is such a tool. It ensures consumer interest, the formation of a unique offer for him and provides an individual approach and loyalty. This is especially important for companies that offer the application of any logos on souvenir products. At the same time, it is important to provide the user with tools for applying various effects to the logo image when placing it on the product image. When researching and selecting tools to implement this task, the use of JavaScript for development, as well as the Canvas component for displaying images with warp effects, was justified. Using JavaScript, universal components were developed that allow applying the following deformation and distortion effects to logo images: deformation effects using the quadratic Bezier curve equation, deformation effects using the ellipse equation, deformation with an arch effect, deformation with a perspective effect.
References
Collins, M. J. (2017). Hypertext Markup Language. In Pro HTML5 with CSS, JavaScript, and Multimedia. Complete Website Development and Best Practices. Apress Berkeley, CA. https://doi.org/10.1007/978-1-4842-2463-2
Den Odell. (2014). Pro JavaScript Development. Coding, Capabilities, and Tooling. Apress Berkeley, CA. https://doi.org/10.1007/978-1-4302-6269-5
Hartmut Prautzsch, Wolfgang Boehm, Marco Paluszny. (2002). Bézier and B-Spline Techniques. Springer Berlin, Heidelberg. https://doi.org/10.1007/978-3-662-04919-8.
Jeanine Meyer. (2018). The Essential Guide to HTML5. Using Games to Learn HTML5 and JavaScript. Apress Berkeley, CA. https://doi.org/10.1007/978-1-4842-4155-4.
John Resig, Russ Ferguson, John Paxton. (2015). Pro JavaScript Techniques. Second Edition. Apress Berkeley, CA. https://doi.org/10.1007/978-1-4302-6392-0
Jonathan Reid. (2015). HTML5 Programmer's Reference. Apress Berkeley, CA. https://doi.org/10.1007/978-1-4302-6368-5
Mark E. Daggett. (2013). Expert JavaScript. Apress Berkeley, CA. https://doi.org/10.1007/978-1-4302-6098-1
Martin Rinehart. (2015). JavaScript Object Programming. Apress Berkeley, CA. https://doi.org/10.1007/978-1-4842-1787-0
Shane Hudson. (2014). JavaScript Creativity. Exploring the Modern Capabilities of JavaScript and HTML5. Apress Berkeley, CA. https://doi.org/10.1007/978-1-4302-5945-9
Terentiev, O., Horbatyuk, E., Lototskyi, A (2023). Research of canvas technology in web-applications. Modern Engineering and Innovative Technologies, 1(27-01), 96–100. https://doi.org/10.30890/2567-5273.2023-27-01-004
Downloads
Published
Issue
Section
License
This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.
