查看: 58277|回复: 185
HTML5手机网页上实现二维码扫描的功能？
HTML5手机网页上实现二维码扫描的功能？
我也刷点蚂蚁&
在phonegap中通过二维码实现也是通过扩展phonegap的插件实现。项目结构如下：
y98rcp282yx0y.jpg (58.71 KB, 下载次数: 102)
11:45 上传
实现如下：二维码扫码实现的插件类：
package com.easyway.
import org.json.JSONA
import org.json.JSONE
import android.app.A
import android.app.AlertD
import android.content.ActivityNotFoundE
import android.content.DialogI
import android.content.I
import android.net.U
import com.phonegap.api.PhonegapA
import com.phonegap.api.P
import com.phonegap.api.PluginR
/**
* 扩展二维码扫描的phonegap类实现
* 实现原理如下：
*& & 1.使用phonegap的js类库实现通过插件调用相关的Plugin java类。
*& & 2.plugin调用zxing相关的二维码扫码的方法实现。
*& & 3.如果调用zxing没有安装，到google下载相关的zxing apk安装，并调用对应的intent实现。
*
* This calls out to the ZXing barcode reader and returns the result.
*/
public class BarcodeScanner extends Plugin {
& && &&&public static final int REQUEST_CODE = 0x0ba7c0
& && &&&public static final String defaultInstallTitle = &Install Barcode Scanner?&;
& && &&&public static final String defaultInstallMessage = &This requires the free Barcode Scanner app. Would you like to install it now?&;
& && &&&public static final String defaultYesString = &Yes&;
& && &&&public static final String defaultNoString = &No&;
& && &&&public S
& & /**
& &&&* Constructor.
& &&&*/
& && &&&public BarcodeScanner() {
& && &&&}
& && &&&/**
& && && &*
& && && &* 用于plugin相关的方法，用于暴露相关的方法使用。
& && && &*
& && && &* Executes the request and returns PluginResult.
& && && &*
& && && &* @param action& && && && && &&&The action to execute.
& && && &* @param args& && && && && && && && & JSONArray of arguments for the plugin.
& && && &* @param callbackId& && &&&The callback id used when calling back into JavaScript.
& && && &* @return& && && && && && && && && && && &A PluginResult object with a status and message.
& && && &*/
& && &&&public PluginResult execute(String action, JSONArray args, String callbackId) {
& && && && && & this.callback = callbackId;
& && && && && & try {
& && && && && && && && &if (action.equals(&encode&)) {
& && && && && && && && && && &&&String type =
& && && && && && && && && && &&&if(args.length() & 0) {
& && && && && && && && && && && && && & type = args.getString(0);
& && && && && && && && && && &&&}
& && && && && && && && && && &&&String data =
& && && && && && && && && && &&&if(args.length() & 1) {
& && && && && && && && && && && && && & data = args.getString(1);
& && && && && && && && && && &&&}
& && && && && && && && && && &&&String installTitle = defaultInstallT
& && && && && && && && && && &&&if(args.length() & 2) {
& && && && && && && && && && && && && & installTitle = args.getString(2);
& && && && && && && && && && &&&}
& && && && && && && && && && &&&String installMessage = defaultInstallM
& && && && && && && && && && &&&if(args.length() & 3) {
& && && && && && && && && && && && && & installMessage = args.getString(3);
& && && && && && && && && && &&&}
& && && && && && && && && && &&&String yesString = defaultYesS
& && && && && && && && && && &&&if(args.length() & 4) {
& && && && && && && && && && && && && & yesString = args.getString(4);
& && && && && && && && && && &&&}
& && && && && && && && && && &&&String noString = defaultNoS
& && && && && && && && && && &&&if(args.length() & 5) {
& && && && && && && && && && && && && & noString = args.getString(5);
& && && && && && && && && && &&&}
& && && && && && && && && && &&&// if data.TypeOf() == Bundle, then call
& && && && && && && && && && &&&// encode(type, Bundle)
& && && && && && && && && && &&&// else
& && && && && && && && && && &&&// encode(type, String)
& && && && && && && && && && &&&this.encode(type, data, installTitle, installMessage, yesString, noString);
& && && && && && && && &}
& && && && && && && && &else if (action.equals(&scan&)) {
& && && && && && && && && && &&&String barcodeTypes =
& && && && && && && && && && &&&if(args.length() & 0) {
& && && && && && && && && && && && && & barcodeTypes = args.getString(0);
& && && && && && && && && && &&&}
& && && && && && && && && && &&&String installTitle = defaultInstallT
& && && && && && && && && && &&&if(args.length() & 1) {
& && && && && && && && && && && && && & installTitle = args.getString(1);
& && && && && && && && && && &&&}
& && && && && && && && && && &&&String installMessage = defaultInstallM
& && && && && && && && && && &&&if(args.length() & 2) {
& && && && && && && && && && && && && & installMessage = args.getString(2);
& && && && && && && && && && &&&}
& && && && && && && && && && &&&String yesString = defaultYesS
& && && && && && && && && && &&&if(args.length() & 3) {
& && && && && && && && && && && && && & yesString = args.getString(3);
& && && && && && && && && && &&&}
& && && && && && && && && && &&&String noString = defaultNoS
& && && && && && && && && && &&&if(args.length() & 4) {
& && && && && && && && && && && && && & noString = args.getString(4);
& && && && && && && && && && &&&}
& && && && && && && && && && &&&scan(barcodeTypes, installTitle, installMessage, yesString, noString);
& && && && && && && && &} else {
& && && && && && &&&return new PluginResult(PluginResult.Status.INVALID_ACTION);
& && && && && && && && &}
& && && && && && && && &PluginResult r = new PluginResult(PluginResult.Status.NO_RESULT);
& && && && && && && && &r.setKeepCallback(true);
& && && && && && && && &
& && && && && & } catch (JSONException e) {
& && && && && && && && &e.printStackTrace();
& && && && && && && && &return new PluginResult(PluginResult.Status.JSON_EXCEPTION);
& && && && && & }
& && &&&}
& && &&&/**
& && && &* 扫描二维码的方法
& && && &*& & 备注：在扫描二维码的类型最好不好设置，在前期的zxing可能需要，在后期的版本中不需要，
& && && &*& & zxing会自动检索二维码的类型，并识别相关二维码。
& && && &*& &
& && && &* Initiates a barcode scan. If the ZXing scanner isn't installed, the user
& && && &* will be prompted to install it.
& && && &* @param types& && &&&The barcode types to accept
& && && &* @param installTitle The title for the dialog box that prompts the user to install the scanner
& && && &* @param installMessage The message prompting the user to install the barcode scanner
& && && &* @param yesString The string &Yes& or localised equivalent
& && && &* @param noString The string &No& or localised version
& && && &*/
& && &&&public void scan(String barcodeFormats, String installTitle, String installMessage, String yesString, String noString ) {
& && && && &Intent intentScan = new Intent(&com.google.zxing.client.android.SCAN&);
& && && &&&// intentScan.addCategory(Intent.CATEGORY_DEFAULT);
& && && && &//设置扫描特定类型的二维码
& && && && &//if (barcodeFormats != null) {
& && && && &//& && &Tell the scanner what types we're after
& && && && &//& && && && && && && && &intentScan.putExtra(&SCAN_FORMATS&, barcodeFormats);
& && && && &// }
& && && && &try {
& && && && && && && && &this.ctx.startActivityForResult((Plugin) this, intentScan, REQUEST_CODE);
& && && && &} catch (ActivityNotFoundException e) {
& && && && && && &&&showDownloadDialog(installTitle, installMessage, yesString, noString);
& && && && &}
& && &&&}
& & /**
& &&&* 用于获取二维码扫描之后获取相关的二维码相关的信息
& &&&* Called when the barcode scanner exits
& &&&*
& &&&* @param requestCode& && && && && & The request code originally supplied to startActivityForResult(),
& &&&*& && && && && && && && && && && && && && && && && && && &allowing you to identify who this result came from.
& &&&* @param resultCode& && && && && & The integer result code returned by the child activity through its setResult().
& &&&* @param intent& && && && && && && && &An Intent, which can return result data to the caller (various data can be attached to Intent &extras&).
& &&&*/
& && &&&public void onActivityResult(int requestCode, int resultCode, Intent intent) {
& && && && && & if (requestCode == REQUEST_CODE) {
& && && && && && && && &if (resultCode == Activity.RESULT_OK) {
& && && && && && && && && && &&&String contents = intent.getStringExtra(&SCAN_RESULT&);
& && && && && && && && && && &&&String format = intent.getStringExtra(&SCAN_RESULT_FORMAT&);
& && && && && && && && && && &&&this.success(new PluginResult(PluginResult.Status.OK, & 条形码为:&+contents+& 条码类型为: &+format), this.callback);
& && && && && && && && &} else {
& && && && && && && && && && &&&this.error(new PluginResult(PluginResult.Status.ERROR), this.callback);
& && && && && && && && &}
& && && && && & }
& && &&&}
& && &&&/**
& && && &* 创建相关的对话框，在通过没有安装相关的zxing开源组件时候，调用远程的intent或者下载相关执行类实现相关的
& && && &* 功能
& && && &* @param title
& && && &* @param message
& && && &* @param yesString
& && && &* @param noString
& && && &*/
& && &&&private void showDownloadDialog(final String title, final String message, final String yesString, final String noString) {
& && && && && & final PhonegapActivity context = this.
& && && && && & Runnable runnable = new Runnable() {
& && && && && && && && &public void run() {
& && && && && && && && && && &&&AlertDialog.Builder dialog = new AlertDialog.Builder(context);
& && && && && && && && && && &&&dialog.setTitle(title);
& && && && && && && && && && &&&dialog.setMessage(message);
& && && && && && && && && && &&&dialog.setPositiveButton(yesString, new DialogInterface.OnClickListener() {
& && && && && && && && && && && && && & public void onClick(DialogInterface dlg, int i) {
& && && && && && && && && && && && && && && && &dlg.dismiss();
& && && && && && && && && && && && && && && && &Intent intent = new Intent(Intent.ACTION_VIEW,
& && && && && && && && && && && && && && && && && && && && && && && && && && && && && && && && && &Uri.parse(&market://search?q=pname:com.google.zxing.client.android&)
& && && && && && && && && && && && && && && && && && && && && && && && && && && && && && && && && &);
& && && && && && && && && && && && && && && && &try {
& && && && && && && && && && && && && && && && && && &&&context.startActivity(intent);
& && && && && && && && && && && && && && && && &} catch (ActivityNotFoundException e) {
& && && && && && && && && && && && && && && && && && &&&//& && &&&We don't have the market app installed, so download it directly.
& && && && && && && && && && && && && && && && && && &&&Intent in = new Intent(Intent.ACTION_VIEW);
& && && && && && && && && && && && && && && && && && &&&in.setData(Uri.parse(&/files/BarcodeScanner4.1.apk&));
& && && && && && && && && && && && && && && && && && &&&context.startActivity(in);
& && && && && && && && && && && && && && && && &}
& && && && && && && && && && && && && & }
& && && && && && && && && && &&&});
& && && && && && && && && && &&&dialog.setNegativeButton(noString, new DialogInterface.OnClickListener() {
& && && && && && && && && && && && && & public void onClick(DialogInterface dlg, int i) {
& && && && && && && && && && && && && && && && &dlg.dismiss();
& && && && && && && && && && && && && & }
& && && && && && && && && && &&&});
& && && && && && && && && && &&&dialog.create();
& && && && && && && && && && &&&dialog.show();
& && && && && && && && &}
& && && && && & };
& && && && && & context.runOnUiThread(runnable);
& && &&&}
& && &&&/**
& && && &*
& && && &*
& && && &* Initiates a barcode encode. If the ZXing scanner isn't installed, the user
& && && &* will be prompted to install it.
& && && &* @param type&&The barcode type to encode
& && && &* @param data&&The data to encode in the bar code
& && && &* @param installTitle The title for the dialog box that prompts the user to install the scanner
& && && &* @param installMessage The message prompting the user to install the barcode scanner
& && && &* @param yesString The string &Yes& or localised equivalent
& && && &* @param noString The string &No& or localised version
& && && &*/
& && &&&public void encode(String type, String data, String installTitle, String installMessage, String yesString, String noString) {
& && && && && & Intent intentEncode = new Intent(&com.google.zxing.client.android.ENCODE&);
& && && && && & intentEncode.putExtra(&ENCODE_TYPE&, type);
& && && && && & intentEncode.putExtra(&ENCODE_DATA&, data);
& && && && && & try {
& && && && && && && && &this.ctx.startActivity(intentEncode);
& && && && && & } catch (ActivityNotFoundException e) {
& && && && && && && && &showDownloadDialog(installTitle, installMessage, yesString, noString);
& && && && && & }
& && &&&}
}复制代码
package com.easyway.
import com.phonegap.*;
import android.os.B
/**
* phonegap实现相关的二维码的扫码功能
*
* @Description: 实现phonegap实现相关的二维码的扫码功能
* @Copyright:Copyright (c) 2011
* @Date:
* @author&&longgangbai
* @version 1.0
*/
public class PhonegapBarcodeActivity extends DroidGap {
& & /** Called when the activity is first created. */
& & @Override
& & public void onCreate(Bundle savedInstanceState) {
& && &&&super.onCreate(savedInstanceState);
& && &&&super.loadUrl(&file:///android_asset/www/index.html&);
& & }
}复制代码
二维码扫码实现的js：
/**
* Phonegap Barcode Scanner plugin
* Copyright (c) Matt Kane 2010
*
*/
var BarcodeScanner = function() {
BarcodeScanner.Type = {
& && &&&QR_CODE: &QR_CODE&,
& && &&&DATA_MATRIX: &DATA_MATRIX&,
& && &&&UPC_E: &UPC_E&,
& && &&&UPC_A: &UPC_A&,
& && &&&EAN_8: &EAN_8&,
& && &&&EAN_13: &EAN_13&,
& && &&&CODE_128: &CODE_128&,
& && &&&CODE_39: &CODE_39&,
& && &&&CODE_93: &CODE_93&,
& && &&&CODABAR: &CODABAR&,
& && &&&ITF: &ITF&,
& && &&&RSS14: &RSS14&,
& && &&&PDF417: &PDF417&,
& && &&&RSS_EXPANDED: &RSS_EXPANDED&,
& && &&&PRODUCT_CODE_TYPES: &UPC_A,UPC_E,EAN_8,EAN_13&,
& && &&&ONE_D_CODE_TYPES: &UPC_A,UPC_E,EAN_8,EAN_13,CODE_39,CODE_93,CODE_128&,
& && &&&QR_CODE_TYPES: &QR_CODE&,
& && &&&ALL_CODE_TYPES: null
}
BarcodeScanner.Encode = {
& && && && && & TEXT_TYPE: &TEXT_TYPE&,
& && && && && & EMAIL_TYPE: &EMAIL_TYPE&,
& && && && && & PHONE_TYPE: &PHONE_TYPE&,
& && && && && & SMS_TYPE: &SMS_TYPE&,
& && && && && & //&&CONTACT_TYPE: &CONTACT_TYPE&,&&// TODO:&&not implemented, requires passing a Bundle class from Javascriopt to Java
& && && && && & //&&LOCATION_TYPE: &LOCATION_TYPE& // TODO:&&not implemented, requires passing a Bundle class from Javascriopt to Java
& && &&&}
//二维码扫描的方法
BarcodeScanner.prototype.scan = function(types, success, fail, options) {
& && &&&
& && &&&/* These are the strings used in the dialog that appears if ZXing isn't installed */
& && &&&var installTitle = &Install Barcode Scanner?&;
& && &&&var installMessage = &This requires the free Barcode Scanner app. Would you like to install it now?&;
& && &&&var yesString = &Yes&;
& && &&&var noString = &No&;
& && &&&if (typeof options != 'undefined') {
& && && && && & if(typeof options.installTitle != 'undefined') {
& && && && && && && && &installTitle = options.installT
& && && && && & }
& && && && && & if(typeof options.installMessage != 'undefined') {
& && && && && && && && &installMessage = options.installM
& && && && && & }
& && && && && & if(typeof options.yesString != 'undefined') {
& && && && && && && && &yesString = options.yesS
& && && && && & }
& && && && && & if(typeof options.noString != 'undefined') {
& && && && && && && && &noString = options.noS
& && && && && & }
& && &&&}
& && &&&
& && &&&
& & return PhoneGap.exec(function(args) {
& && &&&success(args);
& & }, function(args) {
& && &&&fail(args);
& & }, 'BarcodeScanner', 'scan', [types, installTitle, installMessage, yesString, noString]);
};
BarcodeScanner.prototype.encode = function(type, data, success, fail, options) {
& && &&&/* These are the strings used in the dialog that appears if ZXing isn't installed */
& && &&&var installTitle = &Install Barcode Scanner?&;
& && &&&var installMessage = &This requires the free Barcode Scanner app. Would you like to install it now?&;
& && &&&var yesString = &Yes&;
& && &&&var noString = &No&;
& && &&&if (typeof options != 'undefined') {
& && && && && & if(typeof options.installTitle != 'undefined') {
& && && && && && && && &installTitle = options.installT
& && && && && & }
& && && && && & if(typeof options.installMessage != 'undefined') {
& && && && && && && && &installMessage = options.installM
& && && && && & }
& && && && && & if(typeof options.yesString != 'undefined') {
& && && && && && && && &yesString = options.yesS
& && && && && & }
& && && && && & if(typeof options.noString != 'undefined') {
& && && && && && && && &noString = options.noS
& && && && && & }
& && &&&}
& & return PhoneGap.exec(function(args) {
& && &&&success(args);
& & }, function(args) {
& && &&&fail(args);
& & }, 'BarcodeScanner', 'encode', [type, data, installTitle, installMessage, yesString, noString]);
};
PhoneGap.addConstructor(function() {
&&//如果不支持window.plugins,则创建并设置& &
& & if(!window.plugins){& &
& && &&&window.plugins={};& &
& & }& &
& & window.plugins.barcodeScanner=new BarcodeScanner();
& && &&&//PhoneGap.addPlugin('barcodeScanner', new BarcodeScanner());
& && &&&PluginManager.addService(&BarcodeScanner&,&com.easyway.barcode.BarcodeScanner&);
});复制代码
二维码调用的页面如下：
&!DOCTYPE HTML&
&html&
&&&head&
& & &meta name=&viewport& content=&width=320; user-scalable=no& /&
& & &meta http-equiv=&Content-type& content=&text/ charset=utf-8&&
& & &title&二维码扫描&/title&
& &&&&!-- 加载phonegap --&&&
& & &script type=&text/javascript& charset=&utf-8& src=&phonegap-1.4.1.js&&&/script&&&
& & &!-- 加载jquery --&&&
& & &script type=&text/javascript& charset=&utf-8& src=&jquery.mobile/jquery-1.6.4.min&&&/script&&&
& & &!-- 加载jquerymobile --&&&
& & &script type=&text/javascript& charset=&utf-8& src=&jquery.mobile/jquery.mobile-1.0.1.js&&&/script&&&
& & &!-- 加载自定义插件 --&&&
& & &script type=&text/javascript& charset=&utf-8& src=&barcodescanner.js&&&/script&
& & &script type=&text/javascript& charset=&utf-8&&&&
& && && &
& &&&$(function(){& &
& && &&&$(&#btnbarcode&).click(function(){& &
& && && && && && &&&window.plugins.barcodeScanner.scan(
& && && && && && && && && & BarcodeScanner.Type.QR_CODE,
& && && && && && && && && & function(result) {
& && && && && && && && && && &&&$(&#barcodediv&).html(&&+result);
& && && && && && && && && & },
& && && && && && && && && & function(error) {
& && && && && && && && && && &&&$(&#barcodediv&).html(&扫描失败：&+result);
& && && && && && && && && && && && &},
& && && && && && && && && && && && &{
& && && && && && && && && && && && && & installTitle: &安装提示&,
& && && && && && && && && && && && && & installMessage:&是否安装开源免费的ZXing二维码扫描器&,
& && && && && && && && && && && && && & yesString:&确定&,
& && && && && && && && && && && && && & noString:&取消&
& && && && && && && && && && && && &}
& && && && && & );
& && &&&});& &
& &&&});& &
&/script&& &&&
&&
&&&/head&
&&&body &
& & &h2&二维码扫描&/h2&
& && &&&&p&二维码信息：&/p&
& && &&&&div id=&barcodediv&&&/div&
& && &&&&input type=&button& id=&btnbarcode& value=&扫描& /&
&&&/body&
&/html&复制代码备注附件中phonegap的apk,下载之后需要重新命名为PhonegapBarcode.apk即可使用。
11:53 上传
点击文件名下载附件
271.77 KB, 下载次数: 36
售价: 5 蚂蚁币 &[]
11:54 上传
点击文件名下载附件
861.17 KB, 下载次数: 86
售价: 5 蚂蚁币 &[]
我也刷点蚂蚁&
很有用的东西&
为什么不把zxing直接引到源文件中呢，我的.
给你个思路 用jquery.qrcode分析二维码 用 WEBRTC的navigator.getUserMedia方法
我也刷点蚂蚁&
&!DOCTYPE html&
&html&
& & & & &head&
& & & & &meta charset=&utf-8&&
& & & & &title&Barcode Example&/title&
& & & & &script type=&text/javascript& &
// 扩展API加载完毕后调用onPlusReady回调函数
document.addEventListener( &plusready&, onPlusReady, false );
// 扩展API加载完毕，现在可以正常调用扩展API
function onPlusReady() {
&&var e = document.getElementById(&scan&);
&&e.removeAttribute( &disabled& );
}
// 从图片中扫描
function scanImg() {
& & & & plus.barcode.scan( '_www/barcode.png', function (type,result) {
& & & & & & & & & & & & alert( &Scan success:(&+type+&)&+result );
& & & & & & & & }, function (error) {
& & & & & & & & & & & & alert( error.message );
& & & & & & & & } );
}
& & & & &/script&
& & & & &style type=&text/css&&
*{
& & & & -webkit-user-select:
}
html,body{
& & & & margin: 0
& & & & padding: 0
& & & & height: 100%;
}
& & & & &/style&
& & & & &/head&
& & & & &body &
& & & & & & & & &input id=&scan& type='button' disabled=&disabled& onclick='scanImg()' value='扫描图片'&&/input&
& & & & &/body&
&/html&复制代码
本人并没有用过，只不过是网上看到的！
我也刷点蚂蚁&
html5调用手机摄像头，实现拍照上传功能
今天做手机网站，想实现手机扫描二维码功能。首先实现在浏览器中调用手机摄像头，实现拍照功能并且把拍下的照片显示在页面并上传到服务器上，然后再在服务器端进行分析。
首先实现在浏览器中调用摄像头，当然用现在火的不行的html5，html5中的&video&标签，并将从摄像头获得视频作为这个标签的输入来源。实现拍照功能的html5代码：
&article&
&style scoped&
&&video { transform: scaleX(-1); }
&&p { text-align: }
&/style&
&h1&Snapshot Kiosk&/h1&
&section id=&splash&&
&&&p id=&errorMessage&&Loading...&/p&
&/section&
&section id=&app& hidden&
&&&p&&video id=&monitor& autoplay&&/video& &canvas id=&photo&&&/canvas&
&&&p&&input type=button value=&📷& onclick=&snapshot()&&
&/section&
&script&
&&navigator.getUserMedia({video:true}, gotStream, noStream);
&&var video = document.getElementById('monitor');
&&var canvas = document.getElementById('photo');
&&function gotStream(stream) {
& & video.src = URL.createObjectURL(stream);
& & video.onerror = function () {
& && &stream.stop();
& & };
& & stream.onended = noS
& & video.onloadedmetadata = function () {
& && &canvas.width = video.videoW
& && &canvas.height = video.videoH
& && &document.getElementById('splash').hidden =
& && &document.getElementById('app').hidden =
& & };
&&}
&&function noStream() {
& & document.getElementById('errorMessage').textContent = 'No camera available.';
&&}
&&function snapshot() {
& & canvas.getContext('2d').drawImage(video, 0, 0);
&&}
&/script&
&/article&复制代码
经本人测试在android手机的opera浏览器浏览器下可以正常实现手机拍照功能。android手机下的google chrome浏览器还不行，自带的浏览器也测试没有通过。iphone手机的safari浏览器也是不支持的。
想了解更多关于html5调用手机摄像头的内容可以点击http://dev.w3.org/2011/webrtc/editor/getusermedia.html。
图片的获取：
下面我们要从Canvas获取图片数据，其核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像，类似于“data:image/base64,xxxxx”的格式。
var imgData =canvas.toDataURL(&image/png&);
因为真正图像数据是base64编码逗号之后的部分，所以我们实际服务器处理的图像数据应该是这部分，我们可以用两种办法来获取。
第一种：是在前端截取22位以后的字符串作为图像数据，例如：
var data = imgData.substr(22);
如果要在上传前获取图片的大小，可以使用：
var length = atob(data).// atob decodes a string of data which has been encoded using base-64 encoding
第二种：是在后端获取传输的数据后用后台语言截取22位以后的字符串。例如PHP里
$image = base64_decode( str_replace('data:image/base64,', '',$data);
图片上传：
在前端可以使用Ajax将上面获得的图片数据上传到后台脚本。例如使用jQuery时：
$.post('upload.php',{ 'data' : data } );
在后台我们用PHP脚本接收数据并存储为图片。
php代码
function convert_data($data){
$image = base64_decode( str_replace('data:image/base64,', '',$data);
save_to_file($image);
}
function save_to_file($image){
$fp = fopen($filename, 'w');
fwrite($fp, $image);& && &fclose($fp);
}复制代码
请注意，以上的解决方案不仅能用于Web App拍照上传，并且你可以实现把Canvas的输出转换为图片上传的功能。这样你可以使用Canvas为用户提供图片编辑，例如裁剪、上色、涂鸦的画板功能，然后把用户编辑完的图片保存到服务器上。
此文章也可以算是原创文章，因为部分内容也参考了他人博客，具体地址请看http://www.glve.net/html5-calls-cell-phone-cameras-to-achieve-photo-upload-feature.html
我的blog地址http://www.glve.net
试试管用不
我也刷点蚂蚁&
哪里能多赚金钱
每周点评40次，一次可以得一个蚂蚁币&
下载盖特试试
再刷点金钱
再刷点金钱
网站推荐 /1
从即日起关注蚂蚁社区官方微信，奖励30蚂蚁币，每月我们会随机抽取3名关注者，奖励月度VIP会员（1000蚂蚁币）。
邮箱: QQ: 木子牛HTML5工作室 版权所有
Powered by X3.2(