I am making an app for iPhone and Android using HTML, CSS, and JavaScript with PhoneGap. I'm using HTML5 canvas. My ctx.drawImage(); function isn't working, and I cannot figure out why. Here is my code.
var imageReady = false;
var image = new Image();
image.onload = function () {
imageReady = true;
};
image.src = "http://urlToImage.com";
ctx.drawImage(image, 0, 0, 300, 180);
I verified the src link and it worked. Any thoughts? Thanks.
Your drawImage call should be inside the asynchronous callback (which is executed when the image has loaded). Currently it is being invoked before the image is loaded.
var imageReady = false;
var image = new Image();
image.onload = function () {
imageReady = true;
ctx.drawImage(image, 0, 0, 300, 180);
};
image.src = "http://urlToImage.com";
Related
I'm making a chessboard UI and I am not satisfied with it's resolution so I thought of optimizing its resolution.
This is my code so far:
function optimizeResolution(element) {
var img = new Image();
var canvas = $('<canvas></canvas>')[0];
img.onload = () => {
canvas.width = '128px';
canvas.height = '128px';
canvas.getContext('2d').drawImage(element[0], 0, 0, 128, 128);
};
img.src = element.attr('src');
element.attr('src', canvas.toDataURL('image/png'));
}
The problem is that the canvas not drawing anything.
Converting image to the canvas with canvas.drawImage fails(but not throws err), the canvas looks transparent empty image
It doesn't happen for all image files I could not figure out which property of the image causes this but I uploaded an example photo with this issue
I started having this problem with chrome v83-v84
firefox works fine.
I want to upload a specified photo (its inside fiddle) and want to make canvas and draw canvas from the uploaded image and display it on chrome (chrome version should bigger or equal v85)
function testimg(src) {
var img = document.createElement("img");
img.src = src;
document.querySelector('#test').appendChild(img)
}
$('#file').on('change', fileAdded)
function fileAdded(event) {
var reader = new FileReader;
reader.onload = function () {
var image = new Image();
image.src = reader.result;
image.onload = function () {
document.querySelector('#test').appendChild(this)
var imgToSend = processImg(this, this.width, this.height);
testimg(imgToSend)
};
};
reader.readAsDataURL(event.currentTarget.files[0]);
}
function processImg(image, srcWidth, srcHeight) {
var canvas = document.createElement('canvas');
canvas.width = srcWidth;
canvas.height = srcHeight;
var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0);
ctx.fill();
return canvas.toDataURL();
}
https://jsfiddle.net/msacar/2Lgmc85t/24/
I'm building a simple video game using HTML Canvas and JavaScript. I'm trying to replace a black square with an image of a strawberry, but the image is not displaying on the canvas. How would I make the image replace the square?
this.draw = function() {
var img = new Image();
img.src = "strawberry.png";
ctx.drawImage(img, 10, 10);
ctx.fillStyle = "black";
ctx.fillRect(this.x, this.y, 10, 10);
}
The problem is that the image may not have loaded by the time the code is being called. You will need to wait for that to happen.
Try:
function loadimage() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "strawberry.png";
img.onload = function() {
ctx.drawImage(img, 0, 0, c.width, c.height);
}
}
window.onload = loadimage;
I have put a version of this code (I have a different image filename for my test) into a SCRIPT tag in the HEAD section of the page. The code runs when the page has finished loading, but the code itself waits for the img.onload event to be triggered before actually drawing the image. And, change "myCanvas" to the ID of your canvass tag.
I'm trying to convert a SVG file to PNG by drawing it to canvas.
var svgToCanvas = function(svgElement) {
setNameSpaceOnEl(svgElement);
appendCSSRules(svgElement, getCssRules(svgElement));
var image = new Image();
// this is ugly but will do:
var svgXml = $('<div>').append($(svgElement).clone()).html();
var b64str = btoa(unescape(encodeURIComponent(svgXml)));
// var svgXml = new XMLSerializer().serializeToString(svgElement);
var defer = $q.defer();
image.onload = function() {
var canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
defer.resolve(canvas);
};
image.src = 'data:image/svg+xml;base64,' + b64str;
return defer.promise;
};
The problem is that even though the image handling takes place inside the onload function, Firefox yields error NS_ERROR_NOT_AVAILABLE: ... on the line
context.drawImage(image, 0, 0);.
With breakpoints I see the image.src at this point is a valid base64 string, and I can even open up the image itself.
The code above works in Chrome, but not in Firefox. Any suggestions how to get around this in Firefox?
I make an application canvas. Every time I call draw () function, multiple images are drawn in canvas. The problem is that with Opera it does not work. Onload function does not always work.
function draw(){
ctx.clearRect (0, 0, canvas.width, canvas.height);
var img = new Image();
img.src = srcvolets;
img.onload = function(){
ctx.drawImage(img, 0, 0,canvas.width,canvas.height);
if(srccouleur!=null){
var img2 = new Image();
img2.src = 'images/couleurs/'+volets+'/'+srccouleur+'.png';
img2.onload = function(){
ctx.drawImage(img2, 0, 0,canvas.width,canvas.height);
if(srcsculpture!=null){
var img3 = new Image();
img3.src = cheminsculpt+srcsculpture;
img3.onload = function(){
if(volets=='furno'){
ctx.drawImage(img3, 175, 235);
}else{
ctx.drawImage(img3, 175, 242);
}
}
}
}}}}
Thank you. (Sorry for my English, I speak French)
I think this has to do with images being cached, and the onload firing before it is set.
You might need to try setting onload before you set src. See this article about the problem.