Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have a canvas box and I need to take a screenshot of it to save onto the same page under the canvas box. When you click on the small picture it should bring you to a bigger picture. I want it to take as many screen shots as I want and have them all show up on the page until I press clear.
I know that I could use the dataToUrl() for the saving part, but I don't know how the go about the rest of it.
//define some HTML to play with
<canvas id="mycanvas" width="400" height="200"></canvas>
<p><button type="button" id="savebutton">Save canvas</button></p>
<div id="gallery"></div>
<script>
//capture HTML elements
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
var saveButton = document.getElementById('savebutton');
var gallery = document.getElementById('gallery');
//draw something in canvas to be captured
ctx.fillStyle = 'lightblue';
ctx.fillRect(0, 0, 400, 200);
ctx.fillStyle = 'red';
ctx.font = '50px Arial, sans-serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('Hello, world', 200, 100);
//define an event listener for the button
var addImage = function(e){
var img = document.createElement("img");
img.src = canvas.toDataURL();
gallery.appendChild(img);
if(e){
e.preventDefault();
e.returnValue=false;
}
};
//clicking the button will create an image element from the canvas data
//and append it as a child element to the gallery div
saveButton.addEventListener('click', addImage, false);
</script>
http://jsfiddle.net/KaliedaRik/77bNp/
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 months ago.
Improve this question
I'm learning about html canvas, and I know how to add lines with different thickness and color, so now, I'm trying to make it so that whenever you press an html button, a line pops up.
I made three buttons; one for a red line, one for a blue line, and one to clear the whole board.
However, only the red line button and the clear button works. Whenever I click the blue line button, nothing happens.
Here's the code:
function redColor(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//ctx.beginPath();
ctx.moveTo(200, 0);
ctx.lineTo(0, 100);
ctx.lineWidth = 1;
ctx.strokeStyle = "red";
ctx.stroke();
}
function blueColor(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = 4;
ctx.strokeStyle = "blue";
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
}
function remove(){
var a = document.getElementById("myCanvas");
var tx = a.getContext("2d");
tx.clearRect(0, 0, 200, 100);
}
canvas {
border: solid 1px #000;
}
<canvas id="myCanvas" width="200" height="100"></canvas>
<div>
<button onclick="redColor()">Red</button>
<button onlick="blueColor()">Blue</button>
<button onclick="remove()">Clear</button>
</div>
You misspelled "onclick"! change it to:
<p>
<button onclick="redColor()">Red</button>
<button onclick="blueColor()">Blue</button>
<button onclick="remove()">Clear</button>
</p>
You spelled onclick as "onlick". I don't know if this makes a difference, but the order of the code is different for red and blue
Suppose I have an image and a div whose position is absolute and is above that image (z-index of div more than z-index of image).Something like this :
I want to take screenshot of what is visible through the div using JavaScript. At first I thought of changing the div to a canvas and then I wrote this code:
<div class="utility-btn">
<button class="enquiry-btn" onclick="openEnquiry()">?</button>
</div>
<div id="enquiry">
<button id="close" onclick="closeEnquiry()">X</button>
<div class="cover">
<canvas id="capture"></canvas>
<button class="btn" onclick="takeScreenshot()">
Click to enquiry
</button>
</div>
</div>
Function to take screenshot:
function takeScreenshot() {
var canvas = document.getElementById('capture');
ctx = canvas.getContext('2d');
var backCanvas = document.createElement('canvas');
backCanvas.width = canvas.width;
backCanvas.height = canvas.height;
var backCtx = backCanvas.getContext('2d');
backCtx.drawImage(canvas, 0, 0);
ctx.drawImage(backCanvas, 0, 0);
var dataURL = backCanvas.toDataURL();
console.log(dataURL);
}
But the image of dataURL was not what I expected it was just a blank image:
How can I implement this feature. How can I do it without using any external library?
There are two problems:
#1
If we look at your bit of code responsible for actually taking the screenshot
function takeScreenshot() {
var canvas = document.getElementById('capture');
ctx = canvas.getContext('2d');
var backCanvas = document.createElement('canvas');
backCanvas.width = canvas.width;
backCanvas.height = canvas.height;
var backCtx = backCanvas.getContext('2d');
backCtx.drawImage(canvas, 0, 0);
ctx.drawImage(backCanvas, 0, 0);
var dataURL = backCanvas.toDataURL();
console.log(dataURL);
}
we can see that canvas is the element you want to have the screenshot taken onto. Later on you're creating an empty new canvas backCanvas and make it the size of the first canvas. Afterwards you're drawing the empty first canvas on the second and finally the empty second canvas back to the first.
So that does not make too much sense.
Instead you need to take the actual canvas generated by threeJS. These lines of your code append a <canvas> element to the container <div>, threeJS is using:
const container = document.getElementById('container');
container.appendChild(renderer.domElement);
We can reference it using:
document.getElementById("container").children[0]
#2
As threeJS uses WebGL to draw stuff, it's rendering context is not the regular and for performance reasons the browser is clearing the drawing buffer after something has been drawn onto - so your screenshot would come up empty all the time. There is an option you need to pass to the THREE.WebGLRenderer constructor to keep the drawingbuffer called preserveDrawingBuffer.
So change this line:
renderer = new THREE.WebGLRenderer();
to this
renderer = new THREE.WebGLRenderer({preserveDrawingBuffer: true});
and your screenshot function to this:
function takeScreenshot() {
var canvas = document.getElementById('capture');
ctx = canvas.getContext('2d');
ctx.drawImage(document.getElementById("container").children[0], 0, 0);
var dataURL = canvas.toDataURL();
console.log(dataURL);
}
i'm working with an hybrid Android app and I need to take a picture from camera, process the image and then show the results obtained on another window that should contain a small preview of the picture taken and some text with the results.
Here is the relevant code that is not currently working as I need:
From script of first window:
.
.
.
CameraPreview.takePicture(function(imgData){
var mImage = new Image();
mImage.onload = function(){
var canvas = document.createElement('canvas');
canvas.width = mImage.width;
canvas.height = mImage.height;
var context = canvas.getContext('2d');
context.drawImage(mImage, 0, 0);
var imgData = context.getImageData(0, 0, canvas.width, canvas.height);
.
.(Process imgData[])
.
localStorage.setItem("resultImage", mImage.src);
window.open('result.html','_blank','location=no');
};
mImage.src = 'data:image/jpeg;base64,'+imgData;
});
Then, "result.html" pops up, which has the following html content:
...
<body>
...
<canvas id="resultCanvas" style="position: absolute; top: 0%; left: 0%;"></canvas>
...
</body>
...
And the following javascript code:
...
var mImage = new Image();
mImage.onload = function(){
var canvas = document.getElementById('resultCanvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight*0.3; // 1/3 of phone screen size
var context = canvas.getContext('2d');
context.drawImage(mImage);
navigator.notification.alert('Height = '+mImage.height+'\n'+'Width ='+mImage.width, function(){},'Image','Done');
};
mImage.src = localStorage.getItem("resultImage");
...
The alert window shows the 640x480 of the image, but the canvas is transparent where it should contain the picture taken.
If I replace the "context.drawImage()" statement with "context.fillrect()" I can see the black rectangle drawn on screen, so it looks that the canvas is there, but somehow I can not make it draw the desired image.
Hope I explained myself correctly.
I really appreciate any help. Thanks!
Well, finally I solved it, first I tryied using an "img" element instead of a canvas, and that works fine, but the problem is I need to make some drawings over the picture, so insisting on code I posted before, I realized the problem was on the use of drawImage() method in the second script, it is necessary to specify position, so replacing:
context.drawImage(mImage);
with
context.drawImage(mImage,0,0);
solved everything.
I have a textarea and canvas. The user is able to drag image onto the canvas and change different background images. Now I need to be able to have a section at the bottom of canvas that will display text from textarea.
<canvas id="canvas" width="640" height="280"></canvas>
<div id="text">
<textarea id="write_whatever">Write 4 lines to describe yourself.</textarea>
<div id="button_to_add"></div>
</div>
Here's the jsfiddle of what i currently have http://jsfiddle.net/D4zw4/50/
Here's what I am trying to achieve, but instead of key up it's with button click and it should be at the bottom of the canvas http://jsfiddle.net/m1erickson/NuaHp/
Anyone know how I could achieve this or done this before? Thanks in advance :)
Something like this?
$('#button_to_add').on('click', 'button', function () {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var text = $('#write_whatever').val();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#3e3e3e";
ctx.font = "16px Arial";
ctx.fillText(text, 20, canvas.height - 20);
});
http://jsfiddle.net/D4zw4/51/
This question already has answers here:
Canvas image masking / overlapping
(2 answers)
Closed 8 years ago.
I've two images, first is large image which is placed first and then another image is placed on it. Now I want to cut out area of second image over the first.
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var first_img = new Image(),
second_img = new Image();
first_img.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
second_img.src = 'http://tux.crystalxp.net/png/mimipunk-tux-cartoon-1820.png';
var draw = function(){
second_img.onload = function() {
context.drawImage(second_img, 50, 50);
};
first_img.onload = function() {
context.drawImage(first_img, 50, 50);
};
};
draw();
Here is the fiddle.
edit
second image is png and have irregular shape, I want the first image having transparency of area of the first image
The drawImage function provides parameter for that
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#drawImage()