Implementing Photo Capture and Recognition in a WeChat Mini Program with PHP Backend and MySQL Storage

WeChat Mini Programs are popular for scenarios like e‑commerce and social networking; this guide walks through building a photo capture and recognition feature from scratch and sending the result to a PHP backend for MySQL storage.

1. Create the Mini Program Open the WeChat Developer Tools, start a new project, and add basic styling to app.wxss (background, font size, colors, etc.).

<code>page {
  background-color: #f7f5f2;
  font-size: 16px;
  color: #333;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
</code>

2. Design the Interface Add two buttons—one for taking a photo and one for uploading—in index.wxml .

<code>&lt;view class='camera-wrapper'&gt;
  &lt;camera id="camera" mode="takePhoto" device-position="back"&gt;&lt;/camera&gt;
  &lt;view class="btn-capture" catchtap="capturePhoto"&gt;拍照&lt;/view&gt;
&lt;/view&gt;
&lt;view class="btn-upload" catchtap="uploadPhoto"&gt;上传&lt;/view&gt;
</code>

The capture button triggers capturePhoto and the upload button triggers uploadPhoto .

3. Implement Capture and Upload In camera.js define the two functions. capturePhoto creates a camera context, calls takePhoto , and stores the temporary image path. uploadPhoto uses wx.uploadFile to send the image to a PHP script, optionally adding extra form data.

<code>const api = 'http://localhost/api/upload.php';
Page({
  data: {},
  capturePhoto: function () {
    const ctx = wx.createCameraContext();
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({ src: res.tempImagePath });
      }
    });
  },
  uploadPhoto: function () {
    wx.uploadFile({
      url: api,
      filePath: this.data.src,
      name: 'file',
      formData: { user: 'test' },
      success: (resp) => { console.log(resp); }
    });
  }
});
</code>

4. PHP Backend Processing Create upload.php to receive the file, call Baidu AI for image recognition, and insert the image name and recognition result into a MySQL table.

<code>&lt;?php
header('Access-Control-Allow-Origin: *');
header("Content-type:text/html;charset=utf-8");
$file = $_FILES['file']['tmp_name'];
$url = "http://localhost:8081/?url=" . urlencode('data:image/jpeg;base64,' . base64_encode(file_get_contents($file)));
$content = json_decode(file_get_contents($url), true);
mysql_connect("localhost", "root", "123456");
mysql_select_db("test");
mysql_query("INSERT INTO test_tbl(name, value) values ('" . $_FILES['file']['name'] . "', '" . $content['result'] . "')");
mysql_close();
echo "上传成功<br/>";
echo "图片名称：" . $_FILES['file']['name'] . "<br/>";
echo "识别结果：" . $content['result'] . "<br/>";
?&gt;
</code>

The script sends the image to Baidu AI, stores the result, and returns a success message.

5. Summary The article demonstrates a complete end‑to‑end solution for photo capture, image recognition, and data persistence in a WeChat Mini Program, while highlighting the need for security measures when exposing upload endpoints.