微信JSSDK 实现打开摄像头拍照再将相片保存到服务器

yy13818512006 发布于2019-07-01 13:57 / 1193人阅读

摘要：在微信端打开手机摄像头拍照，将拍照图片保存到服务器上需要使用到微信的接口，主要使用到了拍照或从手机相册中选图接口上传图片接口参考资料一引入微信二通过接口注入权限验证配置三微信端拍照接口默认可以指定是原图还是压缩图，默认二者都有可以指

在微信端打开手机摄像头拍照，将拍照图片保存到服务器上需要使用到微信的JSSDK接口，主要使用到了拍照或从手机相册中选图接口（chooseImage）,上传图片接口（uploadImage）

参考资料：

https://mp.weixin.qq.com/wiki...

https://www.easywechat.com/do...

一：引入微信js

二：通过config接口注入权限验证配置

wx.config(wechat->js->config([
        "chooseImage",
        "uploadImage",
        "downloadImage"
    ])
    ?>
);

三：微信端拍照接口

wx.chooseImage({
    count: 1, // 默认9
    sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
        var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
    }
});

四：将照片上传到微信服务器接口

 wx.uploadImage({
    localId: localIds, // 需要上传的图片的本地ID，由chooseImage接口获得
    isShowProgressTips: 1, // 默认为1，显示进度提示
    success: function (res) {
        var serverId = res.serverId; // 返回图片的服务器端ID
    },
    fail: function() {
       //上传图片到微信服务器失败
        return false;
    }
});

五：将微信服务器的图片下载到本地服务器

前端：

//url表示php接口地址
//serverId表示图片的服务器端ID
$.post(url, {"media_id":serverId}, function(data) {
    if (data.type == "success") {
       //上传成功
        
    } else {
        //上传失败
        
    }
});

php(接口)

public function actionUpload()
{
    Yii::$app->response->format = Response::FORMAT_JSON;
    $request = Yii::$app->request;
    $mediaId = $request->post("media_id");
    if (empty($mediaId)) {
        return [
            "type" => "error",
            "message" => "参数错误！"
        ];
    }
    //临时素材
    $temporary = Yii::$app->wechat->material_temporary;
    //创建服务器目录
    $path = "wechat/" . date("Ymd",time()) . "/";
    $fullPath = Yii::getAlias("@webroot") . "/" . $path;
    if (!is_dir($fullPath)) {
        FileHelper::createDirectory($fullPath);
    }
    //设置图片名称
    $fileName = Yii::$app->getSecurity()->generateRandomString() . "-" . date("His",time());
    //将服务器端的临时素材下载到本地服务器
    $temporary->download($mediaId, $fullPath, $fileName);
    return [
        "type" => "success",
        "url" => $path . $fileName . ".jpg",
    ];
}

前端代码整合





wechat->js->config([
    "chooseImage",
    "uploadImage",
    "downloadImage"
]);
$JS = <<registerJs($JS);
?>

根据如上代码就可以实现微信端打开摄像头拍照再将相片保存到服务器功能

云服务器 GPU云服务器微信jssdk jssdk微信图片微信jssdk不稳定微信jssdk多图上传

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/31701.html

使用 vue2.0 开发微信公众号下前后端分离的SPA站点的填坑之旅

摘要：目前正在写一个微信公众号的小项目，记录一下遇到的问题和解决方法主要是前端。前端提交时使用，在后端再取出对应的微信支付看了下文档，以前是需要用唤起支付，而现在则是把微信内置到了微信的浏览器中。目前正在写一个微信公众号的小项目，记录一下遇到的问题和解决方法（主要是前端）。内容持续更新中~ 主要实现前后端分离前端为 SPA 单页面使用微信的JSSDK微信支付技术方案后端使用 php ...

afishhhhh 2019-06-27 16:36 评论0 收藏0
使用 vue2.0 开发微信公众号下前后端分离的SPA站点的填坑之旅

摘要：目前正在写一个微信公众号的小项目，记录一下遇到的问题和解决方法主要是前端。前端提交时使用，在后端再取出对应的微信支付看了下文档，以前是需要用唤起支付，而现在则是把微信内置到了微信的浏览器中。目前正在写一个微信公众号的小项目，记录一下遇到的问题和解决方法（主要是前端）。内容持续更新中~ 主要实现前后端分离前端为 SPA 单页面使用微信的JSSDK微信支付技术方案后端使用 php ...

Taonce 2019-08-20 16:49 评论0 收藏0
HTML5调用本地摄像头画面，拍照，上传服务器

摘要：图片数据绘制到先构造对象，为，图片之后绘制到的图片文件数据绘制到还是先转换成一个，然后构造对象，为，图片之后绘制到利用上面的函数，由对象得到格式的，再参考图片数据绘制到转换为对象并使用发送转换为对象后，可以使用上传图像文件。实现功能和适用业务采集本地摄像头获取摄像头画面，拍照保存，上传服务器；前端上传图片处理，展示，缩小，裁剪，上传服务器实现步骤调取本地摄像头（get...

ShevaKuilin 2019-08-01 18:18 评论0 收藏0
HTML5调用本地摄像头画面，拍照，上传服务器

摘要：图片数据绘制到先构造对象，为，图片之后绘制到的图片文件数据绘制到还是先转换成一个，然后构造对象，为，图片之后绘制到利用上面的函数，由对象得到格式的，再参考图片数据绘制到转换为对象并使用发送转换为对象后，可以使用上传图像文件。实现功能和适用业务采集本地摄像头获取摄像头画面，拍照保存，上传服务器；前端上传图片处理，展示，缩小，裁剪，上传服务器实现步骤调取本地摄像头（get...

worldligang 2019-08-21 18:25 评论0 收藏0