互动拍照 — 移动端网页照片展示、提取与微信分享

最新推荐文章于 2021-03-11 23:18:01 发布

阳仔的蘑菇头

最新推荐文章于 2021-03-11 23:18:01 发布

阅读量698

点赞数

分类专栏： Unity3D 文章标签： unity php html

本文链接：https://blog.csdn.net/u010941527/article/details/104747592

版权

Unity3D 专栏收录该内容

11 篇文章 3 订阅

订阅专栏

开发准备

互动拍照应用完成了照片的拍摄，上传之后，一般会需要提供供给用户扫码提取电子档照片的服务。

拍摄与上传可以参考：【互动多媒体】应用形式（一）互动拍照里面的软件开发文章。

我使用的是PHP去写这个网页服务，服务器用的是阿里云，服务器搭建用的是宝塔面板，包含php5.6的环境和ngix。

PHP代码

那么以下php文件需要放在域名所搜索的路径下面：

<?php
require_once "jssdk.php";
$jssdk = new JSSDK("这里写你的微信APPID", "这里写你的APPSECRET");
$signPackage = $jssdk->GetSignPackage();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提取照片</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">
</head>
<body>
    <div style='margin:0 auto;width:0px;height:0px;overflow:hidden;'>
        <img src="./weixin.jpg" width='700'>
    </div>
<?php
    $file = $_GET['filename'];
    $fullpath = './Photos/'.$file;
    if(file_exists($fullpath))
    {
        echo " <div id=\"bg\" style=\"position:absolute;z-index:0;width:100%;top:0px;left:0px;\">
	                <img src='./img/background.jpg' width=\"100%\" height=\"100%\"/>
                </div>
                <div id=\"tex\" style=\"position:absolute;left:0%;top:0%;width:100%;z-index:20\">
	                <img src='$fullpath' width=\"100%\" height=\"100%\"/>
                </div>
                <div id=\"tex\" style=\"position:absolute;left:0px;top:0px;width:100%;height:100%;z-index:30;opacity:0\">
	                <img src='$fullpath' width=\"100%\" height=\"100%\"/>
                </div>
                ";
    }
    else
    {
        echo "<img src='./img/404.jpg'  width='100%'>";
        echo "<p style='text-align:center'><a href='这些替换为当前脚本url及参数?filename=".$file."'><img src='./img/refresh.jpg' width='33%'></a></p>";
    }

?>
</body>
</html>

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
    /*
     * 注意：
     * 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
     * 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
     * 3. 常见问题及完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
     *
     * 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可通过以下渠道反馈：
     * 邮箱地址：weixin-open@qq.com
     * 邮件主题：【微信JS-SDK反馈】具体问题
     * 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
     */
    wx.config({
        debug: false,
        appId: '<?php echo $signPackage["appId"];?>',
        timestamp: <?php echo $signPackage["timestamp"];?>,
        nonceStr: '<?php echo $signPackage["nonceStr"];?>',
        signature: '<?php echo $signPackage["signature"];?>',
        jsApiList: [
            // 所有要调用的 API 都要加到这个列表中
            'checkJsApi',  //判断当前客户端版本是否支持指定JS接口
            'onMenuShareTimeline', //分享到朋友圈
            'onMenuShareAppMessage', //分享给好友
            'onMenuShareQQ',  //分享到QQ
            'onMenuShareWeibo' //分享到微博
        ]
    });
    wx.ready(function () {
        // 在这里调用 API 这个是发送给朋友
        wx.onMenuShareAppMessage({
            title: '我的照片', // 分享标题
            desc: '请看我的照片', // 分享描述
            link: '', // 分享链接
            imgUrl: '这里替换为分享链接的小图标的url路径', // 分享图标 //
            type: '', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });
        //这个是分享到朋友圈，没有desc描述
        wx.onMenuShareTimeline({
            title: '我的照片', // 分享标题
            link: '', // 分享链接
            imgUrl: '这里替换为分享链接的小图标的url路径', // 分享图标
            success: function () {
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });
    });
</script>

几个问题

1 脚本用到了微信分享，关于php微信分享我会另开文章做介绍，在这里主要是会用到jssdk.php，这个官方也能下载到，它会完成token的获取与刷新，主要是产生access_token.php和jsapi_ticket.php两个保存token和ticket的脚本，对于分享，其实只有access_token是有用的。所以需要穿进去你微信公众号的APPID和APPSECRET，这一段完全就是为了最下面script标签里面的内容所需要的变量服务的。

<?php
require_once "jssdk.php";
$jssdk = new JSSDK("这里写你的微信APPID", "这里写你的APPSECRET");
$signPackage = $jssdk->GetSignPackage();
?>

2 脚本中有一个div，是用来锁定分享网页的图标，这一点在早期有用，但是如果你是微信分享，其实微信的API已经可以让你去设置，和这个div就没有关系。

    <div style='margin:0 auto;width:0px;height:0px;overflow:hidden;'>
        <img src="./weixin.jpg" width='700'>
    </div>

3 脚本是通过GET方式获取参数，参数就是filename，它会去当前路径的Photos文件夹下查找图片，如果没有，会进入404页面，404页面就一个刷新按钮，这个按钮对应的链接就是上述php网页的url。

4 如果文件存在，会echo三段内容：

    <div id=\"bg\" style=\"position:absolute;z-index:0;width:100%;top:0px;left:0px;\">
        <img src='./img/background.jpg' width=\"100%\" height=\"100%\"/>
    </div>

第一段就是设置一个背景图，如果有不同的活动直接替换背景图就好了。由于对css不熟悉，所以都写的是段内样式，而且没有做响应式布局，当时也不懂设备尺寸不同应该怎么写不同的样式，不懂rem和bootstrap之类的框架。一般来说，只要背景图本身画面拉升没有与图片关联性太强的内容元素就可以。

    <div id=\"tex\" style=\"position:absolute;left:0%;top:0%;width:100%;z-index:20\">
        <img src='$fullpath' width=\"100%\" height=\"100%\"/>
    /div>

第二段就是照片展示，通过left top width你可以设置照片希望出现的大小和位置

    <div id=\"tex\" style=\"position:absolute;left:0px;top:0px;width:100%;height:100%;z-index:30;opacity:0\">
        <img src='$fullpath' width=\"100%\" height=\"100%\"/>
    </div>

第三段是一个全屏的需要展示照片的元素，这个元素的opacity是0，所以是不可见的，这是为了实现，无论手机页面上在哪里长按都能触发去下载电子档照片的需求。

5 微信这一段代码的主要需要设置的就是，title，desc，和imgurl（分享图标文件的链接），代码有一定的注释，这里主要说一下这个图标图片文件最后是400*400以内。而且由于缓存机制的存在，你修改了之后，不会立即生效，你需要等待，然后清浏览器缓存来查看。

文中所述的实现方法比较快餐，如有不合适的地方，欢迎指正。

阳仔的蘑菇头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
互动拍照 — 移动端网页照片展示、提取与微信分享

开发准备互动拍照应用完成了照片的拍摄，上传之后，一般会需要提供供给用户扫码提取电子档照片的服务。拍摄与上传可以参考：【互动多媒体】应用形式（一）互动拍照里面的软件开发文章。我使用的是PHP去写这个网页服务，服务器用的是阿里云，服务器搭建用的是宝塔面板，包含php5.6的环境和ngix。PHP代码那么以下php文件需要放在域名所搜索的路径下面：<?phprequi...
复制链接

扫一扫