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);
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'm trying to code some simple game and I'm stuck at drawing an assets on the canvas. I have made an AssetsLoader "class" that loads images and save them as image objects. For the start I just wanted to draw some of the loaded assets. But drawImage function doesn't show anything....I know that my image is loaded by writing object on consol which gives me this output: <img name="player" src="../assets/images/player.png">
var canvas = document.getElementById('game');
var context = canvas.getContext('2d');
if(!context){
alert('Upgrade browser');
}else{
startGame();
}
function startGame(){
AssetsLoader.getAllAssets();
console.log(AssetsLoader.images.player); // image is loaded
context.drawImage(AssetsLoader.images.player, 0, 0); // doesn't work
}
EDIT:
ok my bad, I put '../' in front of the image path because my project structure look like this:
assets
images
player.png
js
script for AssetsLoader
and I thought I have to go down one level to access image.
I actually just fixed this on my canvas. The fixed code would be:
var canvas = document.getElementById('game');
var context = canvas.getContext('2d');
var img1 = new Image();
img1.src = "../assets/images/player.png";
context.drawImage(img1,100,100);
The reason why you make the img1 var is because that adds the img element to the canvas. Then with img1.src you set the source of the image. When I do drawImage(), first, I insert img1 which includes the source of the image. The second parameter is the X position and the third parameter is the Y position.
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");
I have a canvas element that I'm setting the background on dynamically via code. Then I'm using the Sketch library (http://intridea.github.io/sketch.js/) to draw on the canvas. - This all works.
However, whenever I try to convert the canvas using canvas.toDataURL("image/png") it's able to save the canvas drawing, however isn't saving the background. - I understand this is working as designed.
Is there a way to merge the two? I was toying around with the idea that I could set the image src to the background src after I'm done drawing and try to export that, however I'm not certain. Does anyone have any experience with this?
As you've discovered, the canvas and its background are maintained separately and toDataURL will not also capture the background.
You can combine the background with the sketch using canvas compositing.
The 'destination-over' compositing mode will let you drawImage your background behind the sketches
context.globalCompositeOperation="destination-over";
context.drawImage(backgroundImage,0,0);
Now the background pixels have been drawn behind you sketch and both will be captured with toDataURL.
Yes, You are correct. I fetch the background image along with canvas image and download.
ctx.width = 2503;
ctx.height = 250;
ctx.globalCompositeOperation="destination-over";
var background = new Image();
background.src = "http://localhost/xxxxx/xxxxx/xxxxx/xxxxx/ecg_back.png";
ctx.drawImage(background, 0, 0);
// create pattern
var ptrn = ctx.createPattern(background, 'repeat'); // Create a pattern with this image, and set it to "repeat".
ctx.fillStyle = ptrn;
ctx.fillRect(0, 0, ctx.width, ctx.height);
How are you adding the background to the canvas? Are you setting it in css as a background image? Or are you adding the image directly to the canvas? I think you'll need to do the latter, as per the example here.
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.