The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Watermark
tudsy
post 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&copy;</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&copy;</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'>&nbsp;&nbsp;<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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tudsy
post 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)
Attached File  ecovib2d_adriant.php ( 15.85k ) Number of downloads: 566
Attached File  watermark.zip ( 33.14k ) Number of downloads: 675
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 29 2018, 09:37 AM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



None of the regulars do jQuery, not that I know of.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tudsy
post Jul 30 2018, 08:35 AM
Post #6


Advanced Member
****

Group: Members
Posts: 246
Joined: 30-September 14
Member No.: 21,611



Problem solved
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 30 2018, 08:39 AM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



You know, if you post the solution others that find this thread can benefit from it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 18th March 2024 - 09:30 PM