I'm creating a maze application with Canvas and having a token traverse the maze from start to finish.
I completed the maze generation and am trying to generate a token at grid (0,0). I've created a button to select a token and throwing a debugger at the end does show that the icon is created in the right position, but it is not persisting after I continue. I've tried adding the image.onload to the drawImage function, but it is still not working.
This was what I originally had that rendered the image on Canvas while in debugger
function selectIcon(){
let body = document.querySelector("body")
let image = document.createElement("img")
image.src = "image.jpg"
body.prepend(image)
// debugger
}
function clickHandler(){
document.addEventListener("click", (e) => {
button = e.target
console.log(button)
if(button.matches(".choose-token")){
renderIconToCanvas()
}
})
}
function renderIconToCanvas(){
const myCanvas = document.querySelector("canvas")
myCanvas.setAttribute("id", "maze-canvas")
const image = new Image;
image.src = "maze/image.jpg"
let ctx = myCanvas.getContext("2d");
ctx.drawImage(image, 0, 0);
}
All of the solutions that I've read say to add image.onload to the drawImage, but when I put it in, my image no longer renders in debugger.
function renderIconToCanvas(){
const myCanvas = document.querySelector("canvas")
myCanvas.setAttribute("id", "maze-canvas")
const image = new Image;
image.src = "maze/image.jpg"
image.onload = function (){
let ctx = myCanvas.getContext("2d");
ctx.drawImage(image, 0, 0);
}
}
Is there something else that I might be missing? Another way that I tried:
let canvas = document.querySelector("canvas")
let ctx = canvas.getContext("2d");
const image = new Image(20,20);
image.src = "./image.jpg"
function draw(ctx, image){
if (!image.complete){
setTimeout(function(){
draw(ctx, image);
}, 50);
return
}
ctx.drawImage(image, 0, 0, this.width, this.height);
}
draw(ctx, image)
Related
I'm trying to resize an image which comes from a Quill editor.
I used this links as guides:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
Resize image with javascript canvas (smoothly)
This is my code:
async handleImageAdded(file, Editor, cursorLocation, resetUploader) {
// Resizing
var img = document.createElement("img");
img.src = URL.createObjectURL(file);
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, 200, 200);
var newFile = await new Promise(resolve => canvas.toBlob(resolve));
document.getElementById("preview").src = URL.createObjectURL(newFile); //check
//Sending data to server
Expected behaviour: will display a resized version of the image which was sent in a file variable. (if I switch newFile to file, everything works just as expected)
Current behaviour: a white rectangle 300x150px
Could you please help me to find what am I missing?
The reason was the absence of image.onload event handler.
This worked for me:
async handleImageAdded(file, Editor, cursorLocation, resetUploader) {
// Resizing
var img = document.createElement("img");
img.src = URL.createObjectURL(file);
var newFile;
const promise = new Promise(resolve => {
img.onload = function (event) {
// Dynamically create a canvas element
var canvas = document.createElement("canvas");
// var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// Actual resizing
ctx.drawImage(img, 0, 0, img.width * 0.5, img.height * 0.5);
canvas.toBlob(blob => {
newFile = blob;
console.log(newFile)
resolve();
});
// Show resized image in preview element
//var dataurl = canvas.toDataURL(file.type);
//document.getElementById("preview").src = dataurl;
}
})
await promise;
//var newFile = await new Promise(resolve => canvas.toBlob(resolve));
document.getElementById("preview").src = URL.createObjectURL(newFile); //check
i'm trying to draw image on canvas and convert it to image with my react app, but when i click on download button i getting this error
`Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.`
here is my code
draw image function
const printLocation = _ => {
let canvas = canvasRef.current;
let context = canvas.getContext("2d");
let img = new Image();
img.src = "https://kilausenja.com/wp-content/uploads/2019/04/18-02-08-17-29-50-859_deco.jpg";
context.drawImage(img, 0, 0, 100, 100);
};
convert canvas to image function
const canvasToImg = _ => {
let canvas = canvasRef.current;
let tagA = document.createElement("a");
document.body.appendChild(tagA);
tagA.href = canvas.toDataURL();
tagA.download = "canvas-image.png";
tagA.click();
document.body.removeChild(tagA);
};
and here is my codesandbox example
Here man, i clone your sandbox and make some change on function printLocation
edited version
img.crossOrigin = "anonymous";
img.src = "https://2.bp.blogspot.com/-VTIlinKHDHE/WXiij8jFF-I/AAAAAAAADvs/r2yZ6H6QomUfR_kNBW0F-638aCj98XZvACLcBGAs/s1600/hasil%2Bscan%2B1%2B-%2Bcara%2Bscan%2Btanda%2Btangan.jpg";
remember for the source of image, because not any server allow you to make a cross origin request
I am loading jpg image in python on the server. Then I am loading the same jpg image with javascript on the client. Finally, I am trying to compare it with the python output. But loaded data are different so images do not match. Where do I have a mistake?
Python code
from keras.preprocessing.image import load_img
from keras.preprocessing.image import img_to_array
filename = './rcl.jpg'
original = load_img(filename)
numpy_image = img_to_array(original)
print(numpy_image)
JS code
import * as tf from '#tensorflow/tfjs';
photo() {
var can = document.createElement('canvas');
var ctx = can.getContext("2d");
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
};
img.crossOrigin = "anonymous";
img.src = './rcl.jpg';
var tensor = tf.fromPixels(can).toFloat();
tensor.print()
}
You are drawing the image on a canvas before rendering the canvas as a tensor. Drawing on a canvas can alter the shape of the initial image. For instance, unless specified otherwise - which is the case with your code - the canvas is created with a width of 300 px and a height of 150 px. Therefore the resulting shape of the tensor will be more or less something like the following [150, 300, 3].
1- Using Canvas
Canvas are suited to resize an image as one can draw on the canvas all or part of the initial image. In that case, one needs to resize the canvas.
const canvas = document.create('canvas')
// canvas has initial width: 300px and height: 150px
canvas.width = image.width
canvas.height = image.heigth
// canvas is set to redraw the initial image
const ctx = canvas.getContext('2d')
ctx.drawImage(image, 0, 0) // to draw the entire image
One word of caution though: all the above piece should be executed after the image has finished loading using the event handler onload as the following
const im = new Image()
im.crossOrigin = 'anonymous'
im.src = 'url'
// document.body.appendChild(im) (optional if the image should be displayed)
im.onload = () => {
const canvas = document.create('canvas')
canvas.width = image.width
canvas.height = image.heigth
const ctx = canvas.getContext('2d')
ctx.drawImage(image, 0, 0)
}
or using async/await
function load(url){
return new Promise((resolve, reject) => {
const im = new Image()
im.crossOrigin = 'anonymous'
im.src = 'url'
im.onload = () => {
resolve(im)
}
})
}
// use the load function inside an async function
(async() => {
const image = await load(url)
const canvas = document.create('canvas')
canvas.width = image.width
canvas.height = image.heigth
const ctx = canvas.getContext('2d')
ctx.drawImage(image, 0, 0)
})()
2- Using fromPixel on the image directly
If the image is not to be resized, you can directly render the image as a tensor using fromPixel on the image itself
First part of my application loads picture with file chooser from my file system and draws image to canvas. I take that canvas and convert it to data URL and also save it in my database.
var imgData = canvas.toDataURL("image/jpg");
factory.saveData(imgData); // execute some java code
Here is the problem. I can't redraw that image, my javascript:
var pic = new Image();
pic.onload = function() {
ctx.drawImage(pic, 0, 0); // ctx = canvas.getContext("2d")
};
// This data url is copy/pasted from database for simplicity
pic.src = "data:image/png;base64,iVBOR..........ElFTkSuQmCC";
Onload function is called but I just get transparent image.
Probably has something to do with the fact that getDataFromDatabase() is asynchronous so you're returning a promise object to pic.src instead of the data url. Fix this by using a then call on getDataFromDatabase and using the result on pic.src like this:
var pic = new Image();
var pic.onload = function() {
ctx.drawImage(pic, 0, 0);
};
getDataFromDatabase().then(dataUrl => {
pic.src = dataUrl;
});
Here's a full example of this in action. I draw to a canvas, store the canvas data as a base64 data url into a variable, save it into a mock DB using closures, then reload the data from a simulated asynchronous function call by using a promise.
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Initialize canvas to a random image
const imageUrl = 'https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=a010291124bf';
const initialImage = new Image();
initialImage.src = imageUrl;
initialImage.onload = function() {
ctx.drawImage(initialImage, 0, 0);
}
// Convert canvas to base64 data url
const imageData = canvas.toDataURL('image/png');
const getDataFromDatabase = saveData(imageData);
// Clear the canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Redraw the image
const pic = new Image();
getDataFromDatabase().then(data => {
pic.src = data;
});
pic.onload = function() {
ctx.drawImage(pic, 0, 0);
}
function saveData(image) {
return function getDataFromDatabase() {
return new Promise(resolve => {
resolve(image);
});
}
}
<canvas id="myCanvas">
</canvas>
Edit: It shouldn't really matter where you get the image data from. If the data is not malformed, it should draw to the canvas. Here's an example identical to the way you're loading image data (from a hardcoded data url):
const imageData = 'data:image/png;base64,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';
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const image = new Image();
image.onload = function() {
ctx.drawImage(image, 0, 0);
}
image.src = imageData;
<canvas id="myCanvas">
</canvas>
I suggest you check your image data using a base64 image decoder to see if your image data is malformed or not. If your data url is valid, then something else I can suggest is ensuring your canvas width and height are equal to or greater than the image's width and height or else it'll be hidden (if the image you're supplying has empty space / padding).
I want to draw a copy of this image on top of it but further down, but the .onclick isn't working for my image object. I tested it already and it works perfectly fine with canvas.onclick but not with my image 'sticky'.
code is below:
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext("2d");
var sticky = new Image();
sticky.src = "sticky.png";
sticky.onload = function() {
context.drawImage(sticky, 0, 0);
};
sticky.onclick = function() {
context.drawImage(sticky, 0, 100);
};
</script>
Your event needs to be on your canvas, not the image. Because when created, an image object isn't automatically added to the dom.
And when a canvas draw an image, it duplicates it, it copies pixels into itself.
So add your image to the dom, and listen for the click on your canvas.
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext("2d");
var sticky = new Image();
var sticky2 = new Image();
sticky.src = "http://lorempixel.com/250/60/";
sticky2.src = "http://lorempixel.com/150/60/";
sticky.onload = function() {
context.drawImage(sticky, 0, 0);
};
canvas.onclick = function() {
context.drawImage(sticky2, 0, 100);
};
<canvas id="myCanvas"></canvas>