I understood it will work only for local images. Can anyone post working code that does this?
I've tried the following -
var base_image = new Image();
base_image.src = ("/img.png");
base_image.onload = function(){
var context = canvas.getContext('2d');
context.drawImage(base_image, 0, 0);
}
and even entering my own URL
base_image.src = ("www.mywebsite.com/img.png");
Followed by -
var str = canvas.toDataURL("image/png");
$("#myimg").attr("src", str);
Neither work.
How can I make this work?
Put base_image.src after base_image.onload:
var base_image = new Image();
base_image.onload = function(){
var context = canvas.getContext('2d');
context.drawImage(base_image, 0, 0);
var str = canvas.toDataURL("image/png");
$("#myimg").attr("src", str);
}
base_image.src = ("/img.png");
Related
So I know this question has been asked before; however, for some reason I cannot get the height and width of my canvas to display correctly.
Here is what I currently have, but for some reason the image gets cut off and does not display the entire image. Any thoughts? Thanks!
function mergeImages(source1, source2){
let image1 = new Image();
image1.src = source1;
var c = document.createElement('canvas');
var ctx = c.getContext("2d");
image1.onload = function (){
c.width = image1.width;
ctx.drawImage(image1, 0, 0, image1.width, image1.height);
let image2 = new Image();
image2.src = source2;
image2.onload = function (){
ctx.drawImage(image2, 0, image1.height, image2.width, image2.height);
console.log(c.toDataURL("image/png"));
};
};
}
You are making the assumption that image1 is loaded before image2, this might be 99% true.
I suggest you get the images first and then write it to the canvas. In your current code you are setting the width and not the height
Attaching two solutions
This is based on what you have, with just some changes around canvas width and height
function mergeImages(source1, source2){
let image1 = new Image();
image1.src = source1;
var c = document.getElementById('canvas');
var ctx = c.getContext("2d");
image1.onload = function (){
let image2 = new Image();
image2.src = source2;
image2.onload = function (){
c.width = Math.max(image1.width, image2.width)
c.height = image1.height + image2.height
ctx.drawImage(image1, 0, 0, image1.width, image1.height);
ctx.drawImage(image2, 0, image1.height, image2.width, image2.height);
console.log(c.toDataURL("image/png"));
};
};
}
mergeImages('https://i.imgur.com/5HtV0Nv.jpg', 'https://i.imgur.com/5HtV0Nv.jpg')
This is based on promises
function loadImage(url) {
return new Promise(resolve => {
const img = new Image();
img.addEventListener('load', () => {
resolve(image);
});
img.src = url;
});
}
async function asyncMergeImages(source1, source2){
let c = document.getElementById('canvas');
let ctx = c.getContext("2d");
let image1 = await loadImage(source1)
let image2 = await loadImage(source2)
c.width = Math.max(image1.width, image2.width)
c.height = image1.height + image2.height
ctx.drawImage(image1, 0, 0, image1.width, image1.height);
ctx.drawImage(image2, 0, image1.height, image2.width, image2.height);
console.log("async",c.toDataURL("image/png"));
}
asyncMergeImages('https://i.imgur.com/csFntM8.jpg', 'https://i.imgur.com/5HtV0Nv.jpg')
I am trying to make flappy bird but when I try to load the background on my canvas it just does nothing
var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");
// load img
var bird = new Image();
bird.src = "img/bird.png";
var bg = new Image();
bg.src = "img/bg.png";
var fg = new Image();
fg.src = "img/fg.png";
var pipeNoord = new Image();
pipeNoord.src = "img/pipeNorth.png";
var pipeSouth = new Image();
pipeSouth.src = "img/pipeSouth.png";
// draw images
window.onLoad = function(){
ctx.drawImage(bg, 0, 0);
}
I would suggest you move the whole image loading code into the onload handler. Like so, you can make sure that everything is loaded before you actually call drawImage. In addition, as #Chris G mentioned, it's window.onload, not window.onLoad:
// draw images
window.onload = function(){
var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");
// load img
var bird = new Image();
bird.src = "img/bird.png";
var bg = new Image();
bg.src = "img/bg.png";
var fg = new Image();
fg.src = "img/fg.png";
var pipeNoord = new Image();
pipeNoord.src = "img/pipeNorth.png";
var pipeSouth = new Image();
pipeSouth.src = "img/pipeSouth.png";
ctx.drawImage(bg, 0, 0);
}
I have a canvas and I want to convert it and show in a tag. I know we can convert canvas to image by using toDataURL() and toBlob() but both method give me base64 data which is not a image.
$("#upload_feedback_btn").on("click", function() {
let feedbackSrc = document.getElementById("capture").toDataURL('image/png', 1.0);
$("#feedback_canvas_image").append("<img id='upload_canvas_img' src="+feedbackSrc+">");
});
var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
ctx.fillRect(50,50,50,50);
var img = new Image();
img.src = can.toDataURL();
document.body.appendChild(img);
http://jsfiddle.net/simonsarris/vgmFN/
Use this, pure javascript:
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
make_base();
function make_base()
{
base_image = new Image();
base_image.src = 'img/base.png';
base_image.onload = function(){
context.drawImage(base_image, 100, 100);
}
}
I am trying to take a pattern and apply it over a png image but only cover the non-transparent part of the image similar to this one.
http://jsfiddle.net/eLmmA/1/
$(function() {
var canvas = document.createElement('canvas');
canvas.width = 250;
canvas.height = 250;
var canvas_context = canvas.getContext("2d");
var img = new Image();
img.onload = function(){
var msk = new Image();
msk.onload = function(){
canvas_context.drawImage(img, 0, 0);
canvas_context.globalCompositeOperation = "destination-in";
canvas_context.drawImage(msk, 0, 0);
canvas_context.globalCompositeOperation = "source-over";
};
msk.src = 'http://i.stack.imgur.com/QtQrZ.png';
}
img.src = 'http://i.stack.imgur.com/MDGFY.jpg';
document.body.appendChild(canvas);
});
The example above is really close to what I want but I need to be able to use a smaller texture image and repeat it over the none pattern image. I am not familiar with how to use canvas properly but trying to learn more about it.
Thanks in advance!
Never mind I figured it out.
var canvas = document.createElement('canvas');
canvas.width = 250;
canvas.height = 250;
var canvas_context = canvas.getContext("2d");
var img = new Image();
img.onload = function(){
var msk = new Image();
msk.onload = function(){
var ptrn = canvas_context.createPattern(img, 'repeat');
canvas_context.fillStyle = ptrn;
canvas_context.fillRect(0, 0, canvas.width, canvas.height);
canvas_context.drawImage(img, 0, 0);
canvas_context.globalCompositeOperation = "destination-in";
canvas_context.drawImage(msk, 0, 0);
canvas_context.globalCompositeOperation = "source-over";
};
msk.src = $('#base_url').data('base')+'assets/themes/img/download.png';
}
img.src = $('#base_url').data('base')+'assets/uploads/thumbs/1381413411Purple-Night-Owls-thumb.jpg';
$('#itemPreview').html(canvas);
I tried everything to get this work but didn't happen.
Want a method to combine two images (that they are overlayed somehow).
I tried it like described here: Merge Image using Javascript
With this Code:
var c=document.createElement("canvas");
c.width = 100;
c.height = 100;
var ctx=c.getContext("2d");
var imageObj1 = new Image();
imageObj1.src = base64String;
var imageObj2 = new Image();
imageObj1.onload = function() {
ctx.drawImage(imageObj1, 0, 0, 328, 526);
imageObj2.src = "2.png";
imageObj2.onload = function() {
ctx.drawImage(imageObj2, 15, 85, 300, 300);
var img = c.toDataURL("image/png");
}
};
But it doesn't work.
I get the first image by Base64 from Local Storage (as described here) like this:
var img = new Image();
img.src = base64String;
And the base64 String looks like this: data:image/png;base64,iVBORw0KGgoAAAANS....
Does this somehow break this approach with canvas?
Any help is appreciated :) took me already hours and can't figure it out....
Fixed it like this:
var c = document.createElement('canvas');
c.width = 82;
c.height = 75;
var ctx = c.getContext("2d");
var imageObj2 = new Image();
imageObj2.onload = function (){
ctx.drawImage(imageObj2, 0, 0, 82, 75);
var imageObj1 = new Image();
imageObj1.onload = function (){
imageObj1.style.objectFit = "cover";
ctx.drawImage(imageObj1, 14, 4, 53, 53);
};
imageObj1.src = data.elephant;
};
imageObj2.src = "2.png";