Why does nothing show up on the canvas? The picture is in the same folder as the code, I've tried to directly copy some code, and just change the sources, it still doesn't work. That leads me to believe, that it is not a fault in the actual way I draw the picture, but in the way I load the canvas?
I can add other stuff to the canvas, just not pictures.
<!DOCTYPE html>
<head></head>
<body>
<script>
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.height = 500;
canvas.width = 800;
document.body.appendChild(canvas);
var imag = new Image();
imag.onload = function() {
context.drawImage(imageObj, 0, 0);
};
imag.src = "underwater.png";
</script>
</body>
You most likely copied this code from somewhere and forgot to change the image object name
<!DOCTYPE html>
<head></head>
<body>
<script>
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.height = 500;
canvas.width = 800;
document.body.appendChild(canvas);
var imag = new Image();
imag.onload = function() {
context.drawImage(imag, 0, 0);
};
imag.src = "underwater.png";
</script>
</body>
Related
I am trying to generate a PDF document from a HTML document sing an input and a pre loaded image in my javascript code, here are the codes:
<html>
<head>
<title>
Generar pdf
</title>
</head>
<body>
<input type = "text" id = "jjj">
<button id="button" onclick="generar();"></button>
<script src = "jsPDF-1.3.2/dist/jspdf.debug.js"></script>
<script src = "pdf.js"></script>
</body>
</html>
Javascript
var input = document.getElementById('jjj');
var pdf = new jsPDF();
function generar(){
var texto = input.value;
var imgData = 'https://docs.gimp.org/es/images/tutorials/quickie-jpeg-
100.jpg';
pdf.addImage(imgData, 'JPG', 15, 40, 180, 160);
pdf.text(30, 30, texto);
pdf.save('my_pdf.pdf');
}
And it won't work. It worked with jsut the text, but not the Image. Anyone help, would be very appreciated.
you cannot use direct image url. you need to convert image to base64 and then add it in pdf. Also, using external image will generate error in Chrome / Firefox due to Cross origin request.
Below is the complete code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type = "text" id = "jjj">
<button id="button" onclick="genratePDF();"></button>
<script src = "jspdf.debug.js"></script>
<script src = "jspdf.min.js"></script>
<script>
var input = document.getElementById('jjj');
// var imgData = 'https://docs.gimp.org/es/images/tutorials/quickie-jpeg-100.jpg';
var imgData = 'testimg.jpg';
function genratePDF() {
getDataUri(imgData, function (dataUri) {
generar(dataUri);
});
}
function getDataUri(url, cb)
{
var image = new Image();
image.onload = function () {
var canvas = document.createElement('canvas');
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
//next three lines for white background in case png has a transparent background
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#fff'; /// set white fill style
ctx.fillRect(0, 0, canvas.width, canvas.height);
canvas.getContext('2d').drawImage(this, 0, 0);
cb(canvas.toDataURL('image/jpeg'));
};
image.src = url;
}
function generar(img) {
var texto = input.value;
var pdf = new jsPDF();
pdf.addImage(img, 'JPG', 15, 40, 100, 100);
pdf.text(30, 30, texto);
pdf.save('my_pdf.pdf');
}
</script>
</body>
</html>
Main Changes are getDataUri() ; this function generates base64 image of your provided image. And then in Callback it triggers the generar() to generate PDF
function getDataUri(url, cb)
{
var image = new Image();
image.onload = function () {
var canvas = document.createElement('canvas');
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
//next three lines for white background in case png has a transparent background
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#fff'; /// set white fill style
ctx.fillRect(0, 0, canvas.width, canvas.height);
canvas.getContext('2d').drawImage(this, 0, 0);
cb(canvas.toDataURL('image/jpeg'));
};
image.src = url;
}
this SO question helps me in this solution Convert a image url to pdf using jspdf
This is my code:
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 990;
canvas.height = 409;
canvas.style.display='block';
var style=canvas.style;
style.marginLeft="auto";
style.marginRight="auto";
var position=1;
var background = new Image();
background.src="backdrop3.jpg";
var currentImage= new Image();
document.body.appendChild(canvas);
ctx.drawImage(background, 0, 0);
For some reason, nothing appears on my html canvas. Ive already checked that the file for the background is in the same location and it is. What could be the problem?
You need to draw the image onto the canvas after it has loaded, like this:
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 990;
canvas.height = 409;
canvas.style.display='block';
var style=canvas.style;
style.marginLeft="auto";
style.marginRight="auto";
var position=1;
var background = new Image();
background.src="backdrop3.jpg";
// the important bit
background.onload = function () {
ctx.drawImage(background, 0, 0);
}
document.body.appendChild(canvas);
When trying to draw image on canvas using context.drawImage() function , instead of the full image showing on canvas ( both are same size) , it shows only a zoomed area of the image. But when i attach the image to DOM , it shows correctly. You can see the difference in the jsfiddle. The top image is the canvas, the bottom one is the image directly appended to the document body.
https://jsfiddle.net/3fnq62nx/
Also here is the code snippet , what might be wrong here?
<html>
<body>
<canvas id="canvas" style="border: 1px solid black">
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var image = new Image();
image.src = "room_default.jpg";
image.height = "400";
image.width = "800";
image.onload = function(){
canvas.width = image.width;
canvas.height = image.height;
document.body.appendChild(image);
var ctx= canvas.getContext("2d");
ctx.drawImage(image,0,0);
}
</script>
</body>
Here is your solution
var canvas = document.getElementById("canvas");
var image = new Image();
image.src = "http://cdn.home-designing.com/wp-content/uploads/2011/06/livingroom_i_by_dragon2525-d3ioeyf.jpg";
image.height = "400";
image.width = "800";
image.onload = function(){
canvas.width = image.width;
canvas.height = image.height;
document.body.appendChild(image);
var ctx= canvas.getContext("2d");
ctx.drawImage(image,0,0,image.width,image.height);
}
update ctx.drawImage(image,0,0,image.width,image.height);
You can pass height and width of event of canvas image as 4th and 5th argument of drawImage function
hi please check this your issue resolvevar canvas = document.getElementById("canvas");
var image = new Image();
image.src = "http://cdn.home-designing.com/wp-content/uploads/2011/06/livingroom_i_by_dragon2525-d3ioeyf.jpg";
image.height = "400";
image.width = "800";
image.onload = function(){
canvas.width = image.width;
canvas.height = image.height;
document.body.appendChild(image);
var ctx= canvas.getContext("2d");
ctx.drawImage(image,0,0,image.width,image.height);
}
For my website, I need to redraw an image from server which is continuously updating. I found the solution and tried but it still does not auto refresh. I also tried adding a dummy string to my image(local0.jpg) so that the browser does not use cached image but no success. What am I doing wrong?
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="canvas" width="400" height="400"> </canvas>
<script>
var imageObj=new Image();
imageObj.src="local0.jpg?dummy=8484744"
imageObj.onload=function()
{
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.drawImage(imageObj,0, 0,canvas.width,canvas.height);
setTimeout(timedRefresh,1000);
}
function timedRefresh()
{
imageObj.src = "local0.jpg?dummy=8484749"
}
</script>
</body>
</html>
Try the following code
var imageObj = new Image();
imageObj.onload = function() {
drawOnCanvas();
setTimeout(timedRefresh, 1000);
}
// set src AFTER assigning load
imageObj.src = "local0.jpg?dummy=" + Math.random();
function timedRefresh() {
imageObj.src = "local0.jpg?dummy=" + Math.random();
//drawOnCanvas(); //flicker was due this line as it try to draw image load so i commented it... now it should work...
}
function drawOnCanvas() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(imageObj, 0, 0, canvas.width, canvas.height);
}
your function timedRefresh add random values to image
function timedRefresh()
{
imageObj.src = "local0.jpg?dummy=" + Math.floor((Math.random() * 10000) + 1);
}
I am trying to use waveform.js found on http://www.waveformjs.org to draw waveforms of SoundCloud tracks. It hasn't been working so I've stripped down waveform.js to a bare bones form that attempts to draw a fillRect in a newly created canvas element through a Waveform object. The canvas element is successfully created but the fillRect does not appear. I've contrasted this to the direct creation of a canvas element and fillRect, which both work.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample document</title>
</head>
<body>
<div id="example1"></div>
<hr>
<div id="example2"></div>
</body>
<script src="waveform.js"></script>
<script src="script.js"></script>
</html>
Here is script.js:
var canvas, container;
// Creating canvas element and rect in example1
canvas = document.createElement("canvas");
canvas.setAttribute("id", "canvas");
container = document.getElementById("example1");
container.appendChild(canvas);
canvas.width = container.clientWidth;
canvas.height = container.clientHeight;
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.fillRect(20,20,50,100);
// Both created successfully
// Creating canvas element and rect in example2, through waveform object
var waveform = new Waveform({
container: document.getElementById("example2")
});
// Canvas element created successfully, no rectangle
Here is waveform.js:
(function() {
var Waveform;
window.Waveform = Waveform = (function() {
Waveform.name = 'Waveform';
function Waveform(options) {
this.container = options.container;
this.canvas = this.createCanvas(this.container, this.container.clientWidth, this.container.clientHeight);
this.context = this.canvas.getContext("2d");
this.width = parseInt(this.context.canvas.width, 10);
this.height = parseInt(this.context.canvas.height, 10);
this.makeRect();
};
Waveform.prototype.createCanvas = function(container, width, height) {
var canvas;
canvas = document.createElement("canvas");
canvas.setAttribute("id", "wfCanvas");
container.appendChild(canvas);
canvas.width = width;
canvas.height = height;
return canvas;
};
Waveform.prototype.makeRect = function() {
var wfCanvas = document.getElementById("wfCanvas");
var ctx = wfCanvas.getContext("2d");
ctx.fillRect(20,20,50,100);
}
return Waveform;
})();
}).call(this);
Bruh you're way over doing it.
Just be sure that the container you are applying the waveform to has PIXEL DIMENSIONS defined as either css or inline.