专家坐堂-调用相册Foxtable(狐表) - 新一代数据库软件，完美融合Access、Foxpro、Excel、vb.net之优势，人人都能掌握的快速软件开发工具!

以文本方式查看主题

-  Foxtable(狐表)  (http://www.foxtable.com/bbs/index.asp)
--  专家坐堂  (http://www.foxtable.com/bbs/list.asp?boardid=2)
----  调用相册  (http://www.foxtable.com/bbs/dispbbs.asp?boardid=2&id=124921)

--  作者：刘林
--  发布时间：2018/9/16 14:34:00
--  调用相册

Dim e As RequestEventArgs = args(0)
Dim path As String = "foxtableAppTest"
Dim wb As New weui
wb.InsertHTML("<!DOCTYPE html>")
wb.InsertHTML("<html>")
wb.InsertHTML("<head>")
wb.InsertHTML("<meta charset=\'utf-8\'>")
wb.InsertHTML("<meta name=\'viewport\' c />")
wb.InsertHTML("<title></title>")
wb.InsertHTML("<script src=\'../mui/js/mui.min.js\'></script>")
wb.InsertHTML("<link href=\'../mui/css/mui.css\' rel=\'stylesheet\'/>")
wb.InsertHTML("<script Type=\'text/javascript\' charset=\'utf-8\'>mui.init();</script>")
wb.InsertHTML("</head>")
wb.InsertHTML("<body>")
wb.InsertHTML("<header class=\'mui-bar mui-bar-nav mui-bar-nav-bg\'>")
wb.InsertHTML("<a id=\'icon-menu\' class=\'mui-action-back mui-icon mui-icon-left-nav mui-pull-left\'></a>")
\'wb.InsertHTML ("<a class=\'mui-action-back mui-icon mui-icon-home mui-pull-right mui-a-color\'></a>")
wb.InsertHTML("<h1 class=\'mui-title\'>我的照片</h1>")
wb.InsertHTML("</header>")
wb.InsertHTML("<div class=\'mui-content\'>")
wb.InsertHTML("<br>")
wb.InsertHTML("<br>")
wb.AddForm("","form1","xpcj.htm")
If e.PostValues.Count = 0 Then
wb.InsertHTML("form1","<div style=\'height: 150px;\'><span style=\'position:absolute;margin-top:60px;margin-left:20px;\'>我的照片:</span><img alt=\'你还没有照片\' src=\'./xp/" & e.Cookies("username") & ".jpg\' style=\'height: 150px;width:120px;margin-left:120px;max-height:100%\'></div><br>")
If ReadSex(e.Cookies("username"))= "女"
wb.InsertHTML("form1","<div style=\'height: 170px\'><span style=\'position:absolute;margin-top:70px;margin-left:20px;\'>样板照片:</span><div id=\'imgs\'><img src=\'./xp/yb.jpg\' style=\'height:150px;width:120px;margin-top:20px;margin-left:120px;max-height:100%;\'></div></div><br/>")
End If
If ReadSex(e.Cookies("username"))= "男"
wb.InsertHTML("form1","<div style=\'height:150px\'><span style=\'position:absolute;margin-top:70px;margin-left:20px;\'>样板照片:</span><div id=\'imgs\' style=\'widht:120px;height:150px;\'><img src=\'./xp/yb1.jpg\' style=\'height:150px;width:120px;margin-left:120px;max-height:100%;\'></div></div><br/>")
End If
With wb.AddPageFooter("form1","pf1","")
With wb.AddButtonGroup("form1","btg1",False)
Dim bt1= .Add("btn1", "拍照", "button")
bt1.Attribute = "onclick=getImageByCamera(\'imgs\') style=\'border:1px solid black;border-radius:40px;padding:0px;\'"
bt1.kind=1
\'Dim bt2= .Add("btn2", "相册", "button")
\' bt2.Attribute = "style=\'border:1px solid black;border-radius:40px;padding:0px;"
\' bt2.kind=1
Dim bt3=.Add("btn3", "上传")
bt3.kind=1
bt3.attribute="style=\'border:1px solid black;border-radius:40px;padding:0px;\'onclick=javascript:mui.toast(\'正在上传,请等待\');"
End With
End With
wb.InsertHTML("<input Type=\'file\' accept=\'image/*\' style=\'border:1px solid black;border-radius:40px;padding:0px;\' value=\'相册\'> ")
Else
For Each key As String In e.PostValues.Keys
If key.Contains("imgs_") Then
Dim bs As Byte() = Convert.FromBase64String(e.PostValues(key).split(",")(1))
Dim stream As System.IO.Stream = New System.IO.MemoryStream(bs)
Dim bmp As System.Drawing.Bitmap = New System.Drawing.Bitmap(stream)
bmp.Save("c:\\web\\xp\\" & e.Cookies("username") & ".jpg", ImageFormat.Jpeg)
Dim slt As String ="c:\\web\\xp\\" & e.Cookies("username") & ".jpg"
Dim img1 As image = getImage(slt)
Dim bmp1 As bitmap
If img1.width > 800 Then
If 800 * (img1.height / img1.width) > 600 Then
bmp1 = new bitmap(img1, 800*(600/(800*(img1.height/img1.width))), 600)
Else
bmp1 = new bitmap(img1, 600, 600 * (img1.height / img1.width))
End If
End If
bmp1.save(slt, ImageFormat.Jpeg)
bmp1.Dispose
End If
Next
With wb.AddMsgPage("","msgpage","上传成功", "") \'生成成功提示页
Dim bt1=.AddButton("btn1","确定","xpcj.htm")
bt1.kind=1
bt1.Attribute = "style=\'border:1px solid black;border-radius:20px;padding:0px;width:50%\'"

End With
End If
wb.AppendHTML("<script type=\'text/javascript\' src=\'/" & path & "/js/common.js\'></script>", True)
wb.AppendHTML("<script type=\'text/javascript\' src=\'/" & path & "/js/camera.js\'></script>")
e.WriteString(wb.Build)

老师请问两个问题，
1.现在这个页面做了调用摄像头照像，并压缩上传是可以了，现在想加一个打开相册将选定图片显示在imgs中，这个红色部分如何改，或者加一个按钮调用相册并将选定图片显示在imgs中
2.为了将上传成功的图片在本页中显出来, 用了 Dim bt1=.AddButton("btn1","确定","xpcj.htm"),但如果用顶部返回键要按两次才退出本页，有什么办法可以按顶部返回一次退出

--  作者：刘林
--  发布时间：2018/9/16 14:38:00
--

此主题相关图片如下：screenshot_2018-09-16-14-35-14-65.png

现在页面如上

--  作者：有点甜
--  发布时间：2018/9/16 16:36:00
--

看懂 hbuilder 里面的例子吧，里面有调用相册的实例的

帮助文档看懂一下 http://www.html5plus.org/doc/zh_cn/gallery.html

--  作者：刘林
--  发布时间：2018/9/17 8:48:00
--

wb.InsertHTML("form1","<div style=\'height: 170px\'><span style=\'position:absolute;margin-top:70px;margin-left:20px;\'>样板照片:</span><div id=\'imgs\'><img src=\'./xp/yb.jpg\'
style=\'height:150px;width:120px;margin-top:20px;margin-left:120px;max-height:100%;\'></div></div><br/>")
Dim bt2= .Add("btn2", "相册", "button") bt2.Attribute = "onclick=galleryImg() style=\'border:1px solid black;border-radius:40px;padding:0px;‘" bt2.kind=1 现在打包后是可以调出相册了，但请问如何将选定的单个图片文件放到id=\'imgs\'控件中显示出来呢？谢谢

[此贴子已经被作者于2018/9/17 8:48:37编辑过]

--  作者：有点甜
--  发布时间：2018/9/17 9:07:00
--

比较麻烦，看懂例子

https://blog.csdn.net/qq_27626333/article/details/51896616

主要是选择后，得到路径读取图片，压缩图片得到图片数据，然后显示出来

--  作者：有点甜
--  发布时间：2018/9/17 9:20:00
--

以下是引用有点甜在2018/9/17 9:07:00的发言：

比较麻烦，看懂例子

https://blog.csdn.net/qq_27626333/article/details/51896616

主要是选择后，得到路径读取图片，压缩图片得到图片数据，然后显示出来

也就是类似你【拍照】的代码，拍照之后不是保存了一个文件，然后读取文件展示出来么？

选择图片后，也是类似这样做的。

--  作者：刘林
--  发布时间：2018/9/17 10:30:00
--
功力不够，弄不好，请你帮写一个具体操作的嘛，谢谢

--  作者：有点甜
--  发布时间：2018/9/17 10:32:00
--

以下是引用刘林在2018/9/17 10:30:00的发言：
功力不够，弄不好，请你帮写一个具体操作的嘛，谢谢

1、5楼就是例子啊，有实例啊。

2、如果不懂，去看懂你原来的【拍照】的代码怎么写。

--  作者：刘林
--  发布时间：2018/9/17 17:53:00
--

Dim bt2= .Add("btn2", "相册", "button")
bt2.Attribute = "onclick=galleryImg(\'imgs\') style=\'border:1px solid black;border-radius:40px;padding:0px;\'"
bt2.kind=1

js

var count = 1;
function galleryImg(id) {
plus.camera.getCamera().captureImage(function(p) {
var imgs = document.galleryImg(id);
plus.io.resolveLocalFileSystemURL(p, function(entry) {
entry.file(function(file) {

var url = entry.toLocalURL();
var name = "_doc/upload/" + entry.name;
plus.zip.compressImage({
src: url, //src: (String 类型 )压缩转换原始图片的路径
dst: name, //压缩转换目标图片的路径
quality: 100, //quality: (Number 类型 )压缩图片的质量.取值范围为1-100
overwrite: true //overwrite: (Boolean 类型 )覆盖生成新文件
},
function(zip) {
//页面显示图片
showPics(zip.target, name, id);
},
function(error) {
plus.nativeUI.toast("压缩图片失败，请稍候再试");
});

});
});
});
}

function showPics(p, name, id) {
var imgs = document.getElementById(id);
plus.io.resolveLocalFileSystemURL(p, function(entry) {
entry.file(function(file) {
var fileReader = new plus.io.FileReader();
fileReader.readAsDataURL(file);
fileReader.onloadend = function(e) {
var picUrl = e.target.result.toString();

imgs.innerHTML = "<img src=\'" + picUrl + "\' style=\'height:150px;width:120px;margin-top:20px;margin-left:120px;margin-Bottom:20px;max-height:100%;\'/><input type=\'hidden\' name=\'" + id + "_" + count + "\' value=\'" + picUrl + "\'/>"

}
});
});
}

改不对，请老师帮看一下该怎么改

--  作者：有点甜
--  发布时间：2018/9/17 18:00:00
--

拍照的代码改成选择图片的代码就行啊

    plus.gallery.pick( function(path){
    console.log(path);
    }, function ( e ) {
    console.log( "取消选择图片" );
    }, {filter:"image"} );

比如

plus.camera.getCamera().captureImage(function(p) {

改成

plus.gallery.pick( function(p){