I'm developing a web app. It generates signatures for a game, with information from its API.
I'll need to store the images with a script that gathers the information and turns it into an image.
Do you know a way to turn text + CSS into an image?
Yes this can be done, what you want to do is draw the text on a canvas, and then save the canvas. you do not need to have the canvas show, you can hide it like any other html element, just add it, draw the text on it, and save it.
Here is a link on a library that saves:
https://github.com/hongru/canvas2image
Some sample code drawing text on canvas:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Your Text",10,50);
// save img
Canvas2Image.saveAsImage(c, 200, 100, 'png');
</script>
Related
I am working on HTML5 canvas with image manipulation. In my canvas I have number of images. When I want to clip the images individually. But when I clip one image by creating a shape and use clip() function, it is working fine. But the problem arise when I try to clip another image using the same method. As the canvas stored the previous shape it will concatenate with the new one and clip the second image accordingly. I want destroy the previous shape. Please note that I can't use the clearRect() to clear the canvas as my previous clipped image is there.
Please ref the link :
Demo Problem
In the link drag the image into canvas predefined layer and drag the image around. You can clearly see that the image got clipped properly if it try to go out of the border.
Now drag another image into the canvas in a different box. Now you can see the clipping is not functioning properly.
Here what I have done in the script :
JS Script
Here the JSFiddle Link
JSFiddle Link
Can you help me to fix this issue?
It will be helpful if you find another way to clear the previous shape.
Thanks in advance.
I have fix the issue by own. The canvas doesn't provide the multiple image clip option. So if you want to clip multiple image in your canvas you have to use your own clip function. Just clear the area by clearRect() of the canvas outside your selection. Iterate this process for each image and you are done !
Solution Link :
Solution Demo
JS Script Link :
JS Script
Thanks.
The best solution I could find is to use a hidden canvas, and draw to that, then use the putImageData method onto your main canvas.
var c = document.getElementById("myCanvas");
var ctemp = document.getElementById("myCanvasTemp");
var ctx = c.getContext("2d");
var ctxTemp = ctemp.getContext("2d");
ctxTemp.fillStyle = "red";
ctxTemp.fillRect(10, 10, 50, 50);
ctxTemp.fillStyle = "blue";
ctxTemp.fillRect(20, 20, 50, 50);
function copy() {
var imgData = ctxTemp.getImageData(10, 20, 50, 10);
ctx.putImageData(imgData, 10, 10);
}
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id="myCanvasTemp" width="300" height="150" style="display:none;">
Your browser does not support the HTML5 canvas tag.</canvas>
<br /><br />
<br />
<button onclick="copy()">Copy</button>
I'm hoping this will make sense. I want to make a line form between to link ids. This can be done with js if possible or css or a combination of them both. The line will be going in all directions from one point to another on a custom map.
E.g point a connects with point b. If I can control the colour of the line then great. If I can make it dashed.. even better. I have tried using a polyline over the top but it doesn't sit in the same place on all browsers. Hence why i'm hoping that there is a more elegant solution using js?
Any help would be great.
Chris
Use canvas for this purpose :
http://jsfiddle.net/eAK88/
This will help.
JS
var ptA = [50,10];
var ptB = [200,250];
var color = '#ff0000';
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(ptA[0],ptA[1]);
ctx.lineTo(ptB[0],ptB[1]);
ctx.strokeStyle = color;
ctx.stroke();
HTML
<canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
For dashed line or dotted line :
Ref : Drawing Dashed lines on HTML5 Canvas?
I'm creating a collage making application.
This is the code of Canvas. The image is appearing in the background of canvas.
<canvas id="c" width="800" height="600" style="left: -300px; background-image: url('_include/img/Images/rainy_day-1366x768.jpg');"></canvas>
But, when I click on Create Collage button the background is transparent. How can I capture the canvas with background image?
Button click code:
function convertCanvasToImage() {
var canvas = document.getElementById('c');
var image_src = canvas.toDataURL("image/jpeg");
window.open(image_src);
}
I've referred the similar questions and found that we can use or and place Canvas over it. I'm not getting how can I implement that and when I will click on Create Collage button, its gonna capture the background? I'm not sure about it. I'm using Fabric.js
Thanks for any help.
You can't! CSS backgrounds are not part of the canvas (just the element as any background to other elements).
You you need to draw the background onto the canvas instead of using it as a CSS background as this is the only data captured by toDataURL().
If you are using clearRect or fillRect to update the canvas you can consider using drawImage instead with the background image.
Better to use html2canvas script.
The code look like this.
html2canvas($("#c"), {
onrendered: function(canvas) {
var Image1 = canvas.toDataURL("image/jpeg");
window.open(Image1);
}
In my program I am drawing an image the canvas multiple times. My code looks something lik this:
<img id="image1" src="image1.png" width="200" height="100" hidden ="hidden">
<script type ="text/javascript">
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
ctx.drawImage(image1, 50, 50, 200, 100);
ctx.drawImage(image1, 100, 100, 200, 100);
<script/>
My questions is, is it possible to delete just one instance of this image? For instance just delete the image drawn at 100,100 and leave the one at 50,50?
The moment you draw something to a canvas it stops being an independent object and becomes a bunch of pixels on a canvas. The information that these pixels together form a larger object is lost. You could remove it by using context.clearRect, but that will also erase anything else which is drawn on the same area, so it won't do what you want when the image overlaps with other content.
I would recommend you to clear the whole canvas and draw the whole scene again without the image.
Another option is to use multiple canvas'es as layers by placing them on top of each other using CSS positioning. That way any transparent pixels on the top canvas will show the content of the canvas below. This allows you to erase parts of one canvas without affecting the content of the canvas above or below it.
I need to fetch an image from a web site knowing it's URL and then edit it (cropping and resizing) in client side.
What the best way to do this using JavaScript, Jquery, HTML5?
can you provide some links or tutorials,...?
Thanks in advance.
You can use a Javascript Image Processing Framework like MarvinJ. The example below demonstrates how to resize and crop an image in js in the client side.
var canvas1 = document.getElementById("canvas1");
var canvas2 = document.getElementById("canvas2");
var canvas3 = document.getElementById("canvas3");
image = new MarvinImage();
image.load("https://i.imgur.com/gaW8OeL.jpg", imageLoaded);
function imageLoaded(){
imageOut = image.clone()
image.draw(canvas1)
// Crop
Marvin.crop(image, imageOut, 50, 50, 100, 100);
imageOut.draw(canvas2);
// Scale
Marvin.scale(image, imageOut, 100);
imageOut.draw(canvas3);
}
<script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script>
<canvas id="canvas1" width="200" height="200"></canvas>
<canvas id="canvas2" width="200" height="200"></canvas><br/>
<canvas id="canvas3" width="200" height="200"></canvas>
There is an security issue that disables get pixeldata from another domain. But to only do basic transformations such as rotate/resize/cropping you can use the 2d-context api to draw the image in a canvas. See this article for how to use 2d-context api.