I would like to create a button that when clicked a static image is displayed as the html canvas elements background?
How can I go about doing this?
Not sure if a stylesheet switcher is the right direction? Maybe there is a smarter solution?
Try this
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btnSet').click(function(){
$('#canvas').css("background","url('plant1.jpg')");
});
});
</script>
</head>
<body>
<canvas id="canvas" width="500" height="200">
</canvas>
<br/>
<button id="btnSet">Set Canvas BG</button>
</body>
</html>
if all you want to do is display an image, you might as well use an img tag:
<script>
function() setImage() {
document.geTElementById("myImage").src = "myImage.jpg";
}
</script>
<input type="button" value="Set Image" onclick="setImage()"/>
<img id="myImage"/>
make sure myImage.jpg actually points to your image offcourse.
Related
I want to apply an image filter using Fabric.js but I'm unable to. I'm a beginner with Fabric, but here is the code which I'm currently using:
$(document).ready(function(){
var canvas = new fabric.Canvas('mon_canvas');
fabric.Image.fromURL('img/appart.jpg', function(img) {
img.filters.push(new fabric.Image.filters.Sepia());
img.applyFilters(canvas.renderAll.bind(canvas));
canvas.add(img);
});
});
<body>
<canvas id="mon_canvas" width="800" height="500" style="border:1px dotted black;"></canvas>
<img src="img/appart.jpg" id="my-image" style="visibility:hidden;">
</body>
<script type="text/javascript" src="fabricJS/dist/fabric.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
I have also imported the following scripts:
fabricJS/dist/fabric.js
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js
Any suggestions would be helpful.
I have found this code that takes a screenshot of a form. I am trying to take a screenshot of an image or a video.
Is there a way that can take a screenshot of a part of the webpage and saves it the way this code is saving the form ?
This is my html code
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="main.css" />
<title>Poster</title>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript">
var Submit = function() {
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
};
</script>
</head>
<body>
<div id="main_image">
<img src="image.jpg" id= "image"/>
<div id="user_text">IT IS TOTALLY AWESOME</div>
</div>
<div id="edit_text_box">
<textarea id="user_input" placeholder="Your text here.." rows="2" cols="30" > </textarea>
<div id="change_size">
<span style="float: left;">FONT-SIZE : </span>
<button id="decrease_size">-</button>
<button id="increase_size">+</button>
</div>
<button onclick="Submit();" >Submit</button>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/edit_text.js"></script>
</body>
</html>
To take the actual image from a canvas and copy it on another one you need to take all the imageData of the first canvas (the one with the edited video)
var myImageData = context.getImageData(left, top, width, height);
and put the imageData on the second canvas:
targetContext.putImageData(myImageData, dx, dy);
and to save it as an image:
var image = canvas.toDataURL();
After that you will have a string as image that can be used as the src attribute for html images.
Note that you're asking how to copy something onto a canvas that why I told you about the getImageData and putImageData. If you only need the image of the current status of the original image, you don't need the first step, just use canvas.toDataURL
I am trying to add a source to an image through Javascript, and some JQuery code I found on internet, but it doesn't seem to work:
<html>
<head>
<script src = "http://www.example.com/images/">
var count=1;
var initnumber=100;
function changeImage(){
count++;
$("#HTMLPhoto").attr('src'+((initnumber+count).toString)+".jpg");
}
</script>
</head>
<body onload="changeImage()" >
<img id="HTMLPhoto"/>
<button onclick="changeImage()">Next Image</button>
</body>
I am also trying to call once again the changeImage() function with button clicks.
Edit:Managed to make it work, I changed the code a bit, if anyone wants to see:
<html>
<head>
<script>
var count=1;
function nextImage(address){
count++;
image = document.getElementById('HTMLPhoto');
image.src ="http://www.example.com/images/"+(address+count)+".jpg";
}
</script>
</head>
<body>
<img id="HTMLPhoto"/>
<button onclick="nextImage(100)">Next Image</button>
</body>
Change:
$("#HTMLPhoto").attr('src'+((initnumber+count).toString())+".jpg");
To:
$("#HTMLPhoto").attr('src', ((initnumber+count).toString())+".jpg");
I made a small image gallery with one big image along with few small ones under neath. there is a zoomer attached with big image and when i click on small image it replaces the big image but zoomer shows the old image instead of new one
jQuery
jQuery(document).ready(function($){ //fire on DOM ready
$('#myimage').addpowerzoom()
})
javascript
function movImg(img){
var bImg = document.getElementById('myimage');
bImg.src=img.src;
$(document).trigger("ready");
}
html
<img id="myimage" src="img/abc.jpg" alt="" />
<image src="thumbnails/xyz.jpg" onClick="movImg(this);" width="73px" style="cursor: pointer;" />
where i am wrong or what's the right way to do it?
Thanks
Try to call $('#myimage').addpowerzoom(); instead of $(document).trigger("ready");
This worked for me. It looks like the slight delay that happens when you change the source of the image breaks powerzoom. The idea is to call addpowerzoom() after image is loaded.
<!DOCTYPE html>
<html lang="en-AU">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="ddpowerzoomer.js"></script>
<script type="text/javascript">
function movImg(img){
var bImg = document.getElementById('myimage');
bImg.src = img.src;
jQuery('#myimage').one("load", function() {
jQuery('#myimage').addpowerzoom();
});
};
jQuery(document).ready(function($){
$('#myimage').addpowerzoom();
});
</script>
</head>
<body>
<img id="myimage" src="img/abc.jpg" alt="" />
<img id="thumb" src="thumbnails/xyz.jpg" onClick="movImg(this);" width="64px" style="cursor: pointer;" />
</body>
</html>
I have a script that places an image based on a mouse click thanks to Jose Faeti. Now I need help adding a .click() event to the code below so that when a user clicks the image it performs the function shown in the script.
<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click()
I put the entire code below, in case you want to see it.
<html>
<head>
<script language="javascript" type="text/javascript">
<!--
document.getElementById('foo').addEventListener('click', function (e) {
var img = document.createElement('img');
img.setAttribute('src', 'http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png');
e.target.appendChild(img);
});
// -->
</script>
</head>
<body>
<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click()
</body>
</html>
Help?
First of all, this line
<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click()
You're mixing HTML and JavaScript. It doesn't work like that. Get rid of the .click() there.
If you read the JavaScript you've got there, document.getElementById('foo') it's looking for an HTML element with an ID of foo. You don't have one. Give your image that ID:
<img id="foo" src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />
Alternatively, you could throw the JS in a function and put an onclick in your HTML:
<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" onclick="myfunction()" />
I suggest you do some reading up on JavaScript and HTML though.
The others are right about needing to move the <img> above the JS click binding too.
You can't bind an event to the element before it exists, so you should do it in the onload event:
<html>
<head>
<script type="text/javascript">
window.onload = function() {
document.getElementById('foo').addEventListener('click', function (e) {
var img = document.createElement('img');
img.setAttribute('src', 'http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png');
e.target.appendChild(img);
});
};
</script>
</head>
<body>
<img id="foo" src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />
</body>
</html>
Enclose <img> in <a> tag.
<img src="smiley.gif">
it will open link on same tab, and if you want to open link on new tab then use target="_blank"
<img src="smiley.gif">
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript" >
function openOnImageClick()
{
//alert("Jai Sh Raam");
// document.getElementById("images").src = "fruits.jpg";
var img = document.createElement('img');
img.setAttribute('src', 'tiger.jpg');
img.setAttribute('width', '200');
img.setAttribute('height', '150');
document.getElementById("images").appendChild(img);
}
</script>
</head>
<body>
<h1>Screen Shot View</h1>
<p>Click the Tiger to display the Image</p>
<div id="images" >
</div>
<img src="tiger.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick()" />
<img src="Logo1.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick()" />
</body>
</html>