Watermark |
Watermark |
tudsy |
Mar 17 2018, 12:13 PM
Post
#1
|
Advanced Member Group: Members Posts: 246 Joined: 30-September 14 Member No.: 21,611 |
Hi
I am trying to use jquery to add a watermark to an image. I understand little of jquery any help would be appreciated. The relevant code is in the function ChangePic. Thanks. Code: <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="viewport" content="width=device-width, initial-scale=1.0 minimum-scale=1.0"/> <link type="text/css" rel="stylesheet" href="Main.css"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- jQuery 1.5+ --> <script src="jquery.watermark.min.js" type="text/javascript"></script> <!-- jQuery plugin Watermark --> <script src="jquery.watermark.js" type="text/javascript"></script> <style type ="text/CSS"> @media print{ body {display:none;} } @media Save As{ body {display:none;} } div.absolute{ position:absolute; top:200px; } div { height: auto; /*if more info comes on the page, it will stretch down*/ width: auto; margin: 0 auto; /*this will cause the div to be in the center */ } </style> <script> if (screenfull.enabled) { screenfull.request(); } </script> <script> function absorbEvent_(event) { var e = event || window.event; e.preventDefault && e.preventDefault(); e.stopPropagation && e.stopPropagation(); e.cancelBubble = true; e.returnValue = false; return false; } function preventLongPressMenu(node) { node.ontouchstart = absorbEvent_; node.ontouchmove = absorbEvent_; node.ontouchend = absorbEvent_; node.ontouchcancel = absorbEvent_; } function init() { preventLongPressMenu(document.getElementById('myImage')); } </script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-908952-3', 'auto'); ga('send', 'pageview'); ga('require','linkid'); </script> <script> var personsnamejs ='AdrianTudini'; var personpicture = personsnamejs + '.jpg'; var priceofartarray = ["2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2"]; var personpath = 'http://103.226.223.161/~ecovibdc/ECOVIB2D/MYART/' + personsnamejs + '/' + personpicture; function setvar(){ var x = document.getElementById('Title'); x.style.color = '#00FF00'; x.style.fontSize ='36px'; document.getElementById('PersonImage').src = personpath; var z = document.getElementById('PlaySound'); z.style.color = '#00FF00'; z.style.fontSize ='24px'; var t = document.getElementById('paypal'); t.style.color = '#00FF00'; t.style.fontSize ='24px'; var u = document.getElementById('freename'); u.style.color = '#00FF00'; u.style.fontSize ='20px'; var u = document.getElementById('freename1'); u.style.color = '#00FF00'; u.style.fontSize ='20px'; var v = document.getElementById('freeaddress'); v.style.color = '#00FF00'; v.style.fontSize ='20px'; var c = document.getElementById('reason'); c.style.color = "#00FF00"; c.style.fontSize = "36px"; var d = document.getElementById('Buy'); d.style.color = "#00FF00"; d.style.fontSize = "36px"; document.getElementById('PersonImage').src = personpath; document.getElementById('paypal').innerHTML ="* Your name and email address will not be sold or traded."; document.getElementById('reason').innerHTML = "Art for your desktop/device"; }; </script> <script type='text/javascript'> function linkSound(picname,personname) { if(picname !== 'default') { y = document.getElementById('Graphic_select').selectedIndex; soundfile = picname.replace('.jpg','.mp3'); var soundfilepath = 'http://103.226.223.161/~ecovibdc/ECOVIB2D/MYART/' + personname + '/Sound/' + soundfile; var defsoundfilepath = 'http://103.226.223.161/~ecovibdc/ECOVIB2D/MYART/' + personname + '/Sound/ecovib2d.mp3'; if (y >0) { document.getElementById('Sound').src = soundfilepath; } if(y===0) { document.getElementById('Sound').src=defsoundfilepath; } } }; </script> <script> function changePic(picname,personname) { if(picname !== 'default') { watermark(picname) .image(watermark.text.lowerRight('ECOVIB2D', '45px serif', '#fff', 0.5)) .then(function (img) { document.getElementById('text').appendChild(img); }); var path = 'https://103.226.223.161/~ecovibdc/ECOVIB2D/MYART/' + personname + '/Graphic/' + picname; var defpath = 'https://103.226.223.161/~ecovibdc/ECOVIB2D/MYART/' + personname + '/Graphic/ecovib2d1.jpg'; var myimg = document.getElementById('myImage'); var newImage = new Image(); var x = document.getElementById('Graphic_select').selectedIndex; if(x === 0){ newImage.src = defpath;} if(x>0) { newImage.src = path;} newImage.onerror = function() { alert('There was a problem loading the Image file! - Please try again!'); myimg.style.height = ''; myimg.src = ''; } newImage.onload = function() { if(x === 0){ myimg.src = defpath; document.getElementById('Price').innerHTML=''; } if(x>0) { myimg.src = path; } r=x-1; if(r=== -1){r=0;} var Priceofart = priceofartarray[r]; document.getElementById('person').value = personname; document.getElementById('Cost').value = Priceofart; document.getElementById('pic').value = picname; var y = document.getElementById('Price'); y.style.color = '#00FF00'; y.style.fontSize ='36px'; document.getElementById('Price').innerHTML= 'Price of Art (AUD): $' + Priceofart + ' including GST'; } } } }; </script> <title>ECOVIB2D©</title> </head> <body onload='setvar();init();' oncontextmenu='return false' style='background-color: #660000'> <script> window.onpageshow = function(event) { if (event.persisted) { window.location.reload(); } } </script> <script language=JavaScript> <!-- //-webkit-user-select:none right mouse click Script //By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive //For full source code, visit http://www.dynamicdrive.com var message="Go to ECOVIB2D!-https://ecovib2d.blogspot.com.au"; /////////////////////////////////// function clickIE4(){ if (event.button==2){ alert(message); return false; } } function clickNS4(e){ if (document.layers||document.getElementById&&!document.all){ if (e.which==2||e.which==3){ alert(message); return false; } } } if (document.layers){ document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmousedown=clickIE4; } document.oncontextmenu=new Function("alert(message);return false") // --> </script> <table class='div' align='center' border='0'> <tbody> <tr> <td bgcolor='#660000'><img height='auto' src='ecovib2d1.jpg' width='auto' /></td> <td><p align='center' id ='Title'>ECOVIB2D©</p> <br> <br> <div class='div' id='google_translate_element'></div><script type='text/javascript'> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element'); } </script><script type='text/javascript' src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'></script> </td> </tr> </tbody> </table> <br> <br> <table class='div' style="background-color:#660000;" align='center'> <tbody> <tr> <td align="center"> <img id='PersonImage' height='250' width='250' style='pointer-events:none;-webkit-user-select:none;rotation;' alt=''> </td> <td> <p align='center' style='pointer-events:none;-webkit-user-select:none' id="reason"></p> <div class="absolute"> <select id='Graphic_select' onchange='changePic(this.value,personsnamejs);linkSound(this.value,personsnamejs);'> <?php $pname1 ='Adrian Tudini'; echo "<option value = '' style='height:30px;'>Click or tap to view/select $pname1 s Art </option>"; $pname='AdrianTudini'; foreach(glob("/home/ecovibdc/public_html/ECOVIB2D/MYART/".$pname."/Graphic/*.jpg") as $files1){ $files1 = basename($files1); echo "<option value='{$files1}'>{$files1}</option>"; }; ?> </select> </div> <img id='myImage' style='pointer-events:none;-webkit-user-select:none;' alt='' src='ecovib2d1.jpg' align='center' height='250' width='250'> <p align='center' style='pointer-events:none;-webkit-user-select:none;' id='PlaySound'>Play the sound with my art in mind</p> <audio id="Sound" preload='none' style='-webkit-user-select:none;' controls="controls"> <source src='http://103.226.223.161/~ecovibdc/ECOVIB2D/MYART/AdrianTudini/Sound/ecovib2d.mp3' type='audio/MPEG'> </audio> <br> <br> </td> </tr> </tbody> </table> <center> <p style='pointer-events:none;-webkit-user-select:none' id='Price'> </p></center> <center> <form action='Index.php' id ='payment_form' method="POST"/> <input type='hidden' id='person' name='Person'/> <input type='hidden' id='Cost' name='Price' /> <input type='hidden' id='pic' name='Graphic'/> <p align='center' style='pointer-events:none;-webkit-user-select:none;' id='freename'>Enter FirstName:</p> <p align='center'><input maxlength='50' name='Firstname' size='50' type='text' /></p> <p align='center' style='pointer-events:none;-webkit-user-select:none;' id='freename1'> Enter SurName:</p> <p align='center'><input maxlength='50' name='Surname' size='50' type='text' /></p> <p align='center' style='pointer-events:none;-webkit-user-select:none;' id='freeaddress'>Enter Email-Address:</p> <p align='center'><input id='e-address' maxlength='50' name='email' size='50' type='text' /></p> <input type="submit" id ='Buy' value="Buy now !" style='pointers-events:none;-webkit-user-select:none;' text="Checkout" /> <br> <img src='Paypal.png'> <img src="//www.mysecuressls.com/images/seals/crazy_secure_03.png" border="0"> <!-- Begin eWAY Linking Code --> <div id="eWAYBlock"> <div style="text-align:center;"> <a href="http://www.eway.com.au/secure-site-seal?i=10&s=15&pid=abe63ccc-6b2d-4c28-a09e-0b3c27e61a0e&theme=0" title="eWAY Payment Gateway" target="_blank" rel="nofollow"> <img alt="eWAY Payment Gateway" src="https://www.eway.com.au/developer/payment-code/verified-seal.ashx?img=10&size=15&pid=abe63ccc-6b2d-4c28-a09e-0b3c27e61a0e&theme=0" /> </a> </div> </div> <!-- End eWAY Linking Code --> </form> </center> <p align='center' id='paypal'></p> </body> </html> |
CharlesEF |
Mar 21 2018, 03:36 PM
Post
#2
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
I don't do jQuery. But isn't there hundreds of examples on the internet? Like this one.
|
tudsy |
Mar 25 2018, 08:12 PM
Post
#3
|
Advanced Member Group: Members Posts: 246 Joined: 30-September 14 Member No.: 21,611 |
Hi
I need help. I have defined a class called picnamew in ecovib2d_adriant.php as follows" class picnamew { $(function wm() { $('.img').watermark({ text:'ECOVIB2D' + ©, textWidth:100, textSize:'13', outputType:'jpeg', }) }; function callwm () { wm(); }; }; The problem is that it is not doing the watermarking when i create a new object. The relevant code is in the function ChangePic in ecovib2d_adriant.php. Also, Am I using the correct files to do the watermarking ? Thanks. Attached File(s) ecovib2d_adriant.php ( 15.85k ) Number of downloads: 573 watermark.zip ( 33.14k ) Number of downloads: 680 |
CharlesEF |
Mar 29 2018, 06:19 AM
Post
#4
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
Sorry, I don't do jQuery. I'm not sure how many people on this forum do. You may wish to look for a jQuery forum, or at least another forum where you might get help.
|
pandy |
Mar 29 2018, 09:37 AM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
None of the regulars do jQuery, not that I know of.
|
tudsy |
Jul 30 2018, 08:35 AM
Post
#6
|
Advanced Member Group: Members Posts: 246 Joined: 30-September 14 Member No.: 21,611 |
Problem solved
|
pandy |
Jul 30 2018, 08:39 AM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
You know, if you post the solution others that find this thread can benefit from it.
|
Lo-Fi Version | Time is now: 25th April 2024 - 12:19 PM |