Click here to Skip to main content
15,885,984 members
Articles / Programming Languages / PHP

How to Capture, Edit and Upload Images Through Your Web Browser

1 Aug 2012CPOL3 min read 59.7K   3.3K   18  
In this article, I’ll show you how to capture images from your web browser, edit them, and then upload them to your system.

This article is in the Product Showcase section for our sponsors at CodeProject. These articles are intended to provide you with information on products and services that we consider useful and of value to developers.

body
{
    padding: 0px; margin: 0px; background-color:#3a3a3a; font-family: "verdana", "sans-serif"; font-size: 11px;
}

a img
{
    border:none;
}

a img:hover
{
    border:none;
}

li.fontstyle
{
    font-size: 10px; color: #222222; line-height: 15px;
}

li#tallerli
{
    line-height:47px;
}

input.bigbutton 
{
    width:120px;height:37px; font-family:"Arial Black"; color:#FE8E14; font-size:14pt; font-style:italic; 
}

ul 
{
    list-style:none; padding-left:0px; margin:0px; 
}

ul li
{
    margin-bottom:6px;
}

#browsersupport ul li
{
    float:left;
    padding: 0 10px;
}

#browsersupport img
{
    vertical-align:middle;
}

#browsersupport
{
    margin:0;
    padding:0;
    padding-left:6px;
    height:55px;
    width:260px;
    background:url(../Images/32bit64bit.png) no-repeat 0 40px;
    z-index:1;
    position:absolute;
    top:-80px;
}

div.divinput 
{
    font-size: 11px; color: #222222; padding:10px; line-height: 14px; font-family: "verdana" , "sans-serif"; 
    margin:5px; margin-bottom:10px; background-color:#f0f0f0; text-align:left; 
}

div.menudiv
{
    float:left; 
    height:25px;
    padding-top:10px;
}

div#DWTcontainer
{
    margin: 0 auto;
}
.divcontrol
{
    width:580px; height:600px;
}

.divcontrolthumbnail
{
    width:90px; height:560px;
}
div#dwtcontrolContainer  
{
    margin:0px; margin-left:22px; float:left; padding:0px; padding-top:10px; width:600px; height:800px;
}

div.dwtcontrolThumbnail
{
    padding:5px; padding-top:10px; text-align:center; border-collapse:collapse;border:3px solid #cE5E04; position: absolute; height: 580px; 
	z-index: 1; background-color: #f0f0f0; width:100px;
}

div#ScanWrapper 
{
    margin:0px; float:left; padding:0px; padding-top:5px; width:320px; height:800px;
}

div#Crop {
	padding:5px; padding-top:10px; text-align:center; border-collapse:collapse;border:3px solid #cE5E04; position: absolute; height: 80px; 
	z-index: 1; background-color: #f0f0f0; width:250px
}
div#ImgSizeEditor 
{
    padding:5px; padding-top:10px; text-align:center; border-collapse:collapse;border:3px solid #cE5E04; position: absolute; height: 110px; 
	z-index: 1; background-color: #f0f0f0; width:300px
}

div#MoreEditMethods
{
    padding:5px; padding-top:10px; border-collapse:collapse;border:3px solid #cE5E04; position: absolute; height: auto;
	z-index: 1; background-color: #f0f0f0; width:250px;  text-align:left;
}

div#divCapabilityNegotiation
{
    padding:5px; padding-top:10px; border-collapse:collapse;border:3px solid #cE5E04; position: absolute; height: auto; 
	z-index: 2; background-color: #f0f0f0; width:auto;
}

div#divRotateConfig
{
    padding:5px; padding-top:10px; border-collapse:collapse;border:3px solid #cE5E04; position: absolute; height: 100px; 
	z-index: 2; background-color: #f0f0f0; width:200px;
}

div#divSetImageLayout
{
    padding:5px; padding-top:10px; border-collapse:collapse;border:3px solid #cE5E04; position: absolute; height: 75px; 
	z-index: 2; background-color: #f0f0f0; width:350px;
}

