Home > Developer > JavaScript
Recently, a customer asked to add text watermark effect on the webpage picture, and the content is obtained from the text input box of the current webpage in real time, studied a half-day, in the net also refer to a lot of friends of the method, plus the garden enthusiastic good buddies help finally realized, first look at:
The code is as follows:
1 <!DOCTYPE HTML> 2 <Head>3 <MetaCharSet= "UTF-8">4 <title>Drawing by input text</title> 5 </Head>6 7 <Body>8 <CanvasID= "MyCanvas"width= "+"Height= "$" >9 Your Browser does not support the HTML5 canvas tag.Ten </Canvas> One A <Script> - - window.onload= function () { the - varimg= NewImage (); - img.src= './img/demo.jpg'; - Img.onload= function () { + // - varCanvas=document.getElementById ("MyCanvas"); + varCTX=Canvas.getcontext ("2d"); A // at ctx.drawimage (IMG,0, 0); - - Ctx.font= "80px Microsoft Yahei"; - Ctx.fillstyle= "Rgba (252,255,255,0.8)"; - //the contents of the text box are added to the picture area. - document.getElementById ("btn"). onclick= function () { in Ctx.filltext (document.getElementById ("text"). Value, -, $); - //document.getElementById ("text"). Value = ""//You can choose whether to empty the contents of the input box to } + } - } the </Script> * $ <BR> Panax Notoginseng <inputtype= "text"ID= "text"value="" /> - <inputtype= "button"ID= "BTN"value= "Submit"Click= "Draw" /> the + </Body> A </HTML>
HTML5 canvas+ native JavaScript real-time Get text box content draw picture watermark
@ Rizhao star qq:469135789 reprint please indicate the source, retain the copyright information.
HTML5 canvas+ native JavaScript real-time Get text box content draw picture watermark
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
