I wanted to know if it is possible to create an image using html5.
Currently i am creating a text using canvas, now i want to convert that text into an image.
In order to save the canvas to an image file, you can use Nihilogic's code.
Use the canvas text functions.
For example:
<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillText("Sample String", 10, 50);
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="draw();">
<canvas id="tutorial" width="150" height="150"></canvas>
</body>
</html>
Create an image DOM element, and set the src to the canvas.toDataURL method.
var c = document.getElementById("c");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
function copy() {
var image = document.getElementById("Img");
image.src = c.toDataURL("image/png");
}
<canvas id="c" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<img id="Img" width="300" height="150" style="border:1px solid #d3d3d3;"/>
<button onclick="copy()">Copy</button>
Related
I am styling an SVG image using CSS in a separate file. Then I am rendering the SVG onto a canvas that can be saved as a PNG.
The SVG receives the CSS styles properly when it is just an SVG element on an HTML page, and renders as expected. However, when the SVG is rendered in a canvas element, the styles are not applied.
Is it possible to use external CSS to style an SVG and save that to a canvas without losing the styles? I cannot use inline CSS due to Content Security Policy in the browser.
Here is a sample.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>svg to png</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<button>svg to png</button>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="200" height="200">
<path d="M10 40, C20 20, 50 20, 70 30, 70 30, 110 50, 160 20" id="path-1" fill="#CCCCCC" />
<text class="text-red">
<textpath xlink:href="#path-1" startOffset="50%" text-anchor="middle">Sample Path Text</textpath>
</text>
<rect x="10" y="14" width="10" height="10" />
<text x="0" y="100" class="text-primary">Text Style 1</text>
<text x="0" y="150" class="text-secondary">Text Style 2</text>
</svg>
<canvas id="canvas"></canvas>
<script src="./script.js"></script>
</body>
</html>
style.css
.text-primary {
font-size: 24px;
font-family: calibri;
}
.text-secondary {
font-size: 12px;
font-family: arial;
}
.text-red {
fill: #ff0000;
}
script.js
var btn = document.querySelector("button");
var svg = document.querySelector("svg");
var canvas = document.querySelector("canvas");
btn.addEventListener("click", function () {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = new XMLSerializer().serializeToString(svg);
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svgBlob = new Blob([data], { type: "image/svg+xml;charset=utf-8" });
var url = DOMURL.createObjectURL(svgBlob);
img.onload = function () {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
var imgURI = canvas
.toDataURL("image/png")
.replace("image/png", "image/octet-stream");
};
img.src = url;
});
Here is a render of the basic example, svg on the left and canvas on the right.
css styles applied to svg on left, css styles not applied to svg on canvas on right
I would like to decide by button whether I draw a rectangle or a circle. That works so far. But if I first press the Circle button and then the Rectangle button, it does not delete the circle. The other way, it's the same. But I want only one object to be displayed at a time. The object which the user pressed at last should display.
<html>
<head>
<script src="fabric.js"></script>
</head>
<body>
<canvas id="c" width="500" height="500"></canvas>
<button type="button" onclick="drawArc()">circle</button>
<button type="button" onclick="drawRect()">rectangle</button>
<scipt>
var canvas = new fabric.Canvas("c");
var context = canvas.getContext('2d');
var rect = new fabric.Rect({
//circle values
});
var circle = new fabric.Circle({
//rect values
});
function clear() {
context.clearRect(0, 0, canvas.width, canvas.height);
}
function drawRect() {
clear();
canvas.add(rect);
}
function drawArc() {
clear();
canvas.add(circle);
}
</script>
</body>
</html>
Use visible property to show/hide object from canvas.
DEMO
var canvas = new fabric.Canvas("c");
var rect = new fabric.Rect({
width: 50,
height: 50,
fill: 'green',
visible: false
});
var circle = new fabric.Circle({
radius: 50,
fill: 'blue',
visible: false
});
canvas.add(rect, circle)
function drawRect() {
circle.visible = false;
rect.visible = true;
canvas.requestRenderAll();
}
function drawArc() {
circle.visible = true;
rect.visible = false;
canvas.requestRenderAll();
}
canvas{
border:1px solid;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.6.0/fabric.js"></script>
<button type="button" onclick="drawArc()">circle</button>
<button type="button" onclick="drawRect()">rectangle</button><br>
<canvas id="c" width="500" height="500"></canvas>
I have a div and I would like to center the image inside the div both horizontally and vertically. I do not want to use CSS page. I want to learn how to do this using only html with CSS inline.
<div id="circle1" style="position:absolute;">
<img id="circle1img" style="position:absolute; left:50%; top:50%"/>
</div>
I set the position of the div and the size of the image at run time in the following way:
var divW = randomInt(200,300);
var imgW = randomInt(20,120);
document.getElementById("circle1").width = divW;
document.getElementById("circle1").height = divW;
document.getElementById("circle1img).width = imgW;
document.getElementById("circle1img").height = imgW;
This does not currently work.
Here is a stand alone to test it out. Note that all the javascript customizations of the css are necessary and CANNOT be put inside the inline text. So please do not do this as a solution. Thanks!! You can see from this example that the border is around the image and not the circle1 div.
<html>
<head>
</head>
<body>
<div id="circles" style="display:none">
<div id="circle1" style="position:absolute; text-align:center;">
<img id="circle1img"/>
</div>
</div>
<script type="text/Javascript">
document.getElementById("circle1img").src = "37.png";
document.getElementById("circle1").style.left = "200px";
document.getElementById("circle1").style.top = "200px";
document.getElementById("circle1").style.border = "2px solid blue";
var divW = 200;
var imgW = 100;
document.getElementById("circle1").width = divW;
document.getElementById("circle1").height = divW;
document.getElementById("circle1img").width = imgW;
document.getElementById("circle1img").height = imgW;
document.getElementById("circles").style.display = "block";
</script>
</body>
</html>
From HTML perspective, it will be:
<div id="circle1" style="position:absolute; text-align:center;">
<img id="circle1img" src="your_image_src_goeshere..." />
</div>
Let me know if it resolves the issue or not.
EDIT:
<html>
<head>
</head>
<body>
<div id="circles" style="display:none">
<div id="circle1" style="position:absolute; text-align:center;">
<img id="circle1img"/>
</div>
</div>
<script type="text/Javascript">
document.getElementById("circle1img").src = "37.png";
document.getElementById("circle1").style.left = "200px";
document.getElementById("circle1").style.top = "200px";
document.getElementById("circle1").style.border = "2px solid blue";
var divW = 200;
var imgW = 100;
document.getElementById("circle1").width = divW;
document.getElementById("circle1").height = divW;
document.getElementById("circle1img").width = imgW;
document.getElementById("circle1img").height = imgW;
document.getElementById("circle1img").style.padding = 5;
document.getElementById("circles").style.display = "block";
</script>
</body>
</html>
I have two jquery mobil HTML5 files, each has a navigation bar and a canvas. If I load page one first, the canvas is drawn ok. If I load page 2 first, the canvas is drawn ok. But if I use the navigation bar to switch from one to page two, nothing is drawn. If I refresh page two, it is now drawn but if I navigate back to page one, the canvas fails to be drawn. What am I doing wrong?
The code below is for page1.html Save it and copy it to page2.html and change the color of the circle.
<!DOCTYPE html>
<html>
<head>
<title>Compass</title>
<style type="text/css">
.unselectable {
-moz-user-select: none;
-webkit-user-select: none;
}
</style>
<link rel="stylesheet" href="jquery/jquery.mobile-1.3.1.css"></link>
<script language="JavaScript" type="text/javascript" src="jquery/jquery-1.10.1.js"></script>
<script language="JavaSCript" type="text/javascript" src="jquery/jquery.mobile-1.3.1.js"></script>
</style>
<script type="text/javascript">
window.onload = function() {
var ctx = document.getElementById('myDrawing').getContext('2d');
var scale = 1.2;
var size = 300;
var halfSize = size / 2;
var center = size * scale * 1.1;
var ring = size;
// setup
ctx.clearRect(0, 0, 800, 800);
ctx.translate(center, center);
ctx.scale(scale, scale);
ctx.rotate(-Math.PI / 2);
ctx.strokeStyle = "black";
ctx.fillStyle = "white";
ctx.lineWidth = 8;
ctx.lineCap = "round";
// fill in the back color
ctx.fillStyle = '#ffe8c0';
ctx.arc(0, 0, ring, 0, Math.PI * 2, true);
ctx.fill();
}
</script>
</head>
<body style="z-index:1.5;">
<div data-role="page" id="dial" class="unselectable" align="center" >
<!--HEADER DIV-->
<div data-role="header" align="center" data-nobackbtn="true" >
<h1 id="Title" value="">COMPASS </h1>
<div data-role="page" id="Menu" class="unselectable" >
<div
style="top: 1;
left: 1;
position: absolute;
z-index: 1;
visibility: show;">
</div>
</div><!-- /page -->
</div><!-- /header -->
<canvas id="myDrawing" width="800" height="800" >
<p>Your browser doesn't support canvas.</p>
</canvas>
<div class="ui-bar-a unselectable" data-role = "footer" data-id="foo" data-position="fixed">
<div class="" data-inline="true" >
<div data-role="controlgroup" data-type="horizontal" align="center" >
<a href="page1.html" data-role="button" id="dial" >Compass</a>
Wind
</div>
</div>
</div><!-- /footer -->
</div> <!-- /Div1 -->
</body>
</html>
The image should resize (up to max) but I need the navigation div to always be visible. At the moment it is being hidden when I resize the browser. Ideally it should move up with the image.
here is the code I have already. Also, is there a way of placing the image in the centre of the screen.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body style="margin:0;padding:0; height:100%">
<div style=" border:solid 1px green; ">
<img style="max-height:400px; height:100%;" src="../Images/img-02.jpg" />
</div>
<div style="border:solid 1px red;height:30px;position: relative;">navigation</div>
</body>
</html>
This can be rectified using some scripting
<html>
<head>
<script type = "text/javascript">
window.onload = function(){
var hVal = window.innerHeight;
if(hVal>434){
document.getElementById("test").height = 400;
}
else{
document.getElementById("test").height = hVal-34;
}
}
window.onresize = function(){
var hVal = window.innerHeight;
if(hVal>434){
document.getElementById("test").height = 400;
}
else{
document.getElementById("test").height = hVal-34;
}
}
</script>
</head>
<body style="margin:0;padding:0; height:100%">
<div style=" border:solid 1px green; ">
<img id="test" src="../Images/img-02.jpg" />
</div>
<div style="border:solid 1px red;height:30px;position: relative;">navigation</div>
</body>
</html>
I hope it works...!