I need to create a canvas element from a previously loaded image in the DOM. How I can do this with javascript?
The source of my images are on another server. Therefore I have Cross domain problems...
Thanks in advance !
So I have created this fiddle that shows how to load images, cross domain and then display on canvas..
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
var img = new Image();
img.onload = function(){
context.drawImage(img, 69, 50);
}
img.src="http://indianautosblog.com/wp-content/uploads/2013/01/2014-Ferrari-F150-Enzo-successor-rendered.jpeg";
This JS shows how to load an image from another site..
Here
Just pass drawImage the image object.
Related
Is it possible that after user finished their drawings and save both backgroundImage and drawings that they did?
var canvas = document.getElementById("canvas"); // comes from html
var context = canvas.getContext("2d"); // get context of canvas
canvas.style.backgroundImage = `url(${value.result.questionImage})`; // images comes from sql database.
// user does some drawing on the canvas...
You should draw the background image on the canvas instead of using style:
var canvas = document.getElementById("canvas"); // comes from html
var context = canvas.getContext("2d"); // get context of canvas
var image = document.createElement('img')
image.onload = ()=>context.drawImage(image, 0,0);
image.src=value.result.questionImage;
Now, when the you get the data url the question image will be used also because it is now an ordinary part of the canvas.
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.
I have two transparent png files with identical width and height in my cordova/Ionic app. I wish to combine the two png files into a new png file of the same width and height with one file overlayed on top of the other file. i.e., one image is a layer on top of another image. The result must be a transparent png. How can I do this in my javascript cordova app?
You could do this by adding both images to a canvas that you create on the fly, or have in your DOM but not displayed, then read back the canvas by using the canvas' toDataURL("image/png"). Use the 2d context on the canvas to load the images in.
Something like:
var canvas = document.getElementById('myCanvas'); // or create one just don't display it
var ctx = canvas.getContext('2d');
var image1 = '<image url>';
var image2 = '<image url>';
var image = new Image();
var compositeImage;
image.src = image1;
ctx.drawImage(image, 0, 0);
image = new Image();
image.src = image2;
ctx.drawImage(image, 0, 0);
compositeImage = canvas.toDataURL("image/png");
compositeImage then has a data URL of your composite image that you can use to do whatever with.
Good evening guys.
I'm working on a project in which i have an image upload canvas with draggable elements to put it over the uploaded image.
Is kinda messy right now, as the elements are absolute positioned to a 800px resolution. Here is the demo.
What i need now is to have a button that takes an screenshot of the canvas region, and then takes this screenshot to another canvas in another page.
Is that possible?
Yes it is possible.
1) First convert the canvas to to data url like this :
var dataURL = canvas.toDataURL();
2) Pass this value to next page.
3) Then load that url :
function loadCanvas(dataURL) {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// load image from data url
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(this, 0, 0);
};
imageObj.src = dataURL;
}
For more details refer :
Converting Data Url: http://www.html5canvastutorials.com/advanced/html5-canvas-load-image-data-url/
Loading Data Url : http://www.html5canvastutorials.com/advanced/html5-canvas-load-image-data-url/
I am attempting to draw a dynamic PNG image (one that is generated by a PHP script) onto a Canvas element using its URL. I can't really post exact URLs for pages I'm testing this out on, as you must be logged in to the website.
An example of one of the dynamic image URL I'm using is: http://www.website.com/includes/dynamicimage.php?ID=29718958161
If you were logged into this particular website and pasted that URL into your address bar, it would correctly display the image. However, the following Javascript code is not properly drawing it onto the canvas element:
function checkImage(imageContext) {
var canvas = document.createElementNS(
'http://www.w3.org/1999/xhtml', 'canvas');
canvas.width = imageContext.width;
canvas.height = imageContext.height;
var context = canvas.getContext("2d");
var img = new Image();
img.src = imageContext.src;
context.drawImage(img, 0, 0);
newWindow = window.open(imageContext.src, 'newWin', 'width=300,height=300');
newWindow2 = window.open('', 'newWin2', 'width=300,height=300');
newWindow2.document.body.appendChild(canvas);
var imgd = context.getImageData(0, 0, imageContext.width,
imageContext.height);
var pix = imgd.data;
}
I'm having two pop-up windows display both the dynamic image and what is drawn to the canvas, but the canvas is always blank. I am then attempting to do further RGB testing on the image after setting the "pix" variable, but since the image is never drawn to the canvas element, this step fails.
Your problem is that you are not waiting for the image to load before attempting to draw it to the canvas. See the section titled "Playing It Safe" in this question for more details.
In short:
var img = new Image; // First create the image...
img.onload = function(){ // ...then set the onload handler...
ctx.drawImage(img,0,0);
};
img.src = "someurl"; // *then* set the .src and start it loading.