I did this image with my canvas because I had to modify it and merge two images. However I don't want to show it on my html page but use the url saved of the second canvas in my javascript.
How can I do that ?
Here is my fiddle : http://jsfiddle.net/acbo6m6o/7/
var ctx = document.getElementById('canvas').getContext("2d");
var ctx2 = document.getElementById('canvas2').getContext("2d");
var img = new Image();
img.src = "https://scontent-mad1-1.xx.fbcdn.net/v/t1.0-9/10400072_76198580294_2746326_n.jpg?oh=b8cc93c35d6badfffb65ab5c9cbfce28&oe=5941AAB6";
var img2 = new Image();
img2.src = "https://icc-static-files.s3.amazonaws.com/ICC/photo/2017/01/31/f3a228a9-30ca-453e-99c5-ee6150c714a5/Facebook_Logo.png";
img.addEventListener('load', function(e) {
ctx.arc(150, 150, 150, 0, Math.PI * 2, true);
ctx.save();
ctx.clip();
ctx.drawImage(this, 0, 0, 300, 300);
ctx.restore();
ctx2.drawImage(ctx.canvas, 35, 60, 230, 230);
ctx2.drawImage(img2, 200, 60, 75, 75);
}, true);
var dataURL = canvas2.toDataURL();
var dataURL = canvas2.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href=dataURL; //it save local
Related
Why does axis label of Amchart missing, when displaying to PDF after SVG to canvas conversion using canvg parser?
var image1 = $('div.amcharts-chart-div').get(0);
var svg = image1.innerHTML;
if (svg) {
svg = svg.replace(/\r?\n|\r/g, '').trim();
}
var canvas = document.createElement('canvas');
canvg(canvas, svg, {
ignoreMouse: true,
ignoreAnimation: true
});
var ctx = canvas.getContext('2d');
ctx.globalCompositeOperation = 'destination-over'
// set the color
ctx.fillStyle = '#FFFFFF';
// draw the background
ctx.fillRect(0, 0, canvas.width, canvas.height);
var imgData = canvas.toDataURL('image/jpeg', 1.0);
pdf.addImage(imgData, 'JPEG', 15, 115, 180, 100, undefined, 'none');
I am trying to draw canvas and also want to download, it working fine with download and text but I want to add image also how to do it? The code given bellow draws canvas and downloads it as a png also but how to add image in canvas heading and paragraph in it?
Here is html:
<canvas width="500" height="300" id="canvas">Sorry, no canvas available</canvas>
<a id="download">Download as image</a>
Here is jQuery:
<script type="text/javascript">
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
function doCanvas() {
/* draw something */
ctx.fillStyle = '#B00000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#fff';
ctx.font = '60px sans-serif';
ctx.fillText('Some heading', 10, canvas.height / 2 + 10);
ctx.fillText('Some Paragraph', 15, canvas.height / 2 + 50);
}
function downloadCanvas(link, canvasId, filename) {
link.href = document.getElementById(canvasId).toDataURL();
link.download = filename;
}
document.getElementById('download').addEventListener('click', function() {
downloadCanvas(this, 'canvas', 'test.png');
}, false);
doCanvas();
</script>
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
**var background = new Image();
background.src = "your image path";**
you have to create a variable and then if you want background image of canvas than use it as
function doCanvas() {
ctx.fillRect(0, 0, canvas.width, canvas.height);
**ctx.drawImage(background,400,100,60,90);**
ctx.fillStyle = '#fff';
ctx.font = '60px sans-serif';
ctx.fillText('Some heading', 10, canvas.height / 2 + 10);
ctx.fillText('Some Paragraph', 15, canvas.height / 2 + 50);
}
function downloadCanvas(link, canvasId, filename) {
link.href = document.getElementById(canvasId).toDataURL();
link.download = filename;
}
document.getElementById('download').addEventListener('click', function() {
downloadCanvas(this, 'canvas', 'test.png');
}, false);
doCanvas();
</script>
How can I place a blue box between red and green one using this function?
I need to achieve this effect.
Here's a Codepen.
HTML
<canvas id="canvas">
</canvas>
JS
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
window.onload = draw;
green = new Image;
green.src = 'http://www.thebouncingbox.com/images/thumbnail/produkte/large/California-Sunbounce-meterware-green-box.jpg';
red = new Image;
red.src = 'http://www.front-porch-ideas-and-more.com/image-files/color-red.jpg';
blue = new Image;
blue.src = 'http://s3.amazonaws.com/colorcombos-images/colors/000066.png';
function draw() {
ctx.drawImage(green, 0, 0, 200, 200);
ctx.drawImage(red, 80, 50, 120, 100);
ctx.drawImage(blue, 60, 30, 100, 100);
}
You need to listen onload event of the image before drawing it. To have images over image, series operation will help!
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
window.onload = draw1;
function draw1() {
var green = new Image();
green.onload = function() {
ctx.drawImage(green, 0, 0, 200, 200);
draw2();
};
green.src = 'http://www.thebouncingbox.com/images/thumbnail/produkte/large/California-Sunbounce-meterware-green-box.jpg';
}
function draw2() {
var blue = new Image;
blue.onload = function() {
ctx.drawImage(blue, 50, 50, 100, 100);
draw3();
};
blue.src = 'http://s3.amazonaws.com/colorcombos-images/colors/000066.png';
}
function draw3() {
var red = new Image();
red.onload = function() {
ctx.drawImage(red, 100, 100, 100, 100);
};
red.src = 'http://www.front-porch-ideas-and-more.com/image-files/color-red.jpg';
}
<canvas id="canvas" width="200" height="200"></canvas>
Why not change the order you draw them?
function draw() {
ctx.drawImage(green, 0, 0, 200, 200);
ctx.drawImage(blue, 60, 30, 100, 100);
ctx.drawImage(red, 80, 50, 120, 100);
}
How to make a mask so that the picture was on the background of another picture?
I comment out the line because of that it's not working properly http://jsfiddle.net/LZY5A/5
If the example no pictures refresh the page
Code from the jsFiddle:
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
var imageObj = new Image();
var imageObj2 = new Image();
var bg = new Image();
imageObj.src = 'http://codepo8.github.io/canvas-masking/centerblur.png';
imageObj2.src = 'http://codepo8.github.io/canvas-masking/red-panda.jpg';
bg.src = 'http://s5.goodfon.ru/image/391868-3318x2212.jpg';
setInterval(loop, 17);
function loop() {
// ctx.drawImage(bg, 0, 0, 500,500); // It should be behind
ctx.drawImage(imageObj, 100, 100, 100,100);
ctx.globalCompositeOperation = 'source-atop';
ctx.drawImage(imageObj2, 100, 100, 100,100);
}
You can use destination-over compositing to draw your background behind your knockout effect:
Example code and a Demo: http://jsfiddle.net/m1erickson/Uyz7Y/
ctx.drawImage(imgs[0], 100, 100, 100,100);
ctx.globalCompositeOperation = 'source-atop';
ctx.drawImage(imgs[1], 100, 100, 100,100);
ctx.globalCompositeOperation="destination-over";
ctx.drawImage(imgs[2],0,0);
ctx.globalCompositeOperation="source-over"; // reset to default compositing
BTW, your loop is unnecessary...
StackOverflow community, I'm fairly new to JavaScript programming and I'm having some issues with the HTML5/JavaScript Canvas Combo.
The idea is to, following the click of a button, to verify some lines and, then, show on the screen the image (pre-defined) with some text in specific coordinates, the text depends on the input value, as they are stored in an Array.
The thing is, I'm not being able to draw the text on the Image, only the Image appears. The code goes as follows:
Globally Defined:
...
canvas = document.getElementById("cvs"),
ctx = canvas.getContext('2d'),
...
The Draw() function:
function draw() {
if (img_is_loaded) {
img = document.getElementById("background-A");
var maxh = 600,
maxw = 900,
height = img.height,
width = img.width,
name_input = name[0],
note_input = note[0],
date_input = date[0],
sur_input = sur[0];
while (height > maxh || width > maxw) {
--height;
--width;
}
canvas.height = height;
canvas.width = width;
ctx.save();
ctx.clearRect(0, 0, width, height);
ctx.drawImage(img, 0, 0, width, height);
ctx.font = "54px Times Roman";
ctx.fillStyle = "#000000";
ctx.fillText = (name_input, 35, 320);
ctx.font = "21px Times Roman";
ctx.fillStyle = "#000000";
ctx.fillText = (note_input, 61, 432);
ctx.fillText = (date_input, 254, 501);
ctx.fillText = (sur_input, 254, 528);
}
} else {
setTimeout(draw, 100);
}
}
I'm getting the Image, but no text. I'm aware that the issue, normally, is that I need to draw them "at the same time", so I tried:
function draw() {
if (img_is_loaded) {
var imageObj = new Image();
imageObj.onload = function(){
var maxh = 600,
maxw = 900,
height = imageObj.height,
width = imageObj.width,
name_input = name[0],
note_input = note[0],
date_input = date[0],
sur_input = sur[0];
while (height > maxh || width > maxw) {
--height;
--width;
}
canvas.height = height;
canvas.width = width;
ctx.save();
ctx.clearRect(0, 0, width, height);
$('#spinner-generate').hide();
ctx.drawImage(imageObj, 0, 0, width, height);
ctx.font = "54px Times Roman";
ctx.fillStyle = "#000000";
ctx.fillText = (name_input, 35, 320);
ctx.font = "21px Times Roman";
ctx.fillStyle = "#000000";
ctx.fillText = (note_input, 61, 432);
ctx.fillText = (date_input, 254, 501);
ctx.fillText = (sur_input, 254, 528);
ctx.restore();
}
imageObj.src = "IMAGEPATH";
} else {
setTimeout(draw, 100);
}
}
But, in this case, the "imageObj.onload" function gets skipped by the code, that automatically jumps to "else".
I'm really confused at this point, since every source I consulted says that it is "simple" and uses the imageObj.onload example, but with the "window.onload" combination.
Is there something I'm missing regarding the Canvas' "Order of things"?
I appreciate and thank in advance for any response or input.
You're using fillText as a property while it should have been used as a method - simply change the lines to this format:
ctx.fillText(name_input, 35, 320);
I did not check the rest of the code.