div#tblLoadImage
{
    padding:5px; padding-top:10px; text-align:left; border-collapse:collapse; border:3px solid #cE5E04; position: absolute; height: 170px; 
	z-index: 1; background-color: #fefefe; width:280px
}
a:link {
	color: #222222; line-height: 18px; text-decoration: underline
}
a:visited {
	color: #222222; line-height: 18px; text-decoration: underline
}
a:active {
	color: #666666; line-height: 18px; text-decoration: underline
}
a:hover {
	color: #ff3300; line-height: 18px; text-decoration: underline
}
a.menu:link {
	color: #222222; line-height: 18px; text-decoration: none
}
a.menu:visited {
	color: #222222; line-height: 18px; text-decoration: none
}
a.menu:active {
	color: #222222; line-height: 18px; text-decoration: none
}
a.menu:hover {
	color: #222222; line-height: 18px; text-decoration: none
}
a.white:link {
	color: #d9d9d9; line-height: 18px; text-decoration: underline
}
a.white:visited {
	color: #d9d9d9; line-height: 18px; text-decoration: underline
}
a.white:active {
	color: #d9d9d9; line-height: 18px; text-decoration: underline
}
a.white:hover {
	color: #d9d9d9; line-height: 18px; text-decoration: none
}
a.gray:link {
	color: #222222; line-height: 18px; text-decoration: none
}
a.gray:visited {
	color: #222222; line-height: 18px; text-decoration: none
}
a.gray:active {
	color: #222222; line-height: 18px; text-decoration: none
}
a.gray:hover {
	color: #222222; line-height: 18px; text-decoration: underline
}
a.grayunder:link {
	color: #454545; line-height: 18px; text-decoration: underline
}
a.grayunder:visited {
	color: #454545; line-height: 18px; text-decoration: underline
}
a.grayunder:active {
	color: #454545; line-height: 18px; text-decoration: underline
}
a.grayunder:hover {
	color: #454545; line-height: 18px; text-decoration: none
}
.tableborder {
	border-right: #cdcdcd 1px solid; border-top: #cdcdcd 1px solid; border-left: #cdcdcd 1px solid; border-bottom: #cdcdcd 1px solid
}
.tableborderbottom {
	border-bottom: #cdcdcd 1px solid
}
.fontgray12B {
	font-weight: bold; color: #555555
}
.fontyellow12B {
	font-weight: bold; color: #3a3a3a
}
.titlepagetd {
	vertical-align: middle; height: 30px
}
.subtitletd {
	vertical-align: bottom; height: 30px
}
.titlepage {
	font-weight: bold; font-size: 14px; color: #fe8e14
}
.subtitle {
	font-weight: 600; font-size: 11px; vertical-align: bottom; color: #fe8e14; FONT-FAMILY: Verdana; height: 20px; TEXT-ALIGN: left
}
.menuout {
	padding-bottom: 5px; color: #ffffff; background-color: #fe8e14
}
.menuover {
	color: #ffffff; background-color: #5f6062
}
.menu_top_over {
	padding-left: 30px; font-size: 11px; background: url(../images/menutop1.jpg) no-repeat 50% bottom; width: 151px; color: #353535; padding-top: 9px; FONT-FAMILY: "verdana"; height: 48px
}
.menu_top_out {
	padding-left: 30px; font-size: 11px; background: url(../images/menutop.jpg) no-repeat 50% bottom; width: 151px; color: #353535; padding-top: 9px; FONT-FAMILY: "verdana"; height: 48px
}
.menu_over {
	padding-left: 30px; font-size: 11px; background: url(../images/menuover.jpg) no-repeat 50% bottom; width: 151px; color: #353535; FONT-FAMILY: "verdana"; height: 33px
}
.menu_out {
	padding-left: 30px; font-size: 11px; background: url(../images/menuout.jpg) no-repeat 50% bottom; width: 151px; color: #353535; FONT-FAMILY: "verdana"; height: 33px
}
.menu_blank {
	background: url(../images/menublank.jpg) no-repeat 50% bottom; width: 151px; color: #353535; height: 33px
}
.body_Narrow_width {
	width: 964px;
}
.body_Broad_width {
	width: 984px;
}
input{
    font:normal 11px verdana;
}

input.invalid {
	background-color: #FF9;
	border: 2px red inset;
}

a.menucolor:link
{
    font-weight: bold; font-family: Arial; font-size: 12px; margin-right: 5px;
    color: #FFFFFF;
    text-decoration: none;
}
a.menucolor:visited
{
    font-weight: bold; font-family: Arial; font-size: 12px; margin-right: 5px;
    color: #FFFFFF;
    text-decoration: none;
}
a.menucolor:hover
{
    font-weight: bold; font-family: Arial; font-size: 12px; margin-right: 5px;
    color: #FE8E14;
    text-decoration: none;
}
a.menucolor:active
{
    font-weight: bold; font-family: Arial; font-size: 12px; margin-right: 5px;
    color: #FFFFFF;
    text-decoration: none;
}

a.fontcolor:link
{
    color: #000000;
    text-decoration: none;
    line-height:14px;
}
a.fontcolor:visited
{
    color: #000000;
    text-decoration: none;
    line-height:14px;
}
a.fontcolor:hover
{
    color: #000000;
    text-decoration: none;
    line-height:14px;
}
a.fontcolor:active
{
    color: #000000;
    text-decoration: none;
    line-height:14px;
}

div#tblLoadImage2
{
    padding:5px; padding-top:10px; text-align:left; border-collapse:collapse; border:3px solid #cE5E04; position: absolute; height: 330px; 
	z-index: 1; background-color: #fefefe; width:300px
}

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Canada Canada
Dynamsoft has more than 15 years of experience in TWAIN SDKs, imaging SDKs and version control solutions.

Our products include:

TWAIN SDK
- Dynamic Web TWAIN: a TWAIN scanning SDK optimized for web document management applications.
- Dynamic .NET TWAIN: a .NET TWAIN and Directshow Image Capture SDK for WinForms/WPF applications.

Imaging SDKs
- Barcode Reader for Windows, Linux, macOS, iOS, Android and Raspberry Pi.
- OCR addon for both web and .NET TWAIN SDKs

Version Control
- SourceAnywhere: a SQL server-based source control solution. Both on-premise and hosting options are provided.

http://www.dynamsoft.com/
This is a Organisation

21 members

Comments and Discussions