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>
I don't do jQuery. But isn't there hundreds of examples on the internet? Like https://www.jqueryscript.net/other/jQuery-Plugin-To-Create-Customizable-Image-Watermark-watermarker.html.
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: 579
watermark.zip ( 33.14k )
Number of downloads: 686
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.
None of the regulars do jQuery, not that I know of.
Problem solved
You know, if you post the solution others that find this thread can benefit from it.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)