I'm attempting to turn the html5 canvas into a slide annotator. My goal is to upload an Image of a slide, allow the user to draw on it, and then save it.
Whats working: I successfully have slides being uploaded as background images and allowing the user to draw on them. I also have the save function working.
Whats wrong: Once the image is save, the drawing the user made stays but the background image doesn't become part of the saved image.
Is there a way to save the canvas to an image and keep the slide background in it? Perhaps its not supposed to be a background image?
Here is some of my code:
The Canvas + button:
<div id="main">
<canvas id="drop1" class="drop" style=" background: url(pdf_images/pdf-save-0.png); background-repeat:no-repeat;">
</canvas>
</div>
<input type="button" id="savepngbtn" value="Save Slide">
Saving the Canvas:
document.getElementById("savepngbtn").onclick = function() {
saveCanvas(oCanvas, "PNG");
}
function saveCanvas(pCanvas, strType) {
var bRes = false;
if (strType == "PNG")
bRes = Canvas2Image.saveAsPNG(oCanvas);
if (!bRes) {
alert("Sorry, this browser is not capable of saving " + strType + " files!");
return false;
}
}
you will need to make the 'background-image' part of the canvas if you would like to save them as a single image.
you can try something like:
var ctx = yourcanvas.getContext('2d');
var img = new Image();
img.src = 'http://yourimage.png';
img.onload = function() {
ctx.drawImage(img, 0, 0)
}
then allow the user to add the annotations and save.
It shouldn't be a background image.
You should use the canvas's provided DrawImage to draw an image. It's pretty simple to do so, just create a new image element (ie. new Image(), set the onload event to call DrawImage with itself as a parameter and then set the .src attribute so that it actually loads).
Obviously this should be the first thing you do as the image is kindof paramount to how the canvas works. You could add an additional hook within onload so as to not allow the user to do any drawing until the image has loaded.
Related
I am looking at the FaceDetection example from ML Kit and I want to copy the face (perhaps using the GraphicOverlay?) of the recognized person. Is there any way to do it? I am not only interested in the face landmarks, but in the actual face itself.
I tried this (I used this method in the GraphicOverlay class and then called it in the FaceDetectionProcessor class first thing on the onSuccess method, but I get back an empty "white" jpeg when I try to save it internally):
public Bitmap getBitmapFromView(GraphicOverlay view) {
//Define a bitmap with the same size as the view
Bitmap returnedBitmap = Bitmap.createBitmap(view.getWidth(), view.getHeight(), Bitmap.Config.ARGB_8888);
//Bind a canvas to it
Canvas canvas = new Canvas(returnedBitmap);
//Get the view's background
Drawable bgDrawable =view.getBackground();
if (bgDrawable!=null) {
//has background drawable, then draw it on the canvas
bgDrawable.draw(canvas);
} else{
//does not have background drawable, then draw white background on the canvas
canvas.drawColor(Color.WHITE);
}
// draw the view on the canvas
view.draw(canvas);
//return the bitmap
return returnedBitmap;
}
recognized actual face
I am building a sortable list that uses the HTML5 drag and drop. It works well, but I have a frustrating problem when it comes to the ghost image. The ghost image always wants to fly back to the location that it came from. The result is that if a list item change positions, the ghost image will fly back to the wrong list item.
Ideally, the ghost image should just not show at all after the onDragEnd event. I've tried setting the image to an empty image on dragEnd with
handleDragEnd(e) {
e.dataTransfer.setDragImage(new Image(0, 0), 0, 0);
...
but I think that you can only use setDragImage in onDragStart.
Is there a way to hide the ghost image onDragEnd, or at the very least get it to fly back to the correct location?
The revert effect is the default behavior on Safari, but you can control this default behavior in the HTML that you control. You only need to add a dragover event on the zone on which you want to prevent this revert effect and call e.preventDefault(). Only limitation: you won't be able to control when user drags the element out of the browser or the frame that you control.
But something like this gets rid of the problem you're describing:
var draggedId;
var img = new Image();
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAO0lEQVR42u3OMQ0AMAgAsGFiCvCvDQeggoSjVdD4lf0OC0FBQUFBQUFBQUFBQUFBQUFBQUFBQUFBwR0DX1VWkeseHpAAAAAASUVORK5CYII=";
document.getElementById('a').ondragstart = dragstart_handler;
document.getElementById('b').ondragstart = dragstart_handler;
document.ondragover = (e) => {
if (draggedId === "a") {
e.preventDefault();
}
}
function dragstart_handler(e) {
draggedId = e.target.id;
e.dataTransfer.setDragImage(img, 0, 0)
}
div {
cursor: pointer;
}
div:hover {
color: blue;
}
<div id=a draggable=true>
This element won't revert on dragend.
</div>
<div id=b draggable=true>
This one will revert.
</div>
Consider if two boxes on each side, the boxes will have 5 entries each, the left boxes we have animal names like dog,cat,tiger,elephant,monkey. The right will have milk,goat,coconut,bones,banana.
Now using the canvas element i need to map these 2 box elements and save the result in Database and i need to retrieve it again the next time as well.
How do i implement this one?
Thanks in advance..
If you want to save your canvas to a database, then you'll need to convert the canvas to a Base64 string and then save this string to the database like this:
<input type="text" name="mybase64" />
<script type="text/javascript">
function saveClicked() {
var dataURL = document.getElementsByTagName("canvas")[0].toDataURL("image/jpeg");
$("input[name=\"mybase64\"]").val(dataURL);
}
</script>
You will then post this mybase64 to whatever web service / code behind page that will received and write this string to your storage medium. To redraw the image to the canvas, you would get your base64 string from your DB and write it to the canvas like this:
function drawCanvas(myBase64String) {
var canvas = document.getElementsByTagName("canvas")[0];
var context = canvas.getContext("2d");
var image = new Image();
image.src = myBase64String;
image.onload = function() {
context.drawImage(image, 0, 0);
}
}
The main answer to your question is, if you want to store your canvas to a database it MUST be done in base64 form.
Does anybody know how to achieve something like that?
http://teamviget.com/#!lift-off
I want to do something similar but I'm something new in html5 and all this stuff
Thanks!
Of course you can do. First of all the you gotta draw the background image. And provide two buttons on either side. Onclick of these buttons you call a function... which inturn calls an setInterval() function that animates(here in your case the image has to fade and a new image has to be formed) . For providing fading effect we have a popular parameter. ctx.globalAlpha(). In each animation step change the value of it. Lemme provide a sample code so that you can understand it properly.
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
var ms = new Image();
ms.src = "images/asdf.jpg"
ctx.drawImage(ms,0,0); // Will draw the initial image (assume)
ctx1 = canvas.getContext("2d");
Now let me define the onclick function.
onclick="caller()";
The caller function should be made to call the animate function
function caller()
{
i=1;
inter=setInterval(animate(),500); // Calls the animate function every 500 msec
}
And the animate function would look as shown below
function animate()
{
i=i-0.1;
ctx1.globalAlpha=i;
if(i=0)
{
clearInterval(inter);
ctx1.drawImage(ms2,0,0); // This will draw the next image defined in ms2.
}
}
So the image will be faded out and a new image appears in 5 secs. Use an array if you have several images and definitely javascipts would help you to implement them all the way you want. Let me know if you need any more clarifications to a SPECIFIC problem that you are facing.
I'm making a web site and suddenly I ran into a problem. It's not huge, but I would like to fix it. On my site I have many images but there is a glitch. The images are "dragable". I mean when you click on a image and than move your mouse the images are being dragged. How can that be fixed?
http://nitidus-consto.kilu.org/
It is always like this.
Don't find anything weird in it.
Anyway this link can help you:
http://www.redips.net/firefox/disable-image-dragging/
you can use javascript to avoid the image dragging:
html file:
<!-- right image (dragging disabled) -->
<img src="image.png" onmousedown="if (event.preventDefault) event.preventDefault()">
javascript:
// register onLoad event with anonymous function
window.onload = function (e) {
var evt = e || window.event,// define event (cross browser)
imgs, // images collection
i; // used in local loop
// if preventDefault exists, then define onmousedown event handlers
if (evt.preventDefault) {
// collect all images on the page
imgs = document.getElementsByTagName('img');
// loop through fetched images
for (i = 0; i < imgs.length; i++) {
// and define onmousedown event handler
imgs[i].onmousedown = disableDragging;
}
}
};
// disable image dragging
function disableDragging(e) {
e.preventDefault();
}