canvas to base64 on image src - javascript

I want to convert the rawImg to base64 and pass it on image.src. I will be needing the base64 dataURL to put effects on my canvas.
Pls see my code below:
function onLoad() {
canvas = document.querySelector("#myCanvas");
context = canvas.getContext("2d");
var image = new Image();
image.onload = function () {
if (image.width != canvas.width)
canvas.width = image.width;
if (image.height != canvas.height)
canvas.height = image.height;
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(image, 0, 0, canvas.width, canvas.height);
filterCanvas(imageFilter);
}
var rawImg = "flower.jpg";
imageURL = <-- (convert rawImg to base64.. I dont know what to write here)
image.src = imageURL;
}

Use HTMLCanvasElement.toDataURL(), returns a data URI containing a representation of the image in the format specified by the type parameter(The default type is image/png)
function onLoad() {
canvas = document.querySelector("#myCanvas");
context = canvas.getContext("2d");
var image = new Image();
image.onload = function() {
if (image.width != canvas.width)
canvas.width = image.width;
if (image.height != canvas.height)
canvas.height = image.height;
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(image, 0, 0, canvas.width, canvas.height);
filterCanvas(imageFilter);
var imageURL = canvas.toDataURL();
YOUR_IMAGE.src = imageURL; //Select `YOUR_IMAGE` using getElementById/querySelector/...
}
image.src = "flower.jpg";
}

With HTML snippets as:
<canvas id="myCanvas"></canvas>
<span>Resultant data URL: </span><span id="result"></span>
And, updating your javascript code as below:
canvas = document.querySelector("#myCanvas");
context = canvas.getContext("2d");
var image = new Image();
image.onload = function() {
if (image.width != canvas.width)
canvas.width = image.width;
if (image.height != canvas.height)
canvas.height = image.height;
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(image, 0, 0, canvas.width, canvas.height);
// filterCanvas(imageFilter);
var imageURL = canvas.toDataURL();
alert(imageURL);
document.querySelector("#result").innerHTML = imageURL;
}
image.src = "flower.jpg";
You will get the resultant base64 string within the #result span element. Please try this.

Related

Merge webcam video and canvas drawing together in JS

I'm trying to merge webcam video and canvas drawing and save to an image file. It works but video image covers canvas draving. I tried to swap places context.drawImage but still same. Any ideas? :)
canvas.addEventListener("click", async function () {
var context = canvas.getContext("2d");
context.drawImage(video, 0, 0, canvas.width / 1.5, canvas.height / 1.5);
context.drawImage(canvas, 0, 0, canvas.width, canvas.height);
var dataURL = canvas.toDataURL("image/png");
$.ajax({
type: "POST",
url: "./upload.php",
data: {
dataURL: dataURL
}
});
});
Currently what you code does is to draw the canvas over itself, with the video already painted on it.
You can draw behind the existing content by using the globalCompositeOperation = "destination-over".
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.font = "16px sans-serif";
ctx.textAlign = "center";
const img = new Image(); // a video is the same
img.src = "https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png";
img.decode().then(() => {
canvas.onclick = (evt) => {
ctx.globalCompositeOperation = "destination-over";
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
// reset to default
ctx.globalCompositeOperation = "source-over";
};
ctx.fillText("click on the canvas", canvas.width / 2, canvas.height / 3);
ctx.fillText("to draw the image", canvas.width / 2, canvas.height / 3 + 20);
ctx.fillText("behind this text", canvas.width / 2, canvas.height / 3 + 40);
});
canvas { outline: 1px solid }
<canvas></canvas>

dataURL not working when the context of the canvas is an image

i was trying to download the context of the canvas as an image using dataURL() through the following code but it's not working for some reason. However, when i replace the context of the canvas to be something else besides the image it actually works, so can you tell how can i fix this
<a href="#" id="downloader" >Download!</a>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var image = new Image(60, 45);
image.onload = function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
ctx.drawImage(image, 0, -60);
}
image.src = 'image.png';
$('#downloader').click(function(){
$(this).attr('href', document.getElementById('canvas').toDataURL("image/png").replace("image/png", "image/octet-stream"));
$(this).attr('download', "Picture.png");
});
</script>
Your JS should be:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var image = new Image(60, 45);
//First add src, then set the height and width
image.src = 'image.png';
image.onload = function() {
canvas.width = image.width;
canvas.height = image.height;
// Draw image from start and not from behind the axis
ctx.drawImage(image, 0, 0);
}
$('#downloader').click(function() {
$(this).attr('href', document.getElementById('canvas').toDataURL("image/png"))
$(this).attr('download', "Picture.png");
});

