I am trying to save a FLOT chart as an image. The chart is currently being displayed correctly in a div element as follows:
<div id="flotcontainer"></div>
The tool that I am using to save the image is canvas2image. This small library lets you easily save a HTML5 canvas element as an image file. This code is working on my page and I am able to annotate and then save the canvas element:
<canvas width="100" height="100" id="cvs"></canvas>
The problem that I am having is that the canvas2image code requires a canvas element, but my FLOT chart is displayed in a normal div element. What do I need to do to be able to pass the div containing my FLOT chart, instead of the canvas element to be saved? Thanks.
Here is the complete code that I am working on:
<style type="text/css">
#flotcontainer {
width: document.getElementById('flot_widget').offsetWidth;
height: 300px;
text-align: center;
margin: 0 auto;
}
canvas {
display: block;
border: 2px solid #888;
}
</style>
<div id="flotcontainer" style="display:none;" ></div>
<div class="g12">
<canvas width="100" height="100" id="cvs"></canvas>
<div>
<p>
<button id="save">save</button> or <button id="convert">convert to</button> as:
<select id="sel">
<option value="png">png</option>
<option value="jpeg">jpeg</option>
<option value="bmp">bmp</option>
</select><br/>
w : <input type="number" value="300" id="imgW" /> h : <input type="number" value="200" id="imgH" />
</p>
</div>
<div id="imgs">
</div>
</div>
<script>
var canvas, ctx, bMouseIsDown = false, iLastX, iLastY,
$save, $imgs,
$convert, $imgW, $imgH,
$sel;
function init () {
canvas = document.getElementById('cvs');
ctx = canvas.getContext('2d');
$save = document.getElementById('save');
$convert = document.getElementById('convert');
$sel = document.getElementById('sel');
$imgs = document.getElementById('imgs');
$imgW = document.getElementById('imgW');
$imgH = document.getElementById('imgH');
bind();
draw();
}
function bind () {
canvas.onmousedown = function(e) {
bMouseIsDown = true;
iLastX = e.clientX - canvas.offsetLeft + (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft);
iLastY = e.clientY - canvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop);
}
canvas.onmouseup = function() {
bMouseIsDown = false;
iLastX = -1;
iLastY = -1;
}
canvas.onmousemove = function(e) {
if (bMouseIsDown) {
var iX = e.clientX - canvas.offsetLeft + (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft);
var iY = e.clientY - canvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop);
ctx.moveTo(iLastX, iLastY);
ctx.lineTo(iX, iY);
ctx.stroke();
iLastX = iX;
iLastY = iY;
}
};
$save.onclick = function (e) {
var type = $sel.value,
w = $imgW.value,
h = $imgH.value;
Canvas2Image.saveAsImage(canvas, w, h, type);
}
$convert.onclick = function (e) {
var type = $sel.value,
w = $imgW.value,
h = $imgH.value;
$imgs.appendChild(Canvas2Image.convertToImage(canvas, w, h, type))
}
}
function draw () {
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, 600, 400);
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 50, 50);
}
onload = init;
</script>
To get the canvas of the Flot chart use
$canvas = $('#flotcontainer').find('canvas.base');
By the way:
You cannot use javascript inside your style element, you have to
set the width by javascript after the page has loaded.
Why are you not using jQuery when you have to load it for the flot plugin?You could simplify $imgs = document.getElementById('imgs'); to $imgs = $('#imgs');.Additionally, beginning variable names with $ should be used for jQuery objects only to avoid confusion between jQuery objects and standard javascript / DOM objects.
You can also get the canvas from the flot plot object itself:
var somePlot = $.plot("#placeholder", [ [0,0],[10,10] ]);
somePlot.getCanvas()
Related
I have a HTML canvas in Ionic app.
<canvas id="canvas" color="{{ color }}" width="800" height="600" style="position:relative;"></canvas>
In this canvas, I am loading an image. Below is the code from controller
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var img = new Image();
img.src = $stateParams.imageId;
img.onload = function() {
context.drawImage(img, 0, 0, canvas.width, canvas.height);
}
After the image is loaded, users need the ability to write on the image and circle/highlight certain areas of the image.
Doesn't HTML canvas provide this feature by default? Right now I am not able to annotate anything on the image. How can I achieve this?
You need to implement this yourself.
You can do it by hooking into the mouse click / move events. using your 2d context, draw small rectangle at the mouse's current position if the most moves and the left mouse button is down.
The effect is similar to a Windows paint pencil tool. Here's a simple example.
<html>
<head>
<style>
canvas{
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var isMouseDown = false;
canvas.onmousedown = function(e){
isMouseDown = true;
}
canvas.onmouseup = function(e){
isMouseDown = false;
}
canvas.onmousemove = function(e){
if(isMouseDown === false){
return;
}
var canvasPosition = canvas.getBoundingClientRect();
var x = e.clientX - canvasPosition.left;
var y = e.clientY - canvasPosition.top;
ctx.fillRect(x, y, 2, 2);
};
</script>
</body>
</html>
I have updated fabric CurvedText extension because of our requirement is something different. I want to set auto spacing between characters as it covers full circle. I got solutions after updating code in fabric CurvedText extension. While I am changing text of the object (on keyup event of textbox), I recalculate spacing and setting that spacing and text via setText and set("spacing", val) properties. In some situations, I can not see object on canvas but I can see pointer of the object on canvas mouse hover effect.
Remove characters from the textbox in this snippet and object will be hide after you will remove some characters.
Same thing happens when I add characters in the textbox.
Updated curved text extension.
var radius = 100;
var circum = Math.floor(2 * Math.PI * radius);
var spacing = 0;
var fontFamily = 'Arial';
var fontSize = 30;
var text;
var lineHeight = 1;
var topa = 100;
var left = 200;
var char = 0;
var textWidth = 0;
var obj;
var canvas, ctx;
$(document).ready(function () {
canvas = new fabric.Canvas('c');
ctx = canvas.getContext("2d");
text = $('#uppertext').val();
spacingOperation();
var upperText = new fabric.CurvedText(text, {
radius: radius,
top: topa,
left: left,
fontFamily: fontFamily,
fontSize: fontSize,
lineHeight: lineHeight,
spacing: spacing,
originX: 'center',
hasControls: true,
hasBorders: true,
selectable: true,
textAlign: 'center'
});
canvas.add(upperText).renderAll();
$('#uppertext').on('keyup', function () {
text = $('#uppertext').val();
setObjects();
if (spacingOperation())
{
setProps();
canvas.renderAll();
}
});
});
function spacingOperation() {
textWidth = getTotalTextWidth();
spacing = 0;
textWidth = getTotalTextWidth();
var diff = Math.ceil(circum - textWidth);
spacing = Math.ceil(diff / char);
return true;
}
function getTotalTextWidth()
{
ctx.font = fontSize + 'px ' + fontFamily;
char = text.length;
txtWidth = Math.ceil(ctx.measureText(text).width + (spacing * char));
return txtWidth;
}
function setObjects() {
canvas.setActiveObject(canvas.item(0));
obj = canvas.getActiveObject();
}
function setProps() {
obj.set('spacing', spacing);
obj.setText(text);
obj.setCoords();
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.js"></script>
<script src="http://www.trimantra.com/demo/fabric.curvedText_done.js"></script>
</head>
<body>
<div class="row">
<div class="row canvas-container" style="width: 50%; float: left;">
<canvas id="c" width="400" height="400" style="border:1px dotted #000;"></canvas>
</div>
<div class="row" style="float: left; width: 50%; height: 150px;">
Upper Text : <input type="text" id="uppertext" value="UTXXXXXXXXXXXXXUTXXXXXaaaaaaaawwwwwwwwwXXXXXXXXUTXXXXXXXXXXXXXUTXXXXXXXXXXXXX" />
</div>
</div>
</body>
</html>
I have looked into you code and changed one line in fabric curvedtext extension from ctx = new fabric.Canvas('c').getContext('2d'); to ctx = fabric.util.createCanvasElement().getContext('2d'); and it is working perfectly fine.
I'm using this drawing app: http://intridea.github.io/sketch.js/
I'm trying to get the stroke 'content' with: var ctx = colors_sketch.getContext("2d");
I'm looking for something that enables me to capture and redraw the canvas context. Like this:
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
// ... lots of lineTo's etc ...
ctx.lineTo(70,100);
ctx.strokeStyle="red";
ctx.stroke();
You can create a custom wrapper, and call its api to store the drawing operations in array, and when you done, use its api to stroke on canvas.
The wrapper would become mor complex than the snippet if you also intend to wrap other drawing operations like arcTo, bezierCurveTo, rect ... etc. But idea remains the same: Save the operations to a store with specific format, then when you're about to draw them on canvas, use ctx operations to replay those operations.
var StokeStore = function() {
this.store = [];
this.current = [];
}
StokeStore.prototype.moveTo = function(x, y) {
if (this.current.length !== 0) {
this.store.push(this.current);
this.current = [];
}
this.current.push({x: x, y: y});
};
StokeStore.prototype.lineTo = function(x, y) {
this.current.push({x: x, y: y});
};
StokeStore.prototype.stroke = function(ctx, style) {
ctx.beginPath();
ctx.strokeStyle = style ? style : 'black';
this.store.forEach(function(line) {
this._stroke(line);
}, this);
this._stroke(this.current);
ctx.stroke();
};
StokeStore.prototype._stroke = function(line) {
var length = line.length;
if (length < 2) {
return;
}
ctx.moveTo(line[0].x, line[0].y);
var index, pt;
for (index = 1; index < length; ++index) {
pt = line[index];
ctx.lineTo(pt.x, pt.y);
}
};
var canvas = document.getElementById('test');
var ctx = canvas.getContext('2d');
var print = document.getElementById('print');
var clear = document.getElementById('clear');
var exampleStroke = new StokeStore();
exampleStroke.moveTo(50, 50);
exampleStroke.lineTo(70, 70);
exampleStroke.lineTo(200, 50);
exampleStroke.lineTo(200, 190);
exampleStroke.moveTo(30, 90);
exampleStroke.lineTo(0, 290);
exampleStroke.lineTo(290, 40);
exampleStroke.lineTo(150, 150);
var randomColor = ['red', 'cyan', 'black', 'purple'];
print.addEventListener('click', function() {
var rnd = Math.floor(Math.random() * randomColor.length);
var style = randomColor[rnd];
exampleStroke.stroke(ctx, style);
});
clear.addEventListener('click', function() {
canvas.width = canvas.width;
});
<canvas id="test" width="300" height="300"></canvas>
<button id="print">print</button>
<button id="clear">clear</button>
Update to markE's comment:
I'm not good at modifying jQuery plugins, but it seems sketch.js do provide a storage itself, when you call its api, it sets data-sketch attribute to store its created instance, so you can try to interact with that instance, like its redraw or else.
Also, it use a similar format to store the sketch history, if we use var sketch = $(CANVAS).data('sketch') to get the instance, we can use sketch.actions to get all stroke, and each stroke has an array called events, which stores Objects with attribute x, y, eventType, so if you want, you can either retrieve the strokes from it, or put your own stroke into the history. Like:
sketch.actions.push({
color: //stroke color,
size: // stroke size,
tool: // marker will draw, while eraser will erase to white,
events: [
{x:xval, y:yval, event:evType},....
]
});
jsfiddle or snippet below.
$(function() {
var $cv = $('#test');
var cv = $cv.get(0);
$('#test').sketch();
var sketch = $cv.data('sketch');
$('#clear').click(function() {
cv.width = cv.width;
});
$('#redraw').click(function() {
sketch.redraw();
});
$('#strokes').click(function() {
var $display = $('#display').empty();
sketch.actions.forEach(function(strk, idx) {
if (!strk.events) {
return;
}
var $div = $('<div>').addClass('stroke');
$('<div>').text('Stroke #' + idx).appendTo($div);
strk.events.forEach(function(pt, idx) {
$("<p>").text(idx + ': (' + pt.x + ',' + pt.y + ')' ).appendTo($div);
});
$div.appendTo($display);
});
});
});
#test {
border: solid 1px gray;
}
.stroke {
border: solid 1px blue;
float : left;
padding: 10px;
margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/intridea/sketch.js/master/lib/sketch.min.js"></script>
<canvas id="test" width="500" height="500;"></canvas>
<button id="clear">clear</button>
<button id="redraw">redraw</button>
<button id="strokes">print strokes</button>
<div id="display"></div>
I am creating a walkthrough video where the user can slide a UI slider across the screen, and the camera will walk through through a 3D space.
The video has been exported as jpg frames, and numbered 0 to 350.jpg.
I am pre-loading all of the frames first, and then applying the function to the slider change.
This is the canvas
<canvas id="walkthrough" width="1280" height="300"></canvas>
This is the function from the jQuery UI slider applying data.value
$("[data-slider]")
.each(function () {
var input = $(this);
$("<span>")
.addClass("output")
.insertAfter($(this));
})
.bind("slider:ready slider:changed", function (event, data) {
$(this)
.nextAll(".output:first")
.html(data.value.toFixed(3));
});
This is the image prelaod function
var totalImages = 50; // Wow, so many images for such a short clip
var images = new Array();
for(var i = 1; i < totalImages; i++) {
var filename = '/walkthrough/' + i + '.jpg'; // Filename of each image
var img = new Image;
img.src = filename;
images.push(img);
}
This is the function that should draw the image to canvas when the slider is changed
$("#my-input").bind("slider:changed", function (event, data) {
var currentimage = '/walkthrough/' + data.value + '.jpg';
var canvas = document.getElementById("walkthrough");
var context = canvas.getContext("2d");
context.drawImage(currentimage,10,10);
});
I have tried to adapt this code from an article I read here which is using the scroll position to draw the image instead of a data.value.
http://elikirk.com/canvas-based-scroll-controlled-backgroud-video-use-parallax-style-web-design/
I appreciate any help with this!
Here's a demo that uses a slider to change the image drawn on a canvas. Some notable differences from your code:
uses the native HTML5 slider instead of jQuery UI
use the input event instead of the change event to detect slider changes
access the slider value with event.target.value instead of data (which isn't defined on the input event)
use the slider value as an index into the array of pre-loaded images instead of a file path
var canvas = document.getElementById("canvas");
canvas.height = 150;
canvas.width = 400;
var totalImages = 72;
var videoFrames = [];
for (var i = 1; i <= totalImages; i++) {
var videoFrame = new Image;
var videoFrameUrl = 'http://rphv.net/walkthrough/tmp-' + i + '.gif';
videoFrame.src = videoFrameUrl;
videoFrames.push(videoFrame);
}
$("#my-input").on("input", function(event) {
var currentImage = videoFrames[event.target.value - 1];
var context = canvas.getContext("2d");
context.drawImage(currentImage, 0, 0);
});
html,
body {
height: 100%;
margin: 0 auto;
}
canvas {
height: 150px;
width: 400px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas"></canvas>
<br>
<input id="my-input" type="range" min="1" max="72" value="1" />
I am creating an app which allows user to draw a digit(using mouse) in Canvas. When they click on submit, the image should be saved as a JPEG and Clear should Erase the digit drawn in canvas. I am new to HTML5 Canvas. I saw some tutorials which created a canvas, but I am unable to save and clear canvas. Any help would really be appreciated. Thanks.
Here is my HTML:
<div style="padding-bottom: 20px;padding-left: 210px;">
<div class="btn-group" role="group" aria-label="...">
<button type="button" id="save" class="btn btn-default">Submit</button>
<button type="button" id="clear" class="btn btn-default">Clear</button>
</div></div>
</div>
Javascript within Script tag:
var clear = document.getElementById('clear');
clear.addEventListener('click', clearCanvas);
var clearCanvas = function(e) {
ctx.fillStyle = "white";
ctx.fillRect(0, 0, 500, 400);
ctx.clearRect(20, 20, 100, 50);
}
The tutorial you're using fails to mention a few key things:
The canvasInAPerfectWorldline isn't used: you can delete it.
You need jQuery: just add <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script/> in your <head> section.
You should wrap your javascript in the jQuery boilerplate, to ensure it gets executed after the rest to the document has loaded: $( document ).ready(function() { <your javascript here> });
The canvasWidth and canvasHeight variables are never set: add this line before the variables are used:var canvasWidth = 600; var cavasHeight = 400;
The variables mouseX and mouseY are never used: you can delete them (but take a look at the onClick() function two lines later to see what they would have been used for).
The finished result should look like this:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Create HTML5 Canvas JavaScript Drawing App Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<style>canvas { border: 1px solid #ccc; }</style>
<script type="text/javascript">
$( document ).ready(function() {
var canvasWidth = 600; var cavasHeight = 400;
var canvasDiv = document.getElementById('canvasDiv');
canvas = document.createElement('canvas');
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', cavasHeight);
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
if(typeof G_vmlCanvasManager != 'undefined') {
canvas = G_vmlCanvasManager.initElement(canvas);
}
context = canvas.getContext("2d");
$('#canvas').mousedown(function(e){
paint = true;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
redraw();
});
$('#canvas').mousemove(function(e){
if(paint){
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
redraw();
}
});
$('#canvas').mouseup(function(e){
paint = false;
});
$('#canvas').mouseleave(function(e){
paint = false;
});
$('#clear').click(function(){
clickX.length = 0;
clickY.length = 0;
clickDrag.length = 0;
redraw();
});
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
function addClick(x, y, dragging)
{
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
function redraw(){
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
context.strokeStyle = "#df4b26";
context.lineJoin = "round";
context.lineWidth = 5;
for(var i=0; i < clickX.length; i++) {
context.beginPath();
if(clickDrag[i] && i){
context.moveTo(clickX[i-1], clickY[i-1]);
}else{
context.moveTo(clickX[i]-1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.stroke();
}
}
});
</script>
</head>
<body>
<div id="canvasDiv"></div>
</body>
</html>
As for saving your canvas as a JPEG, that's more complicated. As markE has pointed out, there's a related question here which shows one way to do it.
EDIT: Adding a 'Clear' button:
Your 'drawing' is really just a series of pen movements stored in the clickX, clickY and clickDrag arrays. Each time redraw() is called, the drawing gets recreated from the arrays. So just drawing a white rectangle will only clear the screen until the next redraw(). Instead, you can clear the arrays by adding this to your javascript:
$('#clear').click(function(){
clickX.length = 0;
clickY.length = 0;
clickDrag.length = 0;
redraw();
});
(BTW by deleting the details of your original question, you make it hard for the next person to understand the context of the answers. You should either (a) add to your original question, or (b) ask a new question. Also you can upvote and/or accept any answers you find helpful. Thanks)
I think that's a duplicated question. See here
Can I get image from canvas element and use it in img src tag?
var image = new Image();
image.id = "pic"
image.src = canvas.toDataURL();
document.getElementById('image_for_crop').appendChild(image);