This makes me crazy. I simply would like html2canvas capture an image
I have that:
<div id="post" class="xx">Déposer</div>
<canvas width="500" height="200"></canvas>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript">
var canvas = document.querySelector("canvas");
html2canvas($("#post"), {canvas: canvas}).then(function(canvas) {
var img = canvas.toDataURL()
window.open(img);
});
</script>
The result is this image:
The button appear at the bottom of the canvas, and I would like to keep only the button, any idea on how to get only the button ?
If I change the size of the canvas, then the result is like this:
and here is the code of the button :
<div id="post">
<div style="float:left;background:url(g.png);width:21px;height:53px;"></div>
<div id="c" style="float:left;background:url(c.png) repeat-x;height:53px;font-family:arial;text-shadow: -1px -1px rgba(0, 0, 0, 0.3);padding: 12px 20px;font-size: 20px;line-height: 24px;color: rgb(255, 255, 255);text-align: center;vertical-align: middle;text-decoration: none;">Déposer</div>
<div style="float:left;background:url(d.png);width:21px;height:53px;"></div>
</div>
and the files :
which makes this button (no extra css in the page) :
The following code:
<html>
<head>
<style>
canvas {
border: solid red 1px;
}
</style>
</head>
<div id="post">
<div style="float:left;background:url(g.png);width:21px;height:53px;"></div>
<div id="c" style="float:left;background:url(c.png) repeat-x;height:53px;font-family:arial;text-shadow: -1px -1px rgba(0, 0, 0, 0.3);padding: 12px 20px;font-size: 20px;line-height: 24px;color: rgb(255, 255, 255);text-align: center;vertical-align: middle;text-decoration: none;">Déposer</div>
<div style="float:left;background:url(d.png);width:21px;height:53px;"></div>
</div>
<canvas width="500" height="200"></canvas>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript">
var canvas = document.querySelector("canvas");
html2canvas($("#post"), {canvas: canvas});
//.then is an invalid function for html2canvas
/*.then(function(canvas) {
var img = canvas.toDataURL()
window.open(img);
});
*/
</script>
</html>
Gives me the following results:
From that I would conclude
html2canvas has a small amount of padding around where it adds the image to canvas
You may have css on your button that may be causing the canvas to push it down farther than you would like
Related
I want to insert desmos calculator into html5 canvas or into fabric.js
Now I insert desmos calculator below canvas^
var canvas = new fabric.Canvas('drawarea');
var elt = document.getElementById('calculator');
var calculator = Desmos.GraphingCalculator(elt);
calculator.setExpression({ id: 'graph1', latex: 'y=x^2' });
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
<script src="https://www.desmos.com/api/v1.6/calculator.js?apiKey=dcb31709b452b1cf9dc26972add0fda6"></script>
<canvas width="800" height="800" id="drawarea" style="border: 1px solid red;float: right">
</canvas>
<div id="calculator" style="width: 600px; height: 400px;"></div>
How should I solve my problems inserting desmos into canvas?
I was testing this sample code and I obtained the error
Uncaught TypeError: Cannot set property 'width' of null
where "canvas.width = ...".
Could you help me? Here the code:
var canvas = document.getElementById("sim00");
var dim = {
w: 600,
h: 480
};
canvas.width = Math.min(dim.w, window.innerWidth - 20);
canvas.height = Math.min(dim.h, window.innerHeight - 20);
canvas {
border: 1px solid #d3d3d3;
max-width: 100%;
height: auto;
}
<canvas id="sim00" width="300" height="300"></canvas>
I had the same issue, What worked is that I changed the position of my script tag.
Automatically when I generate my HTML skeleton, the script tag appears in the <head>
but after placing it in the <body>, my code worked.
<html>
<head>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<canvas id="canvas" width="1950px" height="800px"></canvas>
<canvas id="canvasbg" width="1950px" height="800px"></canvas>
</body>
</html>
<html>
<head>
</head>
<body>
<canvas id="canvas" width="1950px" height="800px"></canvas>
<canvas id="canvasbg" width="1950px" height="800px"></canvas>
<!-- I omitted some code for simplicity. -->
<!-- Bottom line, Check the placement of your js file. -->
<script type="text/javascript" src="main.js"></script>
</body>
</html>
You have to use style to change css from js.
canvas.style.width = Math.min(dim.w, window.innerWidth - 20);
canvas.style.height = Math.min(dim.h, window.innerHeight - 20);
<!DOCTYPE html>
<html>
<body>
<div id="container">
<canvas id="myCanvas" width=350 height=250>
</canvas>
</div>
</body>
</html>
to change the size use
var myCanvas = document.querySelector("#myCanvas");
myCanvas.width = 350;
myCanvas.height = 250;
I have to create a circle with a different background color using canvas in html, and on the bottom of it, i wanna make a button that changes the background color of the circle on clicking it and then changes the color back on clicking it again. How do i do that?
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; padding:20px; }
canvas{border:1px solid black;}
</style>
<script>
$(function(){
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
drawCircle(ctx,false);
function drawCircle(context,fill){
context.beginPath();
context.arc(90, 90, 50, 0, 2 * Math.PI);
context.closePath();
context.stroke();
context.fill();
context.fillStyle="green";
}
$("#c1").click(function(){ drawCircle(ctx,true); });
});
</script>
</head>
<body>
<div class="row-fluid">
<div class="span1 offset3">
<canvas id="myCanvas" width="200" height="200"></canvas>
</div>
<div class="span1">
<br/><a id="c1" href="#" style="margin-left:70px;">click</a>
</div>
</div>
</body>
</html>
You can not magically change the (background) color of any component drawn to the canvas.
You need to draw a new circle with a different color and override the previous circle.
I was trying to implement like similar website.
http://printio.ru/full_print_tees/new
Even i tried answer of following post but it is not working.Does any one have the solution or fiddle.
Fabric.js Clip Canvas (or object group) To Polygon
I have create following example but it is not working similar. Please let me know what is problem
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="fabric.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border: 1px solid red; }
</style>
<script>
$(function(){
var canvas = new fabric.Canvas('canvas');
var group = [];
fabric.loadSVGFromURL("http://fabricjs.com/assets/2.svg",function(objects,options) {
var loadedObjects = new fabric.Group(group);
loadedObjects.set({
left: 100,
top: 100
});
canvas.add(loadedObjects);
shape = canvas.item(0);
canvas.remove(shape);
canvas.clipTo = function(ctx) {
shape.render(ctx);
};
canvas.renderAll();
},function(item, object) {
object.set('id',item.getAttribute('id'));
group.push(object);
});
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
Hello are you looking something like this on my example?
load one image (t-shirt)
add i-text object
manipulate text object (edit,move up/down/left/right) on the t-shirt
small snippet:
fabric.Image.fromURL(myImg, function(myImg) {
var img1 = myImg.scale(scaleFactor).set({ left: 0, top: 0 });
var text = new fabric.Text('the_text_sample\nand more', {
fontFamily: 'Arial',
fontSize:20,
});
text.set("top",myImg.height*scaleFactor-myImg.height*scaleFactor+150);
text.set("left",myImg.width*scaleFactor/2-text.width/2);
var group = new fabric.Group([ img1,text ], { left: 10, top: 10 });
canvas.add(group);
console.log(canvas._objects[0]._objects[1].text);
});
live example : https://jsfiddle.net/tornado1979/zrazuhcq/
Hope helps,good luck.
Hey my image wont load onto the canvas. I've been at this for hours and I cant figure out what it is. I started to debug my code in google chrome and the console says canvas.width is set to null. Thats the only error I can find.
Here is my code:
function gameLoop()
{
drawBackground();
drawPlayer();
}
function drawBackground()
{
var img = new Image();
img.src = "Images/GrassTexture.png";
g.drawImage(img,0, 0, 500, 500);
}
function drawPlayer()
{
var player1 = new Image();
player1.src = "Images/Players/Mignolet.png";
g.drawImage(player1,0, 0,50 , 50);
}
setInterval(gameLoop, 1);
var canvas = document.getElementById("Canvas");
canvas.width = 500;
canvas.height = 500;
var g = canvas.getContext("2d");
html
html>
<head>
<title>Football</title>
<link rel="stylesheet" type="text/css" href="Css/Css.css">
</head>
<body>
<script type="text/javascript" src="Js/Js.js"></script>
<div id="Background">
<div id="Header">
</div>
<div id="Wrapper">
<canvas id="Canvas">
</canvas>
</div>
</div>
</body>
</html>
Css
#Canvas
{
border: 1px solid black;
width:500px;
height:500px;
margin-left: 300px
}
the script is being called before the html is rendered which is why you were getting the error. its always best to place scripts just before the <body> tag ends.
<html>
<head>
<title>Football</title>
<link rel="stylesheet" type="text/css" href="Css/Css.css">
</head>
<body>
<div id="Background">
<div id="Header">
</div>
<div id="Wrapper">
<canvas id="Canvas">
</canvas>
</div>
</div>
<script type="text/javascript" src="Js/Js.js"></script>
</body>