We Keep Coding

Canvas ToDataUrl to simple image - javascript

Is there any way I can transform the data that I receive via toDataURL() into a simple image ending in .jpg or .png without having to download it?
My problem is that the data I receive with toDataURL, despite visualising perfectly into html tags, doesn't work with a ThreeJS script I'm working on.
Here you can find of the generated image into an img src tag (there was too much text to link it here). If there was a way to just make all that text into a simple filename.png I'm sure it would fix most of my problems.
The image is currently being loaded to the OBJ using
child.material.map = new THREE.Texture(img);
Where "img" has been data straight from the canvas or the dataurl generated picture.
var img = c.toDataURL({
format: 'png',
width: 1024,
height: 1024
})
I also tried using "c" and "ctx", but neither worked.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

Related

I have an image in my html dom
(the green border image) it has a img tag and having a src url.
I've tried with fetch by retrieving blob but request isn't supporting second request. Server is refusing to get image for second time.
So I've tried with canvas with
ctx.drawImage(imgNode, 0,0)
and tried placing it in dom. The canvas copies the image.
But when I tried getting toDataURL and getImageData
it shows following errors.
Later, I tried with imgnode.crossOrigin = 'anonymouse'
But then Image breaks.
I've checked by right click > copy image Then I can paste image somewhere else.
So how am I supposed to save this image/copy this image in my local disk.
I'm using selenium with python. I want to retrieve image.

Run this javascript code on the page and create an alert(). You can change the "image/jpeg" to png or as it is.
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/jpeg");
return dataURL.replace(/^data:image\/(png|jpg|jpeg);base64,/, "");
}
alert(getBase64Image(document.getElementById("ImgCaptcha")))
In your application, make a listener to the alert and capture the base64 image value.

I have a canvas that is edited by a user (some drag and drop stuff), and it has some instructions printed in text on it. I want to save the image without that text.
I am using KeneticJS. The size will always be the same and the text is at the bottom of the image, so I was thinking if I could just crop that out that would work fine. I am passing the image as a dataURL to my solution, is it possible to crop the image before sending it as a data url?
It would be great if I could just say dataURL.crop(height, width); or something.
Here is my code which, on button press, sends the image as a data url to my filemaker solution.
bGroup.on('click touchstart', function(){
stage.toDataURL({
callback: function(dataUrl) {
var myParam = encodeURIComponent(dataUrl.split(',').pop());
theURL = 'fmp://$/" & Get(FileName)& "?script=MoistureMap_Done&param=' + myParam;
window.location= theURL;
bDone.fill('green');
buttonLayer.draw();
}});
});

There's no direct way of clipping your text, but it's not difficult:
Create an image from the dataURL (or use the texted image if you still have access to it).
Create a new in-memory canvas: document.createElement('canvas');
Resize the canvas to your desired clipped size: canvas.width=10; canvas.height=10;
Draw the image from #1 onto the canvas: context.drawImage
The text at the bottom of the image will automatically be clipped since the in-memory canvas is smaller than the incoming image.
Pull the dataurl of the in-memory canvas: canvas.toDataURL

I am using jsPDF to convert images within canvas to toDataURL(). Specifically I am dealing with PNG's that once converted to JPEG and saved to a PDF file using the jsPDF plugin. I recieve a black background. I know this has to do with the PNG being able to handle transparent backgrounds and JPEG unable to register that. I know there are work arounds by creating some sort of background to replace the black background already inserted within that newly created JPEG but I am not sure how I can accomplish this?
Suggestions, thoughts?
Heres what I am doing:
$(".email_button").click(function(){
// LOOP THROUGH EACH CANVAS SECTION AND STORE THE DATA INTO PDF FORM USING JSPDF CONVERT
var canvas = $(".ifp_container_printing_15 canvas").get();
var imgData = canvas[0].toDataURL('image/jpeg');
console.log(imgData);
var doc = new jsPDF();
doc.addImage(imgData, "JPEG", 60,50);
doc.output('dataurlnewwindow');
});

Try:
var canvas = $(".ifp_container_printing_15 canvas").get(0);
var imgData = canvas.toDataURL('image/jpeg');

I have to make a copy of given image after it's loaded. The problem is that the image is not usin static url and the image is different each time, it's generated with php on the server side. The link keeps the same every time. What I have to do is to make a copy of this already loaded image. How can I do that using HTML5 and canvas, or is there any other way to do that? I know that it can be done with canvas, but I need the src of the image. The problem is that it's not a static url, and when I do it, I get another picture instead of the loaded one. Any ideas?

You can use a canvas; it's pretty simple:
<img src=http://placekitten.com/300/340 id=kitteh>
<canvas id=c></canvas>
JS:
var canvas = document.getElementById("c"),
kitteh = document.getElementById('kitteh'),
ctx = canvas.getContext('2d');
canvas.height = kitteh.height; canvas.width = kitteh.width;
ctx.drawImage(kitteh, 0, 0);

Since it is impossible to specify an image-set using the src DOM attribute, I'm using -webkit-image-set to specify the image contents, like this:
<img id="imgTest" />
...
#imgTest {
background-image: -webkit-image-set(url(icon1x.jpg) 1x,url(icon2x.jpg) 2x);
}
The image content loads fine, depending on the device pixel ratio. Now, I need to dump the image into a canvas. Here's my code:
var c = document.createElement("canvas");
var ctx = c.getContext("2d");
c.width = 20;
c.height = 20;
ctx.drawImage(document.getElementById("imgTest"), 0, 0);
// Let's see what we've got in the canvas.
var data = ctx.getImageData(0, 0, 2, 2).data;
At this point, data is a zero-filled array (and the actual image is clearly not empty). If I set the src attribute for #imgTest to e.g. icon2x.png, the data contents reflect the actual image.
Any idea if it is possible to dump contents of an image containing a -webkit-image-set into a cavas?

I'm not familiar with -webkit-image-set, nor your code, and couldn't recreate what you are suggesting. So ultimately, I have no idea.
Hoewever, I am familiar enough with HTML and javascript to guess that the image element either hasn't loaded yet, or has different data spaces for the background, and the actual image, and that drawImage() uses the actual image data. So I would suggest using the src property, and using and onload handler to draw the image when it, or the body has finished loading.
Another option would be to create a hidden image element with the src property set and use that data after it loads.