Canvas to data url not working - javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/html2canvas.js"></script>
<script src="js/canvas2image.js"></script>
<script>
function mypng(){
var c=document.getElementById("picture");
var dataURL = c.toDataURL("image/png");
alert(dataURL);
}
</script>
<a id="jpeg" href="#" onclick="mypng();">
<canvas id="picture"></canvas>
but nothing happens, not run the function.
of course I am generating an image on the canvas. If I right click the image and select view this image I can see correctly and encoded in base64 url

<a id="jpeg" href="#" onclick="mypng();">
It is a link, so return false on click event to prevent going to /#.
<a id="jpeg" href="#" onclick="mypng(); return false;">
EDIT:
Also, you do not close the <a> tag.
Try this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/html2canvas.js"></script>
<script src="js/canvas2image.js"></script>
<script>
function mypng(){
var c=document.getElementById("picture");
var dataURL = c.toDataURL("image/png");
alert(dataURL);
event.preventDefault();
}
</script>
<a id="jpeg" href="#" onclick="mypng();">LINK</a>
<canvas id="picture"></canvas>
FIDDLE

Related

How to add link on slider images

i have used the following code for image slider. and how can i set the link to each images
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds){
//change the image
if(!imageID){
document.getElementById("myimage").src="1.png";
imageID++;
}
else{if(imageID==1){
document.getElementById("myimage").src="2.png";
imageID++;
}else{if(imageID==2){
document.getElementById("myimage").src="3.png";
imageID=0;
}}}
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
</script>
</head>
<body style='background:black;' onload='changeimage(2)'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'><img width='700px' height='100px' id='myimage' src='http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg'/></div>
</body>
</html>
please tell how to add link to each images
You can do like your image src.
use .setAttribute('href', "yoururl"); for set a html attribute with JS.
Add a link around your images and change the href attribute.
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds){
var link = document.getElementById("mylink");
//change the image
if(!imageID){
document.getElementById("myimage").src="1.png";
link.setAttribute('href', "url1");
imageID++;
}
else{if(imageID==1){
document.getElementById("myimage").src="2.png";
link.setAttribute('href', "url2");
imageID++;
}else{if(imageID==2){
document.getElementById("myimage").src="3.png";
link.setAttribute('href', "url3");
imageID=0;
}}}
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
</script>
</head>
<body style='background:black;' onload='changeimage(2)'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'>
<a id="mylink" href="#">
<img width='700px' height='100px' id='myimage' src='http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg'/>
</a>
</div>
</body>
</html>
You can also use if-else-if instead of nested if-else statements. This works.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds){
//change the image
if(!imageID){
document.getElementById("myimage").src="https://pixabay.com/static/uploads/photo/2015/08/14/08/29/images-888133_960_720.jpg";
document.getElementById("link").href = "url1";
imageID++;
}
else if(imageID==1){
document.getElementById("myimage").src="http://eyespired.nl/wp-content/uploads/2013/09/bronzen-beelden-matteo-pugliese-607x458.jpg";
document.getElementById("link").href = "url2";
imageID++;
}else if(imageID==2){
document.getElementById("myimage").src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg";
document.getElementById("link").href = "url3";
imageID=0;
}
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
</script>
<body style='background:black;' onload='changeimage(2)'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'>
<a id="link" href="#">
<img width='700px' height='100px' id='myimage' src='http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg'/>
</a></div>
</body>

how to randomize image once it is clicked?

I am trying to create a random gif generator. Very simple in design, just have the gif/img load in and once the user clicks/taps it randomizes and pulls another random image from the array.
For now I would just like to have the image randomize when it is clicked.
Currently it only randomizes when the page is refreshed.
HTML
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="js/rand.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<head>
<title>Gif Generator - Prototype</title>
</head>
<body>
<h1>Gif Generator - Prototype</h1>
<section>
<p>This image is random</p>
<a href="#" class="click">
<script>
getRandomImage()
</script>
</a>
</section>
</body>
JS
var randomImage = new Array();
randomImage[0] = "images/100.jpg";
randomImage[1] = "images/200.jpg";
randomImage[2] = "images/300.jpg";
randomImage[3] = "images/400.jpg";
function getRandomImage() {
var number = Math.floor(Math.random()*randomImage.length);
document.write('<img src="'+randomImage[number]+'" />');
}
As per your jQuery reference at the top, below is the proposed solution:
$(function() {
$('a.click').click(function(e) {
e.preventDefault();
var number = Math.floor(Math.random()*randomImage.length);
$(this).html('<img src="'+randomImage[number]+'" />');
});
});
on click method serves the purpose.
in an <img> tag you can add an onclick method
<img src="" alt="Random image" onclick="getRandomImage()">

Javascript - Changing an image with variables

I'm trying to create a slide show but I'm having some difficulty. I've googled the problem and read loads of pages but I still can't get it to work. I'm doing this all in my header, then the header.php will be included on whichever page. I've tried setting the source to a string containing the location, creating an image before and then setting it to that image's source, and just trying odd things trying to get it to work.
The strange thing is when I call the updateSlider() function, the source of my image is null even though I can see it on the screen, and afterwards when I set it, it says there is a source but the image is the same.
But at the moment I'm just trying to change the image when I click a button and then I'm going to try and make the slide show. Here is the header.php code, you can see some of the different things I've tried in it:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">#import "./includes/layout.css";</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var slideImages = new Array("includes/images/mmSlideImage1.png",
"includes/images/mmSlideImage2.png", "includes/images/mmSlideImage3.png");
var slideImage = newImage();
slideImage.src = slideImages[0];
pic = document.createElement("img");
pic.setAttribute("src", "includes/images/mmSlideImage2.png");
pic.setAttribute("alt", "No Image");
var url2 = "includes/images/mmSlideImage2.png";
var img2 = new Image();
img2.src = url2;
function updateSlider() {
console.log(document.getElementById("ht").getAttribute("src"));
document.getElementById("ht").setAttribute("src", img2.src);
console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<img src="includes/images/mmSlideImage1.png" alt="Logo" width="970" height="278" />
<button type="button" onclick="updateSlider()">Update Slider</button>
<div id="nav">
Home
About
Gallery
Programs
</div>
Thank you in advance for any help!
==================================================================================
UPDATED CODE:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">#import "./includes/layout.css";</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
</script>
<script>
var url2 = "includes/images/mmSlideImage2.png";
function updateSlider() {
console.log(document.getElementById("ht").getAttribute("src"));
$('ht').attr('src', url2);
console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<img src="includes/images/mmSlideImage1.png" alt="Logo" width="970" height="278" />
<button type="button" onclick="updateSlider()">Update Slider</button>
Simple. You're trying to give an anchor a image attribute. Give your img an id and fix it in the Javascript. For example, if you give it an "currentSlideImage" id:
$('#currentSlideImage').attr('src', url2);
BTW, I'd suggest you take a read on Unobstrusive Javascript.
i am not sure why are you using new image when you are just changing src of an image tag.
the easiest way is to use jquery code
$('#imgTagID').attr('src', url2);
or in javascript
document.getElementById("imgTagID").src = url2;
Here you go you were just missing id Tag inside jquery i just tried it with online images
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var url2 = "http://www.thinkstockphotos.com.au/CMS/StaticContent/WhyThinkstockImages/Best_Images.jpg";
function updateSlider() {
//console.log(document.getElementById("ht").getAttribute("src"));
$('#ht').attr('src', url2);
//console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<a href="index.html" class="logo" > <img id="ht" src="http://www.nasa.gov/sites/default/files/images/743348main_Timelapse_Sun_4k.jpg" alt="Logo" width="970" height="278" /></a>
<button type="button" onclick="updateSlider()">Update Slider</button>
</body>
</html>

Change image with href in java script

<a href="#" id=BigSwatch><img src="addtocart.png" onclick="SwapLink('ekhle.html');"
onClick=display('pleasewait.png') /></a>
In this coding, I want change image and change href also.
here when user click on addtocart.png image, I want to change image to pleasewait.png and when user click on pleasewait.png image, I want to change href like "url2.html", but when i apply my coding image changed but url2.html page also redirect directly.
<a href="#" id=BigSwatch><img id="test" src="addtocart.png" onclick="SwapLink('ekhle.html');"
onClick=display('pleasewait.png') /></a>
Script
$('#BigSwatch').on({
'click': function(){
$('#test').attr('src','pleasewait.png');
$('#BigSwatch').attr('href','url2.html');
}
});
HTML
<a href="#" id=BigSwatch><img src="addtocart.png" /></a>
in JS
$("#BigSwatch").on("click","img",function(){
$(this).attr("src","pleasewait.png");// here your image path will set
$(this).closest("#BigSwatch").attr("href","ekhle.html");
});
The better way is you can put an anchor with background image. You can follow the simple process -
Keep an anchor with background image "addToCart.png" and with class "addToCart"
On click change the class to "pleasewait" which will change the background-image to "pleasewait.png"
On Click write a function to check, if it has class "addToCart" then prevent default redirection else go to "url2.html".
HTML:
CSS:
.addToCart {
background-image:url('images/addToCart.png');
display:block;
/* Define width and height */
}
.pleaseWait {
background-image:url('images/pleaseWait.png');
}
Javascript:
$('#BigSwatch').click(function(e){
if($(this).hasClass('addToCart')) {
$(this).removeClass('addToCart').addClass('pleaseWait');
e.preventDefault();
}
});
I Hope this would work fine.
You can do this with your HTML mark up only like this
<a href="#" id=BigSwatch onClick="this.href='ekhle.html'">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png"
onClick="this.src='https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png'; this.parent.href='ekhle.html'" />
</a>
Live Demo
I have used images from google. :)
try this code.
<!DOCTYPE html>
<html>
<head>
<script>
function switchHref(){
info=document.getElementById("hr");
info1=document.getElementById("link");
if(info.src.match("pleasewait.png")){
window.location="irl.html";
}
else{
info.src="pleasewait.png";
}
}
</script>
</head>
<body>
<img src="addtocart.png" id="hr" onclick="switchHref()"
width="100" height="100"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script>
function switchHref(){
info=document.getElementById("hr");
info1=document.getElementById("link");
doc=document.getElementById("rad");
if(doc.checked==true){
info.src="pleasewait.png";
}
if(info.src.match("pleasewait.png")){
window.location="url.html";
}
}
</script>
</head>
<body>
<img src="addtocart.png" id="hr" width="100"
height="100"/>
<input type="radio" id="rad"
onChange="switchHref()" />Click
</body>
</html>

HTML5 Canvas Slideshow Using Javascript

I'm not sure exactly where my issue lies, I'm relatively new to both canvas and JavaScript so I'm sorry if this is very vague but I cannot get my slideshow canvas to function, let alone display an image.
<!DOCTYPE html>
<html>
<head>
<title>PhotoGenesis</title>
<LINK REL=StyleSheet HREF="homecss.css" TYPE="text/css" MEDIA=screen>
<script type="text/javascript" src="homescript.js"></script>
</head>
<body onLoad="javascript:preloader()">
<header>
<a href=http://localhost.com/home><img id=logo alt="PhotoGenesis" src="logo.png""/> </a>
<nav id=headernav>
<a href=http://localhost.com/home>home</a>
<a href=http://localhost.com/news>news</a>
<a href=http://localhost.com/photography>photography</a>
<a href=http://localhost.com/video>video</a>
<script type="text/javascript">
var lightbox="lightbox ("+"0"+")";
document.write("<a href=http://localhost.come/lighbox>" + lightbox + "</a>");
</script>
<a href=http://localhost.com/about>about</a>
<a href=http://localhost.com/contact>contact</a>
<a href=http://localhost.com/blog>blog</a>
</nav>
<span id=search></span>
<img id=miscone alt="Full Screen" src="miscone.png"/>
<img id=misctwo alt="Share" src="misctwo.png"/>
</header>
<main onLoad="javascript:canvasslider()">
<canvas id="defaultbackground" width=100%; height=100%;/>
</main>
<footer>
<nav id="footernav">
<a href=http://www.facebook.com><img id="fbnav" alt="Facebook" src="fbooknav.png"/></a>
<a href=http://www.twitter.com><img id="tnav" alt="Twitter" src="twitternav.png"/></a>
<a href=http://www.stumbleupon.com><img id="snav" alt="StumbleUpon" src="stumblenav.png"/></a>
</nav>
</footer>
</body>
</html>
<script language="JavaScript">
function preloader()
{
// counter
var i = 0;
// create object
imageObj = new Image();
// set image list
images = new Array();
images[0]="background1.png"
images[1]="background2.png"
images[2]="background3.png"
// start preloading
for(i=0; i<=images.length; i++)
{
var backstring ="background"+i+".png";
images[i].id=backstring;
imageObj.src=images[i];
}
}
function canvasslide()
{
function init()
{
defaultbackground = document.getElementById("defaultbackground");
ctx = defaultbackground.getContext("2d");
for(i=0; i<=images.length; i++){
var backstring ="background"+i+".png";
sprite = document.getElementById(backstring);
ctx.drawImage(sprite,0,0);}
}
}
</script>
sprite.onload = function() {
ctx.drawImage(sprite,0,0);
}
I'm pretty sure your image isn't loaded yet when you draw it on canvas. Try something like this, I'm not sure this is the right code because I didn't get every part of your code, but you have to use image.onload function before you draw it onto a canvas.

Categories

Resources