canvas and background as image - javascript

I'm trying to have a page where users can customize a canvas and then email the finished project to themselves. I set the background of the canvas using the following javascript:
function setbackground1() {
document.getElementById('myCanvas').setAttribute("class",
"background1");
}
function setbackground2() {
document.getElementById('myCanvas').setAttribute("class",
"background2");
}
and included a form on the page to populate the rest of the canvas. I have tried various ways of including canvas.toDataURL() in order to save the canvas as an image that can later be emailed to them however the background image is not part of the saved image. (similar problem to Canvas to Save Image and Email but my text saves not my images)
I've been trying variations of this but it's not working for me.
function setbackground11() {
var img = new Image();
img.src = 'background1.jpg';
img.onload = function () {
ctx.fillRect( 0, 0, canvas.width, canvas.height )
}
}
I believe that I somehow have to reference myCanvas id as well
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');`

CSS styles aren't part of the canvas image. For a solid color:
ctx.fillStyle = 'green'
ctx.fillRect( 0, 0, canvas.width, canvas.height )
For an image:
var img = new Image();
img.src = 'background1.jpg';
img.onload = function () {
ctx.drawImage( img, 0, 0, canvas.width, canvas.height )
// do the rest of your drawing over the background
}

Related

Layering an image on top of an HTML canvas that already has an image as its background

I created a canvas element with a colored background, and I came up with the following code to insert an image on top of this canvas:
const canvas = document.getElementById(id);
console.log(canvas);
if (canvas.getContext) {
var context = canvas.getContext('2d');
var img = new Image();
img.src = 'https://google.com/xyz.jpg';
img.onload = function () {
context.save();
context.rect(10, 2, 10, 10);
context.clip();
context.drawImage(img, 0, 0); // image won't resize
context.restore();
};
}
Now this successfully layers the image on top of the canvas (it's cut off however), but I can't find a way to resize the image to be of a certain size (for example 10x10). I tried changing changing the second last line in my code to context.drawImage(img, 0, 0, 10, 10); but this broke my code and the image would not display on the canvas at this point. Any help would be greatly appreciated!
To load and draw an image.
const ctx = can.getContext('2d');
const img = new Image;
img.src = 'https://pbs.twimg.com/media/DyhGubJX0AYjCkn.jpg';
img.addEventListener("load", () => {
// draw image at 10, 10, width and height 50,50
ctx.drawImage(img, 10, 10, 50, 50); // resizes image
}, {once: true});
canvas {
background: green;
}
<canvas id="can" width="200" height = "200"></canvas>

Once I have a base64 url how can I change the filter for brightness and contrast?

If I have an image in base64 ex.
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABDAAwfqNRk/rjcYX+PxrV/wtWqwJSTlboMgAAAABJRU5ErkJggg==
What's the fastest way to change a filter (ex. brightness, contrast) programmatically and without creating any img or canvas tag in the view? Then once changed, convert it back to a base64 url?
You can do this by putting the image onto a HTML canvas with filters applied, then turning that canvas back into a base64 URL.
Since you never add the canvas to the document, it will never be seen.
This is how you would do it asynchronously:
This takes about 1-10ms
function applyFiltersToImage(imageURL, callBack) {
// load the image url into an image object
const image = new Image();
image.src = imageURL;
const canvas = document.createElement("canvas");
const ctx = canvas.getContext('2d');
image.onload = () => {
canvas.width = image.width;
canvas.height = image.height;
// apply css filters here
ctx.filter = 'brightness(0.5) contrast(2)';
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
// turn canvas back into a base64 image URL
callBack(canvas.toDataURL("image/png"));
}
}
You could do it synchronously if you already have the Image instance loaded.
This is how you will do it synchronously:
function applyFiltersToImageSync(imageObject) {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext('2d');
canvas.width = imageObject.width;
canvas.height = imageObject.height;
// apply css filters here
ctx.filter = 'brightness(0.5) contrast(2)';
ctx.drawImage(imageObject, 0, 0, canvas.width, canvas.height);
//turn canvas back into a base64 image
return canvas.toDataURL("image/png");
}

Replace Rectangle on Canvas with Image

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.

Make canvas stretch to fit image

I have a canvas in which I want to render various images, depending on the user. Right now the canvas is fixed size like this:
<canvas width="400" height="300" id={'canvas'}/>
This is how I'm rendering the image:
componentWillReceiveProps(nextProps) {
const ctx = document.getElementById('canvas').getContext('2d');
const img = new Image();
img.onload = function () {
ctx.drawImage(img, 0, 0);
};
img.src = URL.createObjectURL(nextProps.image)
}
But this is what's happening:
So the image at the bottom is too big to be in the canvas, and the other image is too small to fill the image. Also if the image is anything other then a 400x300, it gets cut. How can I prevent it?
In order to get dynamically your canvas dimensions you could have the following componentWillReceiveProps() method:
componentWillReceiveProps(nextProps) {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function () {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};
img.src = URL.createObjectURL(nextProps.image)
}
try by providing the canvas width and height along with ctx.drawImage like:
ctx.drawImage(img, 0, 0, 400, 300);

Javascript load image in canvas without losing quality

I use a canvas element to visualize an image because I need to manipulate image pixel.
When I load the image in an img tag it has a good quality, but when I load the image using canvas it is pixelated.
This is the result:
with img tag
with canvas
How i can resolve this?
---- EDIT ----- I have partially solve, but the result it is not yet the best.
the new image and the code:
with img tag
with canvas
Code:
var c = document.getElementById("c"); //canvas
var i = document.getElementById("i"); //element from which take the dimensions
var image = new Image();
image.src = "./rendering-sito/renderoutput/v6p-x-render/jpg60/v6p-x-render_Camera0010010.jpg";
c.width = i.width;
c.height = i.height;
c.getContext("2d").drawImage(image, 0, 0, image.width, image.height, 0, 0, c.width, c.height);

Categories