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";
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 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 Have a issue about write text to image. I need loop the image. But i get some issue. When i do it , Last image showing and the images size is small. Do anyone help me ?
var div=document.getElementById("locations");
var canvas;
window.onload = function(){
for(var i=0;i<10;i++){
canvas=document.createElement("canvas");
canvas.style.width="75px";
canvas.style.height="75px"
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){
context.drawImage(imageObj, 0, 0);
context.font = "17px Calibri";
context.fillText(i, 30, 36);
};
imageObj.src = "image.png";
div.appendChild(canvas);
};
}
<div id="locations"></div>
<canvas id="myCanvas" width="75" height="75"></canvas>
Result Image
Use canvas.height and width values instead of CSS style. CSS style values applied after canvas drawn.
var div=document.getElementById("locations");
var canvas;
window.onload = function(){
for(var i=0;i<10;i++){
canvas=document.createElement("canvas");
canvas.width=75;
canvas.height=75;
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){
context.drawImage(imageObj, 0, 0);
context.font = "17px Calibri";
context.fillText(i, 30, 36);
};
imageObj.src = "http://placehold.it/350x150";
div.appendChild(canvas);
};
}
<div id="locations"></div>
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");
Error: uncaught exception: [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: http://127.0.11.1/test/canvas5_b.php :: setup :: line 27" data: no]
function setup() {
var e = document.getElementById("mycanvas");
var ctx = e.getContext('2d');
var meter = new Image();
meter.src = "meter.jpg";
var meter_bar = new Image();
meter_bar.src = "meter_bar.jpg";
//alert(meter);
ctx.beginPath();/////////LINE 27////////////
ctx.drawImage(meter, 50, 100);
//ctx.globalCompositeOperation = "lighter";
ctx.drawImage(meter_bar, 68, 123);
ctx.closePath();
}
window.onload = setup;
Both the images are in the right folder. The thing that gets me is that it works if you put a alert(meter); before line 27. Its as if it is not loaded, but I have it running on window.onload, so I dont see how that is.
edit : It is an issue of when the image is loaded (ty rob). It appears best to globally declare and set the image src, and then call window.onload = setup, like this : (correct me if this is bad)
var img1, img2;
img1 = new Image();
img2 = new Image();
//declare and set the images src
img1.src = "meter.jpg";
img2.src = "meter_bar.jpg";
var canvasHeight, canvasWidth;
canvasHeight = 300;
canvasWidth= 600;
var ctx;
function setup() {
var e = document.getElementById("mycanvas");
ctx = e.getContext('2d');
draw();
}
function draw() {
ctx.clearRect(0,0,canvasWidth, canvasHeight);
ctx.beginPath();
ctx.drawImage(img1, 50, 100);
ctx.drawImage(img2, 68, 123);
ctx.closePath();
}
window.onload = setup;
Make sure the images are loaded first. For instance:
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
}
// put this after onload, otherwise onload may
// not be called if image is in cache
img.src = 'whatev.png';
It's likely that the delay introduced by alert is enough to allow the image to load, but without alert, the images have not loaded in time. Try drawing the images onto the canvas only once they have loaded:
function setup() {
function maybeDraw() {
this.loaded = true;
if(meter.loaded && meter_bar.loaded) {
ctx.beginPath();
ctx.drawImage(meter, 50, 100);
//ctx.globalCompositeOperation = "lighter";
ctx.drawImage(meter_bar, 68, 123);
ctx.closePath();
}
}
var e = document.getElementById("mycanvas");
var ctx = e.getContext('2d');
var meter = new Image();
var meter_bar = new Image();
meter.onload = maybeDraw;
meter_bar.onload = maybeDraw;
meter.src = "meter.jpg";
meter_bar.src = "meter_bar.jpg";
}
window.onload = setup;