pdf to image c# open source : Exporting data from pdf to excel application SDK tool html wpf windows online fulton_fulton36-part547

videoDiv.appendChild(videoElement);
videoDiv.setAttribute("style""display:none;");
var videoType = supportedVideoFormat(videoElement);
if (videoType == "") {
alert("no video support");
return;
}
videoElement.addEventListener("canplaythrough",videoLoaded,false);
videoElement.setAttribute("src""muirbeach." + videoType);
}
function supportedVideoFormat(video) {
var returnExtension = "";
if (video.canPlayType("video/webm"=="probably" ||
video.canPlayType("video/webm"== "maybe") {
returnExtension = "webm";
else if(video.canPlayType("video/mp4") == "probably" ||
video.canPlayType("video/mp4"== "maybe") {
returnExtension = "mp4";
else if(video.canPlayType("video/ogg") =="probably" ||
video.canPlayType("video/ogg"== "maybe") {
returnExtension = "ogg";
}
return returnExtension;
}
function canvasSupport () {
return Modernizr.canvas;
}
function videoLoaded() {
canvasApp();
}
function canvasApp() {
if (!canvasSupport()) {
return;
}
//*** set rotation value
var rotation = 0;
//***
function  drawScreen () {
//Background
Video on the Canvas Examples  |  339
Exporting data from pdf to excel - extract form data from PDF in C#.net, ASP.NET, MVC, Ajax, WPF
Help to Read and Extract Field Data from PDF with a Convenient C# Solution
how to fill pdf form in reader; pdf data extraction open source
Exporting data from pdf to excel - VB.NET PDF Form Data Read library: extract form data from PDF in vb.net, ASP.NET, MVC, Ajax, WPF
Convenient VB.NET Solution to Read and Extract Field Data from PDF
how to save filled out pdf form in reader; how to fill out a pdf form with reader
context.fillStyle = '#ffffaa';
context.fillRect(00theCanvas.width, theCanvas.height);
//Box
context.strokeStyle = '#000000';
context.strokeRect(5 5theCanvas.width-10, theCanvas.height-10);
//video
//*** Start rotation calculation
context.save();
context.setTransform(1,0,0,1,0,0);
var angleInRadians = rotation * Math.PI / 180;
var x = 100;
var y = 100;
var videoWidth=320;
var videoHeight=240;
context.translate(x+.5*videoWidthy+.5*videoHeight);
context.rotate(angleInRadians);
//****
context.drawImage(videoElement ,-.5*videoWidth-.5*videoHeight);
//*** restore screen
context.restore();
rotation++;
//***
}
var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
videoElement.setAttribute("loop""true");     videoElement.play();
function gameLoop() {
window.setTimeout(gameLoop20);
drawScreen();
}
gameLoop();
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="500">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
340  |  Chapter 6: Mixing HTML5 Video and Canvas
How to C#: Basic SDK Concept of XDoc.PDF for .NET
C# project, such as annotation creating, deleting, modifying, importing, exporting, and so a PDF document from file or query data and save the PDF document
how to make pdf editable form reader; flatten pdf form in reader
VB.NET PDF: Basic SDK Concept of XDoc.PDF
project, such as annotation creating, deleting, modifying, importing, exporting, and so a PDF document from file or query data and save the PDF document.
fill in pdf form reader; pdf data extractor
Canvas Video Puzzle
Now we arrive at the most involved example of this section. We are going to create a
puzzle game based on the video we have displayed on the canvas, illustrated in
Figure 6-10. Here are the steps showing how the game will operate:
1. We will load the video onto the canvas but not display it.
2. We will decide how many parts we want to have in our puzzle.
3. We will create a board array that holds all the puzzle pieces.
4. The pieces will be displayed in a 4×4 grid.
5. We will randomize the pieces on the board to mix up the puzzle.
6. We will add an event listener for the mouse button.
7. We will set an interval to call drawScreen().
8. We will wait for the user to click a puzzle piece.
9. While we are waiting, the various parts of the video will play just as though they
were one video.
10. When a user clicks a puzzle piece, it will highlight in yellow.
11. If the user has selected two pieces, we will swap their positions.
12. The user will attempt to put the puzzle back together so that she can see the video
as it was created.
Figure 6-10. Video puzzle
Video on the Canvas Examples  |  341
C# PDF Convert to Word SDK: Convert PDF to Word library in C#.net
PDF Library in C#.NET Class. Best C#.NET PDF to Microsoft Office Word converter SDK for exporting PDF to Word in Visual Studio .NET.
how to save fillable pdf form in reader; extract data from pdf form fields
C# PDF Convert to SVG SDK: Convert PDF to SVG files in C#.net, ASP
without quality loss. C# sample code for quick integration in .NET framework program for exporting PDF from SVG. In some situations
pdf data extraction; extract data from pdf c#
Setting up the game
To start, we are going to set up some variables that will define the game’s playfield. Here
is a rundown of the variables and how they will be used:
rows
The numbers of rows in the grid of puzzle pieces.
cols
The number of columns in the grid of puzzle pieces.
xPad
The space, in pixels, between each column.
yPad
The space, in pixels, between each row.
startXOffset
The number of pixels from the left of the canvas to the location where we will start
drawing the grid of puzzle pieces.
startYOffset
The number of pieces from the top of the canvas to the location where we will start
drawing the grid of puzzle pieces.
partWidth
The width of each puzzle piece.
partHeight
The height of each puzzle piece.
board
A two-dimensional array that holds the puzzle pieces.
The following code includes values for each variable:
var rows = 4;
var cols = 4;
var xPad = 10;
var yPad = 10;
var startXOffset = 10;
var startYOffset = 10;
var partWidth = videoElement.width/cols;
var partHeight = videoElement.height/rows;
var board = new Array();
Next we need to initialize the board array and fill it with some dynamic objects that
represent each piece of the puzzle. We loop through the number of cols in the board
and create rows amount of dynamic objects in each one. The dynamic objects we are
creating have these properties:
342  |  Chapter 6: Mixing HTML5 Video and Canvas
C# PDF Convert to Text SDK: Convert PDF to txt files in C#.net
Free evaluation library for exporting PDF to Text in both C#.NET WinForms application and ASP.NET WebForms. RasterEdge.XDoc.Excel.dll. RasterEdge.XDoc.PDF.dll.
how to make a pdf form fillable in reader; how to extract data from pdf to excel
C# Create PDF from images Library to convert Jpeg, png images to
Create PDF from images in both .NET WinForms and ASP.NET application. .NET converter control for exporting high quality PDF from images in C#.NET.
how to flatten a pdf form in reader; extract pdf data to excel
finalCol
The final column-resting place of the piece when the puzzle is complete. We use
this value to figure out what part of the video to cut out to make this piece.
finalRow
The final row-resting place of the piece when the puzzle is complete. We use this
value to figure out what part of the video to cut out to make this piece.
selected
A Boolean that is initially set to false. We will use this to see whether we should
highlight a piece or switch two pieces when the user clicks a piece.
Notice that we use two nested for:next loops to fill the board array with these objects.
Familiarize yourself with this construct because we use it many times in this game. Two
nested loops used like this are particularly useful for games and apps that require a 2D
grid in order to be displayed and manipulated:
for (var i = 0i < colsi++) {
board[i= new Array();
for (var j =0j < rowsj++) {
board[i][j= { finalCol:i,finalRow:j,selected:false };
}
}
Now that we have the board array initialized, we call randomizeBoard() (we will discuss
this function shortly), which mixes up the puzzle by randomly placing the pieces on the
screen. We finish the setup section of the game by adding an event listener for the
mouseup event (when the user releases the mouse button) and by setting an interval to
call drawScreen() every 20 milliseconds:
board = randomizeBoard(board);
theCanvas.addEventListener("mouseup",eventMouseUpfalse);
function gameLoop() {
window.setTimeout(gameLoop20);
drawScreen()
}
gameLoop();
Randomizing the puzzle pieces
The randomizeBoard() function requires you to pass in the board variable so that we
can operate on it. We’ve set up the function this way so that it will be portable to other
applications.
To randomize the puzzle pieces, we first need to set up an array named newBoard that
will hold the randomized puzzle pieces. newBoard will be what we call a parallel array.
Its purpose is to become the original array—but randomized. We then create a local
Video on the Canvas Examples  |  343
VB.NET PDF - Convert PDF with VB.NET WPF PDF Viewer
Data. Data: Auto Fill-in Field Data. Field: Insert PDF, VB.NET Word, VB.NET Excel, VB.NET part illustrates some conversion tabs and features for PDF exporting.
pdf form field recognition; how to save a filled out pdf form in reader
C# WPF PDF Viewer SDK to convert and export PDF document to other
Data. Data: Auto Fill-in Field Data. Field: Insert PDF, VB.NET Word, VB.NET Excel, VB.NET part illustrates some conversion tabs and features for PDF exporting.
extract data from pdf form to excel; extract table data from pdf
cols variable and initialize it to the length of the board array that was passed in to the
function, and we create a local rows variable, initialized to the length of the first column
board[0]—in the array. This works because all of our rows and columns are the same
length, so the number of rows in the first column is the same as all the others. We now
have the building blocks required to randomize the pieces:
function randomizeBoard(board) {
var newBoard = new Array();
var cols = board.length;
var rows = board[0].length
Next we loop through every column and row, randomly choosing a piece from the board
array and moving it into newBoard:
for (var i = 0i < colsi++) {
We use two nested for:next loops here, once again.
Every time we come to an iteration of the outer nested loop, we create a new array that
we will fill up in the second nested loop. Then we drop into that nested loop. The found
variable will be set to true when we have found a random location to place the piece in
the newBoard array. The rndRow and rndCol variables hold the random values that we
will create to try and find a random location for the puzzle pieces:
newBoard[i= new Array();
for (var j =0j < rowsj++) {
var found = false;
var rndCol = 0;
var rndRow = 0;
Now we need to find a location in newBoard in which to put the puzzle piece from the
board array. We use a while() loop that continues to iterate as long as the found variable
is false. To find a piece to move, we randomly choose a row and column and then use
them to see whether that space (board[rndCol][rndRow]) is set to false. If it is not
false, we have found a piece to move to the newBoard array. We then set found equal
to true so that we can get out of the while() loop and move to the next space in newBoard
that we need to fill:
while (!found) {
var rndCol = Math.floor(Math.random() * cols);
var rndRow = Math.floor(Math.random() * rows);
if (board[rndCol][rndRow!= false) {
found = true;
}
}
344  |  Chapter 6: Mixing HTML5 Video and Canvas
C# PDF Convert to Images SDK: Convert PDF to png, gif images in C#
NET. Support exporting PDF to multiple image forms, including Jpg, Png, Bmp, Gif, Tiff, Bitmap, .NET Graphics, and REImage. Support
how to save a pdf form in reader; extract data from pdf table
VB.NET Create PDF from images Library to convert Jpeg, png images
REImage. .NET converter control for exporting high quality PDF from images. Turn multiple image formats into one or multiple PDF file.
extract pdf data into excel; exporting data from pdf to excel
Finally, we move the piece we found in board to the current location we are filling in
newBoard. Then we set the piece in the board array to false so that when we test for
the next piece, we won’t try to use the same piece we just found. When we are done
filling up newBoard, we return it as the newly randomized array of puzzle pieces:
newBoard[i][j= board[rndCol][rndRow];
board[rndCol][rndRow= false;
}
}     return newBoard;
}
Drawing the screen
The drawScreen() function is the heart of this application. It is called on an interval
and then used to update the video frames and to draw the puzzle pieces on the screen.
A good portion of drawScreen() looks like applications we have built many times al‐
ready in this book. When it begins, we draw the background and a bounding box on
the screen:
function drawScreen () {
//Background
context.fillStyle = '#303030';
context.fillRect(00theCanvas.width, theCanvas.height);
//Box
context.strokeStyle = '#FFFFFF';
context.strokeRect(5 5theCanvas.width10, theCanvas.height10);
However, the primary work of this function is—you guessed it—another set of two
nested for:next loops that draw the puzzle pieces onto the canvas. This set needs to do
three things:
1. Draw a grid of puzzle pieces on the canvas based on their placement in the board
two-dimensional array.
2. Find the correct part of the video to render for each piece based on the finalCol
and finalRow properties we set in the dynamic object for each piece.
3. Draw a yellow box around the piece that has its selected property set to true.
We start our loop by finding the x and y (imageXimageY) locations to “cut” the puzzle
piece from the video object. We do this by taking the finalRow and finalCol properties
of the dynamic piece objects we created and multiplying them by the partWidth and
partHeight, respectively. We then have the origin point (top-left x and y locations) for
the piece of the video to display:
for (var c = 0c < colsc++) {
for (var r = 0r < rowsr++) {
Video on the Canvas Examples  |  345
var tempPiece = board[c][r];
var imageX = tempPiece.finalCol*partWidth;
var imageY = tempPiece.finalRow*partHeight;
Now that we know the origin point of the video we will display for a particular piece of
the puzzle, we need to know where it will be placed on the canvas. While the code below
might look confusing, it’s really just simple arithmetic. To find the x location (placeX)
of a piece, multiply the partWidth times the current iterated column (c), add the current
iterated column multiplied by the xPad (the number of pixels between each piece), and
then add the startXOffset, which is the x location of the upper-left corner of the entire
board of pieces. Finding placeY is very similar, but you use the current row (r), yPad,
and partHeight in the calculation:
var placeX = c*partWidth+c*xPad+startXOffset;
var placeY = r*partHeight+r*yPad+startYOffset;
Now it’s time to draw the piece on the canvas. We need to “cut” out the part of the video
that we will display for each piece of the puzzle. (We won’t actually cut anything.) We
will again use the drawImage() function, as we have many other times already. However,
now we use the version of drawImage() that accepts nine parameters:
videoElement
The image that we are going to display; in this case, it is the video.
imageX
The x location of the upper-right order of the part of the image to display.
imageY
The y location of the upper-right order of the part of the image to display.
partWidth
The width from the x location of the rectangle to display.
partHeight
The height from the y location of the rectangle to display.
placeX
The x location to place the image on the canvas.
placeY
The y location to place the image on the canvas.
partWidth
The width of the image as displayed on the canvas.
partHeight
The height of the image as displayed on the canvas.
346  |  Chapter 6: Mixing HTML5 Video and Canvas
We’ve already discussed how we calculated most of these values, so it is just a matter of
knowing the drawImage() API function and plugging in the variables:
context.drawImage(videoElementimageXimageYpartWidthpartHeight,
placeXplaceYpartWidth, partHeight);
There is one last thing we are going to do in this function. If a puzzle piece is marked
as “selected” (the selected Boolean property is true), we will draw a yellow box around
the piece:
if (tempPiece.selected) {
context.strokeStyle = '#FFFF00';
context.strokeRectplaceX,  placeY, partWidth, partHeight);
}
}
}
}
Detecting mouse interactions and the canvas
Recall that in the canvasApp() function we set an event listener for the mouseup action
with the event handler function set to eventMouseUp. We now need to create that func‐
tion:
theCanvas.addEventListener("mouseup",eventMouseUpfalse);
The first thing we do in the eventMouseUp() function is test to find the x and y locations
of the mouse pointer when the button was pressed. We will use those coordinates to
figure out whether the user clicked on any of the puzzle pieces.
Because some browsers support the event.pageX/event.pageY properties of the event
object and others support the e.clientX/e.clientX properties, we need to support
both. No matter which one is set, we will use those properties to set our mouseX and
mouseY variables to the x and y locations of the mouse pointer:
function eventMouseUp(event) {
var mouseX;
var mouseY;
var pieceX;
var pieceY;
var x;
var y;
if (event.pageX || event.pageY) {
x = event.pageX;
y = event.pageY;
else {
x = e.clientX + document.body.scrollLeft + 
document.documentElement.scrollLeft;
Video on the Canvas Examples  |  347
y = e.clientY + document.body.scrollTop + 
document.documentElement.scrollTop;
}
x -= theCanvas.offsetLeft;
y -= theCanvas.offsetTop;
mouseX=x;
mouseY=y;
Creating hit test point-style collision detection
Now that we know where the user clicked, we need to test whether that location “hits”
any of the puzzle pieces. If so, we set the selected property of that piece to true. What
we are going to perform is a simple hit test point–style hit detection. It will tell us whether
the x,y position (point) of the mouse is inside (hits) any one of the puzzle pieces when
the mouse button is clicked.
First, we create a local variable named selectedList that we will use when we need to
swap the pieces in the board array. Next we will use a set of two nested for:next loops
to traverse through all the pieces in the board array. Inside the for:next loops, the first
thing we do is find the top-left corner x and y points of the current piece pointed to by
board[c][r]. We calculate those values and put them into the placeX and placeY
variables:
var selectedList= new Array();
for (var c = 0c < colsc++) {
for (var r =0r < rowsr++) {
pieceX = c*partWidth+c*xPad+startXOffset;
pieceY = r*partHeight+r*yPad+startYOffset;
Next, we use those calculated values to test for a hit test point collision. We do this with
a semi-complicated if:then statement that tests the following four conditions simul‐
taneously:
mouseY >= pieceY
The mouse pointer lies lower than or equal to the top of the piece.
mouseY <= pieceY+partHeight
The mouse pointer lies above or equal to the bottom of the piece.
mouseX >= pieceX
The mouse pointer lies to the right or equal to the left side of the piece.
mouseX <= pieceX+partWidth
The mouse pointer lies to the left or equal to the right side of the piece.
All of the above conditions must evaluate to true for a hit to be registered on any one
piece on the board:
348  |  Chapter 6: Mixing HTML5 Video and Canvas
Documents you may be interested
Documents you may be interested