使用流程
d出actionSheet
/
*点击头像触发*/
document.getElementById('headImage').addEventListener('tap', function() {
if (mui.os.plus) {
var a = [{
title: "拍照"
}, {
title: "从手机相册选择"
}]
plus.nativeUI.actionSheet({
title: "修改用户头像",
cancel: "取消",
buttons: a
}, function(b) { /*actionSheet 按钮点击事件*/
switch (b.index) {
case 0:
break
case 1:
getImage()/*拍照*/
break
case 2:
galleryImg()/*打开相册*/
break
default:
break
}
})
}
}, false)
拍照上传
//拍照
function getImage() {
var c = plus.camera.getCamera()
c.captureImage(function(e) {
plus.io.resolveLocalFileSystemURL(e, function(entry) {
var s = entry.toLocalURL() + "?version=" + new Date().getTime()
uploadHead(s)/*上传图片*/
}, function(e) {
console.log("读取拍照文件错误：" + e.message)
})
}, function(s) {
console.log("error" + s)
}, {
filename: "_doc/head.png"
})
}
从相册选图上传
//本地相册选择
function galleryImg() {
plus.gallery.pick(function(a) {
plus.io.resolveLocalFileSystemURL(a, function(entry) {
plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
root.getFile("head.png", {}, function(file) {
//文件已存在
file.remove(function() {
console.log("file remove success")
entry.copyTo(root, 'head.png', function(e) {
var e = e.fullPath + "?version=" + new Date().getTime()
uploadHead(e)/*上传图片*/
//变更大图预览的src
//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
},
function(e) {
console.log('copy image fail:' + e.message)
})
}, function() {
console.log("delete image fail:" + e.message)
})
}, function() {
//文件不存在
entry.copyTo(root, 'head.png', function(e) {
var path = e.fullPath + "?version=" + new Date().getTime()
uploadHead(path)/*上传图片*/
},
function(e) {
console.log('copy image fail:' + e.message)
})
})
}, function(e) {
console.log("get _www folder fail")
})
}, function(e) {
console.log("读取拍照文件错误：" + e.message)
})
}, function(a) {}, {
filter: "image"
})
}
图片上传和压缩
//上传头像图片
function uploadHead(imgPath) {
console.log("imgPath = " + imgPath)
mainImage.src = imgPath
mainImage.style.width = "60px"
mainImage.style.height = "60px"
var image = new Image()
image.src = imgPath
image.onload = function() {
var imgData = getBase64Image(image)
/*在这里调用上传接口*/// mui.ajax("图片上传接口", {// data: {// // },// dataType: 'json',// type: 'post',// timeout: 10000,// success: function(data) {// console.log('上传成功')// },// error: function(xhr, type, errorThrown) {// mui.toast('网络异常，请稍后再试！')// }// })
}
}
//将图片压缩转成base64
function getBase64Image(img) {
var canvas = document.createElement("canvas")
var width = img.width
var height = img.height
// calculate the width and height, constraining the proportions
if (width >height) {
if (width >100) {
height = Math.round(height *= 100 / width)
width = 100
}
} else {
if (height >100) {
width = Math.round(width *= 100 / height)
height = 100
}
}
canvas.width = width /*设置新的图片的宽度*/
canvas.height = height/*设置新的图片的长度*/
var ctx = canvas.getContext("2d")
ctx.drawImage(img, 0, 0, width, height)/*绘图*/
var dataURL = canvas.toDataURL("image/png", 0.8)
return dataURL.replace("data:image/pngbase64,", "")
}
总结
在使用中，我们可以发现，使用流程是非常清晰的；某种程度来说比原生iOS的使用还要简单一些。
HTML5技术支持WebApp在手机上拍照，显示在页面上并上传到服务器。这是手机微博应用中常见的功能，当然你也可以在其它类型应用中适当使用此技术。1、 视频流
HTML5 的 The Media Capture（媒体捕捉） API 提供了对摄像头的可编程访问，用户可以直接用 getUserMedia（请注意目前仅Chrome和Opera支持）获得摄像头提供的视频流。我们需要做的是添加一个HTML5 的 Video 标签，并将从摄像头获得的视频作为这个标签的输入来源。
<video id=”video” autoplay=”"></video>
<script>
var video_element=document.getElementById(‘video’)
if(navigator.getUserMedia){ // opera应使用opera.getUserMedianow
navigator.getUserMedia(‘video’,success,error)//success是回调函数,当然你也可以直接在此写一个匿名函数
}
function success(stream){
video_element.src=stream
}
</script>
此时，video 标签内将显示动态的摄像视频流。下面需要进行拍照了。
2、 拍照
拍照是采用HTML5的Canvas功能，实时捕获Video标签的内容，因为Video元素可以作为Canvas图像的输入，所以这一点很好实现。主要代码如下：
var canvas=document.createElement(‘canvas’)//动态创建画布对象
var ctx=canvas.getContext(’2d’)
var cw=vw,ch=vh
ctx.fillStyle=”#ffffff”
ctx.fillRect(0,0,cw,ch)
ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh)//将video对象内指定的区域捕捉绘制到画布上指定的区域，可进行不等大不等位的绘制。
document.body.append(canvas)
3、 图片获取
从Canvas获取图片数据的核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像，类似于“data:image/pngbase64,xxxxx”的格式。
var imgData=canvas.toDataURL(“image/png”)
这样，imgData变量就存储了一长串的字符数据内容，表示的就是一个PNG图像的base64编码。因为真正的图像数据是base64编码逗号之后的部分，所以要让实际服务器接收的图像数据应该是这部分，我们可以用两种办法来获取。
第一种：是在前端截取22位以后的字符串作为图像数据，例如：
var data=imgData.substr(22)
如果要在上传前获取图片的大小，可以使用：
var length=atob(data).length//atob 可解码用base-64解码的字串
第二种：是在后端获取传输的数据后用后台语言截取22位以后的字符串（也就是在前台略过上面这步直接上传）。例如PHP里：
$image=base64_decode(str_replace(‘data:image/jpegbase64,’,”,$data)
4、 图片上传
在前端可以使用Ajax将上面获得的图片数据上传到后台脚本。例如使用jQuery时可以用：
$.post(‘upload.php’,{‘data’:data})
在后台我们用PHP脚本接收数据并存储为图片。
function convert_data($data){
$image=base64_decode(str_replace(‘data:image/jpegbase64,’,”,$data)
save_to_file($image)
}
function save_to_file($image){
$fp=fopen($filename,’w')
fwrite($fp,$image)
fclose($fp)
}
以上的解决方案不仅能用于Web App拍照上传，也可以通过Canvas的编辑功能函数提供图片编辑，例如裁剪、上色、涂鸦、圈点等功能，然后把用户编辑完的图片上传保存到服务器上。
在还在不断补充修正的HTML5的驱动下，Web App与Native App之间的距离将越来越小。在可预见的不远的未来，越来越多老的和新的开发项目必将会迁移到WEB应用上来。
相关规范：
The MediaCapture API：http://www.w3.org/TR/media-capture-api/
Canvas：http://dev.w3.org/html5/2dcontext/
您好！很高兴能为您解答，
1、WEBAPP可以通过外链的形式跳转到各类网站上，而微信小程序不允许
2、 WEBAPP和微信小程序都可以通过二维码的形式打开，微信小程序使用微信生成的菊花二维码的话安全性比WEBAPP要更高
3、WEBAPP可以通过分享链接的形式打开，微信小程序不允许，微信小程序只能在微信里打开
4、WEBAPP的分享入口有微信好友，微信群，微信朋友圈，各类社交软件，在分享入口上更为丰富，微信小程序的分享入口有公众号菜单，公众号资料页，微信好友，微信群。
5、WEBAPP不能直接通过微信上的搜索直接找到，不能绑定公众号，微信小程序可以绑定公众号，可以通过微信上的搜索直接找到，可以通过微信的发现入口找到，可以通过附近的小程序找到，可以出现在绑定公众号的资料页，菜单栏，文章内。
6、WEBAPP和微信小程序都支持制作买卖类，WEBAPP的买卖类的金额一般都需要先支付到制作平台上然后才能提现，微信小程序的买卖类的金额可以直接对接到制作者的公账上。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）