In my server, shell_exec and exec functions are disable. That is why, I need another solution may be using HTML5 and javascript. Please give me some suggestions. If anyone want to help by giving codes, please provide workable codes.
Thanks in advance
On the client-side you can do it with a HTML5 canvas.
HTML:
<video>
<source src="..." type="video/mp4">
</video>
<canvas>
</canvas>
<img id="screenshot" />
JavaScript:
// draw the image
var context = canvas.getContext('2d');
context.fillRect(0, 0, w, h);
context.drawImage(video, 0, 0, w, h);
// set it as img
var dataURL = canvas.toDataURL();
document.getElementById('screenshot').src = dataURL;
Working example on: HTML5 Canvas Video Screenshot
Save canvas as image
Related
This might be a challenge, but is it possible to make something like this:
https://codepen.io/ollieRogers/pen/lfeLc/
HTML:
#set-height
p#time
video(id="v0", tabindex="0", autobuffer preload)
<source type="video/webm; codecs="vp8, vorbis"" src="https://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm"></source>
<source type="video/ogg; codecs="theora, vorbis"" src="https://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.ogv"></source>
<source type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" src="https://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.mp4"></source>
p Sorry, your browser does not support the <video> element.
JS:
var frameNumber = 0, // start video at frame 0
// lower numbers = faster playback
playbackConst = 500,
// get page height from video duration
setHeight = document.getElementById("set-height"),
// select video element
vid = document.getElementById('v0');
// var vid = $('#v0')[0]; // jquery option
// dynamically set the page height according to video length
vid.addEventListener('loadedmetadata', function() {
setHeight.style.height = Math.floor(vid.duration) * playbackConst + "px";
});
// Use requestAnimationFrame for smooth playback
function scrollPlay(){
var frameNumber = window.pageYOffset/playbackConst;
vid.currentTime = frameNumber;
window.requestAnimationFrame(scrollPlay);
}
window.requestAnimationFrame(scrollPlay);
CSS:
#set-height
display block
#v0
position fixed
top 0
left 0
width 100%
p font-family helvetica
font-size 24px
With a Vimeo video? So that you can control/play the Vimeo video with your scrollbar? Scrolling down is playing video forward, scrolling up is playing video backwards. Does anybody know this?
I’d like to concatenate two or three images (bottom of one to top of next) , and save that image for use on another page (shopping cart page) as a thumbnail. I've been looking into using either the HTML5 cache manifest, or the canvas.toDataURL() method. Which is more suited to this purpose?
I've written code for the toDataURL() method below:
<div style="width: 80px;">
<img id="imageA" src="imageA.jpg" alt="imageA"
width="70" height="400" >
<img id="imageB" src="imageB.jpg" alt="imageB"
width="70">
<canvas id="canvas1"></canvas>
<script type="text/javascript">
var img1 = document.getElementById("imageA");
var img2 = document.getElementById("imageB");
var canvas1 = document.getElementById("canvas1");
var context1 = canvas1.getContext("2d");
canvas1.width = "70";
canvas1.height = "470";
context1.globalAlpha = 1.0;
var combinedImage = ctx.getImageData(0, 0, 70, 470);
var imgURL = canvas.toDataURL("image/png");
</script>
</div>
A cache manifest has no relevance here unless you want to have the images available when off-line, but has no effect when it comes to merging images.
The code shown is not actually drawing the images into the canvas and when you call getImageData() you will only get an empty pixel buffer which is not useful here.
Try something like this instead (JavaScript part only):
var img1 = document.getElementById("imageA");
var img2 = document.getElementById("imageB");
var canvas1 = document.getElementById("canvas1");
var context1 = canvas1.getContext("2d");
canvas1.width = 70; /// use numbers instead of strings here
canvas1.height = img1.height + img2.height;
/// draw the images onto canvas
context1.drawImage(img1, 0, 0);
context1.drawImage(img2, 0, img1.height);
var imgURL = canvas1.toDataURL(); /// defaults to PNG
Now your imgURL will contain the concatenated images as a PNG provided CORS requirements are fulfilled (ie. they are on the same server). You should also see the on-screen canvas with the two images embedded.
Hope this helps.
I am very new to html5.
infact this is my first work.
I am working on a small project. Part of the project is to read an xml file which has shapes in it
<Graphic>
<object_type>LINE</object_type>
<field_1>3.6082475185394287</field_1>
<field_2>541.23712158203125</field_2>
<field_3>28.86598014831543</field_3>
<field_4>474.48452758789062</field_4>
<field_6 />
<field_7 />
<field_8 />
<field_9 />
</Graphic>
<Graphic>
<object_type>LINE</object_type>
<field_1>10.824742317199707</field_1>
<field_2>562.8865966796875</field_2>
<field_3>3.6082475185394287</field_3>
<field_4>541.23712158203125</field_4>
<field_6 />
<field_7 />
<field_8 />
<field_9 />
</Graphic>
after reading the xml file i am iterating through the coordinates. and drawing the object on the html5 canvas.
I have two troubles....
1) the photo is being drawn upside down... so i need to rotate the canvas
Image can be viewed here
2) i need to scale the whole object within the canvas. for now i am dividing every coordinate with 8 to scale it down. how i can scale it according to screen resolution and canvas...
cannot get my head around this
If you are able to get the object width and height, you just need to calculate the scale factor related to the canvas:
var scaleFactorW = canvas.width/obj.width,
scaleFactorH = canvas.height/obj.height;
context.scale(scaleFactorW , scaleFactorH);
startDrawing(obj);
See this DEMO at jsfiddle.net
EDIT:
To maintain the object proportions for different canvas resolutions we need to calculate a scale factor that verifies the max scale based on canvas aspect ratio and the object proportions.
var canvasAspectRatio = canvas.width / canvas.height;
var objAspectRatio = obj.width / obj.height;
var scaleFactor = 1;
if (canvasAspectRatio > objAspectRatio) {
scaleFactor = canvas.height / obj.height;
} else {
scaleFactor = canvas.width / obj.width;
}
context.scale(scaleFactor, scaleFactor);
startDrawing(obj)
Found answer to the first question after doing bit of maths...
my canvas was
<canvas id="myCanvas" width="800" height="500" style="background: #FFFFFF; border: 5px solid black;" role="img">
Your browser does not support the canvas element.
</canvas>
and javascript became...
startDrawing(obj);
// rotate 180 degrees clockwise
context.rotate(180*(Math.PI/180));
// translate context to opposite of your actual canvas
context.translate(-800, -500);
still need the answer for the 2nd question.... the scaling
I'm receiving images via a websocket in base64 format and then drawing the images on a canvas using:
var img=new Image();
img.onload = function() {
cxt.drawImage(img, 0, 0, canvas.width, canvas.height);
};
img.src = "data:image/jpeg;base64,"+imgData;
Is it possible to change this code and somehow only draw the pixels that have changed? And if it is possible, would this even increase the performance? Thanks for the help. :)
What would be more efficient first would be to only send/receive images deltas ( what has changed) between images, then draw that on your canvas.
I want to get a .jpg on a canvas, add a rectangle and a String, which is working very good. After that I want to create a jpg out of the canvas, which works fine but the jpg of the canvas does only show the rectangle and the String. Quick Code-example - i know its a ugly canvas - just testing ;)
<!DOCTYPE html>
<html>
<body>
<canvas id="meinCanvas" width="600" height="600" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
</body>
<script type="text/javascript">
var canv = document.getElementById("meinCanvas");
var context = canv.getContext("2d");
context.fillStyle = "#000000";
context.fillRect(10,10, 200, 100);
var img = new Image();
img.onload = function() {
context.drawImage(img, 300, 300);
};
img.src="one.jpg";
context.font = "bold 12px sans-serif";
context.fillText("test", 500, 500);
imgsr = canv.toDataURL("image/jpeg");
document.write('<img src="' +imgsr +'"/>');
</script>
</html>
}
In the upper part (the canvas) the img is shown properly, but in the .jpeg beneth it the img is not shown. Help would be great. thanks.
Image is not loaded yet when you save it.
Put the toDataUrl in img.onload or link it to an event or timer