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.
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.
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 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);
Background
I've got a bunch of svg's in a document (with rect, path, and whatnot inside each) and I need to draw this out to a downloadable PNG image. I understand that in order to do this there are two methods: either draw the page's HTML structure to a canvas and then export from there or render an SVG and its contents straight onto a canvas.
Hypotheses
The first hypothesis I tried to render the HTML structure using html2canvas and only found out that SVG's could not be rendered via an HTML structure at all (due to security issues). The second hypothesis I tried to render an SVG to canvas via canvg only to find out that it only allowed for one SVG element to be rendered and that only the first one would be rendered.
Results
To prove the first one wrong, type in http://www.w3schools.com/svg/tryit.asp?filename=trysvg_rect to this URL and disable Javascript. To prove the second one wrong I have a fiddle to try out.
The Question
I want to make it clear that my reasoning for having multiple svg's is so that I can place them within a responsive grid system and resize via aspect ratio. Without further ado, I ask my question: How can you render multiple svg elements to a canvas? If the answer to that question is "it isn't possible", then next my question would be: Should I be rendering one svg instead and handle responsiveness another way?
You should be able to draw SVG to canvas just as any other image:
var img1 = document.createElement('img'),
img2 = document.createElement('img')
count = 2;
/// image loading is async, make sure they are loaded
img1.onload = img2.onload = function() {
count--;
if (count === 0) drawImages();
}
img1.src = 'some1.svg';
img2.src = 'some2.svg';
/// when loaded, draw them somewhere on the canvas
function drawImages() {
ctx.drawImage(img1, 0, 0);
ctx.drawImage(img2, someX, someY);
}
That being said - there are a couple of restrictions:
FireFox currently does not want to draw images properly without width and height set inside the SVG file.
CORS (Cross-Origin Resource Sharing) applies if you want to extract images as bitmap (toDataURL/getImageData). If not they should work as normal.
I am trying to grab a particular part of the canvas and then put that image back onto the canvas in a very particular way. However, it seems that the get and put ImageData methods work on an absolute canvas that is not affected by image manipulations. Is there any way to use translations with the get and put dataImage operations in HTML5?
I have a line drawing that occurs at an angle and I want to capture that image, put it on its own canvas, do some processing on it, and then put it back on the canvas at that exact angle and position. I originally thought I could do this by repositioning the canvas based on the position and angle of the drawing, but this did not work because get and put dataImage use absolute rather than relative coordinates.
You could send the data to an image, and draw the image to the new canvas for processing. That way, you will get what appears on the canvas, exactly as it appears.
var img = new Image();
img.onload = function(){
processingCanvas.width = this.width;
processingCanvas.height = this.height;
processingCanvas.drawImage(this,0,0);
}
img.src = originalCanvas.toDataURL();
And boom, it's on your processing canvas (after you wait for it some). As long as you don't have an absolutely HUGE canvas, this method should work rather quickly. Just get everything you want, and make sure it is visible on the canvas. And then you know how to get the processed data back to the other canvas. I hope this was what you were looking for.