Get canvas toDataUrl() after processing Javascript

I have a Javascript function that create a canvas, write a image and a text on it. At the and I need the base64 dataUrl but what I get is only a blank canvas.
This is my function:
function createBreadCrumb(label) {
var canvas = document.createElement('canvas');
canvas.width = 25;
canvas.height = 30;
var img = new Image;
img.src = 'map-pin-breadcrumb.png';
var ctx=canvas.getContext("2d");
img.onload = function(){
ctx.drawImage(img, 0, 0);
ctx.font = "11px Arial";
ctx.textAlign="center";
ctx.fillText(label, 12, 16);
};
return canvas.toDataURL();
}
You are calling toDataURL before the image is loaded. As a result, none of your canvas instructions have run yet. Because the image is loaded asynchronously, you cannot get the resulting canvas synchronously and must use a callback or a promise.
Try this.
function createBreadCrumb(label, callback) {
var canvas = document.createElement('canvas');
canvas.width = 25;
canvas.height = 30;
var img = new Image;
var ctx = canvas.getContext("2d");
img.onload = function(){
ctx.drawImage(img, 0, 0);
ctx.font = "11px Arial";
ctx.textAlign="center";
ctx.fillText(label, 12, 16);
callback(canvas.toDataURL());
};
img.src = 'map-pin-breadcrumb.png';
}
createBreadCrumb("hello", function(crumb){
// do your stuff
});

cannot clear canvas with existing image

I am trying to blank canvas when there is image already in it.
I want to remove old image and load new image that I am getting from var getfrontimage.
But It failed me.
$('#fittocanvasfront').click(function () {
var canvas = document.getElementById("canvas-front");
var c = canvas.getContext("2d");
var getfrontimage = $('#image-tocanvaschangefront').attr('src');
var img = new resize(getfrontimage);
function resize(src) {
console.log('blank canvas');
canvas.width = canvas.width;
var image = new Image();
image.src = getfrontimage;
image.width = canvas.width;
image.height = canvas.height;
image.onload = function () {
// clearing canvas
c.clearRect(0, 0, canvas.width, canvas.height);
//loading image
c.drawImage(image, 0, 0);
//creating a hole in canvas
var centerX = canvas.width / 2;
var centerY = canvas.offsetTop;
var radius = 30;
c.beginPath();
c.arc(centerX, centerY, radius, 0, 2 * Math.PI, true);
c.fillStyle = 'black';
c.fill();
}
}
});
Into the script-
I have image in <img> tag-
var getfrontimage = $('#image-tocanvaschangefront').attr('src');
this above image is what i will be using after clearing canvas.
So I tried doing canvas empty as below when image is being loaded-
c.clearRect(0, 0, canvas.width, canvas.height);
But this didn't work, I tried doing canvas empty on click-
$('#fittocanvasfront').click(function () {
var canvas = document.getElementById("canvas-front");
var c = canvas.getContext("2d");
c.clearRect(0, 0, canvas.width, canvas.height);
});
How do I empty this canvas with existing image in it.
What you are saying is not true. You can clear of any image using clearRect. Please see fiddle with your code where image's cleared on click.
$("#canvas-front").click(function(){
c.clearRect(0, 0, canvas.width, canvas.height);
});
Hard to say what you're doing wrong, since you didn't provide the full code, use the code I provided in fiddle and all should be fine.

Can't use canvas method putImageData

I have following code:
var img = new Image();
canvas = document.getElementById("c");
ctx = canvas.getContext('2d')
canvas2 = document.getElementById("c2");
ctx2 = canvas2.getContext('2d')
img.onload = function () {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img,0,0);
};
img.src = 'mwq.gif';
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
ctx2.putImageData(imageData, 0, 0);
and i get image on first canvas element, when i check in console there is imageData, with width, lenght and pixel array, but somehow i can't get that image on another canvas element. I dont think there are typos, i rewrote same code several times, and at the end i stripped it to most minimal version without pixel manipulation, but it's still not working.
Your code isn't called in the onload callback, it's executed before the image is loaded so there is nothing to put.
You could change it to
var img = new Image();
canvas = document.getElementById("c");
ctx = canvas.getContext('2d')
canvas2 = document.getElementById("c2");
ctx2 = canvas2.getContext('2d')
img.onload = function () {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img,0,0);
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
ctx2.putImageData(imageData, 0, 0);
};
img.src = 'mwq.gif';

Categories