I would like some help with implementing a Barcode inside my canvas.
I am using ean13.js to produce a Barcode and it works like a charm if adding it to a div (#controlDiv).
However I have a canvas inside which I would like to add this "div".
My HTML
<div>
<div>
<input type="button" id="btnGenerateStuffInCanvas" value="Add Stuff"/>
<input type="button" id="btnGenerateEAN13" value="Generate EAN"/>
</div>
<div id="controlDiv">
</div>
<canvas id="myCanvas"></canvas>
</div>
Try this one. It works for me. It can be done using Data URI template to create SVG images.
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
'<foreignObject width="100%" height="100%">' +
'<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
'<div id="controlDiv">s</div>' +
'</div>' +
'</foreignObject>' +
'</svg>';
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svg);
img.onload = function () {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
}
img.src = url;
Replace your html element in data where the div <div id="controlDiv">s</div> element exists.
DEMO
I think that it will help you.
You cannot have DOM elements inside a canvas.
What you can do to cheat it is to have the div overlay the canvas with css.
For instance (css):
#controlDiv {
...
margin-top:-100px;
...
}
I went at it this way:
I created another canvas which I style to display:none. Then I generated the eancode to this canvas and in another canvas I generated an Image from this canvas which I added to the canvas.
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var myEanCanvas = document.getElementById('myEan');
new EAN13(myEanCanvas, textToAdd);
//Create Image from EAN
var imageObj = new Image();
imageObj.onload = function () {
context.drawImage(imageObj, $(parent).attr('positionx'), $(parent).attr('positiony'), $(parent).attr('width'), $(parent).attr('height'));
};
imageObj.src = myEanCanvas.toDataURL();
Related
Previously, I tried to use an Annotation.StampAnnotation to create a custom annotation while using a SVG as the base image, however I discovered that the user cannot change or set the colour of a StampAnnotation. Hence, I am now using an Annotation.MarkupAnnotation.
As of right now, I am having trouble drawing the inline SVG (string) on the CanvasRenderingContext2D using drawImage(). I saw some code on TutorialsPoint, and I tested it in a Javascript sandbox, and it seems to work. However, when I implemented it with PDFTron, it only draws an empty box on the PDF.
Here's my code:
createCustomAnnotation: function (Annotations, annotManager, subject, inlineSVGString) {
const CustomAnnotation = function () {
Annotations.MarkupAnnotation.call(this);
this.Subject = subject;
}
CustomAnnotation.prototype = new Annotations.MarkupAnnotation();
CustomAnnotation.prototype.draw = function (ctx, pageMatrix) {
this.setStyles(ctx, pageMatrix);
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svg = new Blob([inlineSVGString], {type: 'image/svg+xml'});
var url = DOMURL.createObjectURL(svg);
var x = this.X;
var y = this.Y;
img.onload = function() {
ctx.drawImage(img, x, y, 30, 30);
DOMURL.revokeObjectURL(url);
}
img.src = url;
}
return CustomAnnotation;
}
Any help would be appreciated!
Thank you!
there
Looks like the sample from Tutorials Point has a syntax error and it only draws an empty box, if you try this sample it draws the text correctly.
<!DOCTYPE html>
<html>
<head>
<title>SVG file on HTML Canvas </title>
</head>
<body>
<canvas id="myCanvas" style="border:2px solid green;" width="300" height="300"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">' +
'<foreignObject width="100%" height="100%">' +
'<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:50px">' +
'Simply Easy ' +
'<span style="color:blue;">' +
'Learning</span>' +
'</div>' +
'</foreignObject>' +
'</svg>';
var DOMURL = window.URL || window.webkitURL || window;
var img1 = new Image();
var svg = new Blob([data], {type: 'image/svg+xml'});
var url = DOMURL.createObjectURL(svg);
img1.onload = function() {
ctx.drawImage(img1, 25, 70);
DOMURL.revokeObjectURL(url);
}
img1.src = url;
</script>
</body>
</html>
I have a piece of HTML code with a canvas I'd like to duplicate by the click of a button. I've tried this code so far but I'm a bit clueless about what's missing. If you could include any piece of code it would be really useful to me as I'm a beginner
Thank you
<canvas id="myCanvas" width="800px" height="800px"></canvas>
<script>
var oldCnv = document.getElementById("myCanvas");
function cloneCanvas(oldCanvas) {
//create a new canvas
var newCanvas = document.createElement("canvas");
var context = newCanvas.getContext("2d");
//set dimensions
newCanvas.width = oldCanvas.width;
newCanvas.height = oldCanvas.height;
//apply the old canvas to the new one
context.drawImage(oldCanvas, 0, 0);
//return the new canvas
return newCanvas;
//append the new canvas on the page
document.body.appendChild(newCanvas);
}
</script>
<button onclick="cloneCanvas(oldCnv)">add canvas</button>
You can't pass the parameter oldCnv in an onclick action to the function. Besides that, after you return newCanvas the document.body.appendChild(newCanvas) won't get called.
The following will work.
Use this code:
<canvas id="myCanvas" width="800px" height="800px"></canvas>
<script>
var oldCanvas = document.getElementById("myCanvas");
function cloneCanvas() {
//create a new canvas
var newCanvas = document.createElement("canvas");
var context = newCanvas.getContext("2d");
//set dimensions
newCanvas.width = oldCanvas.width;
newCanvas.height = oldCanvas.height;
//apply the old canvas to the new one
context.drawImage(oldCanvas, 0, 0);
//return the new canvas
//append the new canvas on the page
document.body.appendChild(newCanvas);
}
</script>
<button onclick="cloneCanvas()">add canvas</button>
I have a image gallery populated with images using PHP from a local directory. I want to select an image by clicking on it and displaying it on a canvas to enable users to draw on the image.
The gallery is generated using php and the following are parts of html and php codes
HTML
<div id="loaded_img_panel" name="loaded_img_panel" class="dragscroll" >
</div>
PHP:
echo '<img src="'.$num.'" id="thumbNails"/>';
I am able to display images without a trouble.
I have created a canvas to display the image.
HTML-CANVAS
<canvas id="myCanvas"></canvas>
The following is the javascript that I have.
<script type="text/javascript">
window.load = function() {
var image = document.getElementById("thumbNails");
image.addEventListener("click", fetchImage);
function fetchImage(e) {
fill_canvas(image).src = e.target.src
}
function fill_canvas(img) {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
canvas.width = img.width();
canvas.height = img.height();
ctx.drawImage(img, 0,0)
}
}
</script>
You must be using window.onload instead of window.load
window.onload = function() {
var image = document.getElementById("thumbNails");
image.addEventListener("click", fetchImage);
function fetchImage(e) {
fill_canvas(image);
}
function fill_canvas(img) {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0)
}
}
<div id="loaded_img_panel" name="loaded_img_panel" class="dragscroll">
</div>
<hr>
<canvas id="myCanvas"></canvas>
<hr>
<img src="https://tpc.googlesyndication.com/simgad/9841060568868240804" id="thumbNails" width="100" />
Ok. This is how I resolved this.
window.onload = function() {
var x = document.getElementById("mycanvas");
canvas = x.getContext('2d');
var thumbNails = document.getElementById("loaded_img_panel");
var pic = new Image();
thumbNails.addEventListener('click', function(event) {
pic.src = event.target.src;
pic.addEventListener("load", function(){canvas.drawImage(pic,0,0)})
}, false);
}
Instead of using my image id which was thumbNail, I used the div id of my image gallery.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<canvas id="spriteCanvas" width="500" height="500">
<img id="coin" width="440" height="40" src="coin.png">
</canvas>
</body>
</html>
I tried placing an image inside a canvas element, but it won't display on the browser. I know the image tag works because it's displayed if I place it outside of the canvas element. Also, if I inspect the canvas element, I can see that the image is inside, but its dimensions are 0 by 0. Can somebody explain why this isn't working?
EDIT: My original code added the image through javascript, but it wouldn't show on the canvas. It was giving me the same problems as above. But I just realized I was missing "onload".
original code:
var coinImage = new Image();
coinImage.src = "coin.png";
var sCanvas = document.getElementById('spriteCanvas');
function Sprite(canvas, width, height, image){
this.context = canvas.getContext("2d");
this.width = width;
this.height = height;
this.image = image;
}
Sprite.prototype.render = function() {
var that = this;
this.context.drawImage(that.image, 0, 0);
}
function init() {
var coin = new Sprite(sCanvas, 100, 100, coinImage);
coin.render();
}
init();
editted code:
var coinImage = new Image();
coinImage.src = "coin.png";
var sCanvas = document.getElementById('spriteCanvas');
function Sprite(canvas, width, height, image){
this.context = canvas.getContext("2d");
this.width = width;
this.height = height;
this.image = image;
}
Sprite.prototype.render = function() {
var that = this;
this.context.drawImage(that.image, 0, 0);
}
coinImage.onload = function () {
var coin = new Sprite(sCanvas, 100, 100, coinImage);
coin.render();
}
This isn't how a <canvas> tag works. If you want your image to appear in your canvas, you will have to use JavaScript to place the pixels of the image into your canvas.
<canvas>s are exactly what they state: canvases. They are an element for you to draw on programmatically. If you just want to display an image on a page, you don't need a canvas, you just need the <img> tag. In fact, elements should not be placed in <canvas>.
Take a look at CanvasRenderingContext2D.drawImage() and this tutorial: HTML5 Canvas Image Tutorial.
And this snippet:
var canvas = document.getElementById("painting"),
ctx = canvas.getContext("2d"),
image = new Image();
image.onload = function() {
ctx.drawImage(image, 30, 50);
};
image.src = "http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.png?v=10a9e8743fb0";
<canvas id="painting" width="300" height="300"></canvas>
To draw an image on a canvas, use the following method:
drawImage(image,x,y)
If the image you want to draw is not in the DOM already you can load an image directly from a URL with a few lines of javascript.
function loadAndDrawImage(url)
{
// Create an image object. This is not attached to the DOM and is not part of the page.
var image = new Image();
// When the image has loaded, draw it to the canvas
image.onload = function()
{
// draw image...
}
// Now set the source of the image that we want to load
image.src = url;
}
loadAndDrawImage("http://www---.png");
I want to use StackBlur.js on multiple canvas elements on the same page; however using the example provided by Zurb, I can only apply it to the first canvas element; it ignores the others.
Any idea how to make this code more universal to apply to every canvas element, not just to one?
The JS (by Zurb) is this:
$(function() {
// Change this value to adjust the amount of blur
var BLUR_RADIUS = 100;
var canvas = document.querySelector('[data-canvas]');
var canvasContext = canvas.getContext('2d');
var image = new Image();
image.src = document.querySelector('[data-canvas-image]').src;
var drawBlur = function() {
var w = canvas.width;
var h = canvas.height;
canvasContext.drawImage(image, 0, 0, w, h);
stackBlurCanvasRGBA('heroCanvas', 0, 0, w, h, BLUR_RADIUS);
};
image.onload = function() {
drawBlur();
}
});
The relevant HTML is this:
<canvas class="hero__background" id="heroCanvas" width="200" height="200" data-canvas></canvas>
<!-- Our image to be blurred -->
<img data-canvas-image style="display: none" src="path/to/image.jpg" />
Thank you!
Wrap their code in a loop over all elements with that attribute (in this case data-canvas) like so
$('[data-canvas]').each(function(){
var $el = $(this);
// insert their code here and change it to reference the correct image each time
});
So in the end you can refer to each of the canvases on the page individually, something like so:
$(function(){
// our iteration
$('[data-canvas]').each(function(){
var $el = $(this);
var BLUR_RADIUS = 100;
var canvas = this; // canvas is the element we're iterating over
var canvasContext = canvas.getContext('2d');
var image = new Image();
// I changed the line below of theirs to refer to the canvases attributes
// we're iterating over above
image.src = $el.attr('data-src');
var drawBlur = function() {
var w = canvas.width;
var h = canvas.height;
canvasContext.drawImage(image, 0, 0, w, h);
var id = $el.attr('id'); // use the id from the canvas
stackBlurCanvasRGBA( id, 0, 0, w, h, BLUR_RADIUS);
};
image.onload = function() {
drawBlur();
}
});
});
So now we don't need the images only their src attributes, which now live on the canvases asdata-src`. The the html can be as follows:
<canvas class="hero__background" id="heroCanvas1" data-src="/image/location.jpg" width="200" height="200" data-canvas></canvas>
<canvas class="hero__background" id="heroCanvas2" data-src="/image/location2.jpg" width="200" height="200" data-canvas></canvas>
Update: I realised that you're displaying info in the canvas, and so need more than one. code updated above.
Update 2: I realised that stack blur relies on an id for each call so you need to get that from each canvas in turn, updated code above
Aside: I would recommend iterating over the canvases by class not attribute, but I used it as that was what was in your html. I'd suggest adding a class to each and changing the iteration to something like so:
$('.blurImgCanvas').each(function(){....})