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);
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 have a canvas with the following images loaded:
Background Image:
Front Image:
Both together looks like this image:
Now i want to apply a feather effect to the hand boarders to result in to something like this:
I tried the following solution so far. But the result is not like on the above image.
var temp = document.createElement('canvas'),
tx = temp.getContext('2d');
temp.width = scope.canvas.width;
temp.height = scope.canvas.height;
tx.translate(-temp.width, 0);
tx.shadowOffsetX = temp.width;
tx.shadowOffsetY = 0;
tx.shadowColor = '#000';
tx.shadowBlur = 100;
var img = new Image();
img.onload = function() {
tx.drawImage(img, 0, 0, 512, 512);
};
img.src = imageURL; // the hand image
var temp2 = document.createElement('canvas'),
tx2 = temp2.getContext('2d');
temp2.width = scope.canvas.width;
temp2.height = scope.canvas.height;
var img2 = new Image();
img2.onload = function() {
tx2.drawImage(img2, 0, 0, 512, 512);
tx2.save();
tx2.globalCompositeOperation = 'destination-out';
tx2.drawImage(temp, 0, 0);
tx2.restore();
};
img2.src = temp.toDataURL("image/png");
Any idea how to solve this?
Regards
Steve
To feather an image, create a copy of it via a new canvas, create an invers mask of the image with destination-out comp. Then draw the hand again and then mask with destination-ou but with a shadow to create the feather.
var canvas = document.createElement("canvas");
canvas.width = 1024,canvas.height = 1024;
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
var hand = new Image();
hand .src = "http://i.stack.imgur.com/PbAfc.png";
hand .onload = function(){
var can = document.createElement("canvas");
can.width = this.width;
can.height = this.height;
ct = can.getContext("2d");
// create inverted mask
ct.fillStyle = "black";
ct.fillRect(0,0,this.width,this.height);
ct.globalCompositeOperation = "destination-out";
ct.drawImage(this,0,0);
// create second canvas
var can1 = document.createElement("canvas");
can1.width = this.width;
can1.height = this.height;
ct1 = can1.getContext("2d");
// draw image
ct1.drawImage(this,0,0);
ct1.shadowColor = "black";
ct1.shadowBlur = 30; // amount of feather
ct1.globalCompositeOperation = "destination-out";
ct1.drawImage(can,0,0);
ct1.shadowBlur = 20; // amount of feather
ct1.drawImage(can,0,0); // The mor you draw the greater the FX
ct1.shadowBlur = 10; // amount of feather
ct1.drawImage(can,0,0); // The mor you draw the greater the FX
ct1.globalCompositeOperation = "source-over";
ct.globalCompositeOperation = "source-over";
ctx.drawImage(can1,0,0);
// use the new canvas can1 as the hand image in later code.
}
//ctx.fillStyle = "#e19e9e"
ctx.fillRect(0,0,1024,1024);
I am using this code to display data of two canvas into third canvas but it is not working.
I am saving the two canvas data using localstorage and passing it to third canvas
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//First canvas data
var img1 = loadImage(localStorage.getItem('cbdata'), main);
//Second canvas data
var img2 = loadImage(localStorage.getItem('cbdata1'), main);
var imagesLoaded = 0;
function main() {
imagesLoaded += 1;
if (imagesLoaded == 2) {
// composite now
ctx.drawImage(img1, 0, 0);
ctx.globalAlpha = 0.5;
ctx.drawImage(img2, 0, 0);
}
}
function loadImage(src, onload) {
var img = new Image();
img.onload = onload;
img.src = src;
return img;
}
Your code works. Check that the content of localStorage.getItem is non-empty. And I also slightly modified display of the images by changing ctx.drawImage commands:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//First canvas data
var img1 = loadImage('http://ep01.epimg.net/elpais/imagenes/2015/10/21/ciencia/1445444934_907402_1445781076_portada_normal.jpg', main);
//Second canvas data
var img2 = loadImage('http://ep01.epimg.net/economia/imagenes/2015/10/22/actualidad/1445508003_507635_1445508894_portada_normal.jpg', main);
var imagesLoaded = 0;
function main() {
imagesLoaded += 1;
if (imagesLoaded == 2) {
// composite now
ctx.drawImage(img1, 0, 0, 100, 100);
ctx.globalAlpha = 0.5;
ctx.drawImage(img2, 100, 0, 100, 100);
}
}
function loadImage(src, onload) {
console.log('loadImage', src);
var img = new Image();
img.onload = onload;
img.src = src;
return img;
}
https://jsfiddle.net/4Le4g8ta/
I have a canvas with an id called napkin. When I call the following function it is supposed to draw an image and the napkin canvas onto another canvas in memory. It works on every browser but IOS Safari. The operation does not seem to exceed the IOS memory cap for the canvas. I test this by calling k().toDataURL(). Any ideas?
function k() {
var canvas = document.createElement('canvas');
var napkin = document.getElementById("napkin");
var img = new Image();
img.src = picurl;
var ctx = canvas.getContext("2d");
var imgdata = new Image();
imgdata.src = napkin.toDataURL();
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
ctx.globalAlpha = 0.5;
ctx.drawImage(imgdata, 0, 0);
return canvas;
}
You need to wait for the image data to load before using it...
var img = new Image();
img.onload = function(){
// do stuff here with img
};
img.src = picurl;
// not here
In my application i have added the code to convert the image into base 64 with a resized images.When i try the following code the image part has been cropped.
function getBase64FromImageUrl(URL)
{
var img = new Image();
img.style.width = this.width,
img.style.height = this.height,
img.src = URL;
img.onload = function ()
{
var canvas = document.createElement("canvas");
canvas.width =150
canvas.height =150;
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 10, 10);
var dataURL = canvas.toDataURL("image/jpg");
c=dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
return c;
}
}
How to get the full image properly?What change requires in the code
function encodeImage(src, callback) {
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
img = new Image();
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
callback(canvas.toDataURL());
}
img.src = src;
}
See this fiddle:
http://jsfiddle.net/NwaPT/3/