圖形辨識~尋寶遊戲

更新於 發佈於 閱讀時間約 23 分鐘
系統架構
構想上,前端簡單的使用Google Map 做定位,並寫入SQL做第一段比對經緯度。接著前端有一個php上傳圖片的功能(沒有 https 所以就不做網頁開相機的方式)。經過上傳至伺服器後,python 圖形辨識,比對上傳的圖片,若比對成功或相似度差異不大,則判定正確,寫入SQL,端頁面顯示奪寶成功。Firebase部分則為即時聊天(有空在搞...)

前端頁面 index.php

<!DOCTYPE html>
<html>
  <head>
    <title>尋寶遊戲</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
#bg{
    position:absolute;
    left:0px;
    top:0px;
    z-index:9;
	 margin:0px auto;
	 width:200px;
	 height:140px;
	 display: flex;
    /* 水平置中 */
    justify-content: center;    
    /* 垂直置中 */
    align-items: center; 
	 background:rgba(0,255,204,0.2);
	 border-style:dotted;
	 border-color:#FF0000;
	 padding:1px;
}
#cc{
    z-index:99;
}
    </style>
  </head>
  <body>
  <?
  if (isset($_GET["a"]) && $_GET["a"]=="ok")
  {
  ?>
    <div id="bg">
		<div id="cc"><b>找到了~</b></div>
	 </div>
	<?
  }
  
  if (isset($_GET["a"]) && $_GET["a"]=="ng")
  {
	?>
    <div id="bg">
		<div id="cc"><b>沒找到唷~</b></div>
	 </div>
	<?
  }
	?>
    <div id="map"></div>
    <script>
      // Note: This example requires that you consent to location sharing when
      // prompted by your browser. If you see the error "The Geolocation service
      // failed.", it means you probably did not give permission for the browser to
      // locate you.
      var map, infoWindow;
	  var la,lo;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 18
        });
		
		/*
		var contentString = 'lat: '+la+' , '+'lon: '+lo;
        //infoWindow = new google.maps.InfoWindow;
		
		  infowindow = new google.maps.InfoWindow({
          content: contentString
        });
		*/
		
        // Try HTML5 geolocation.
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };
			
			la=position.coords.latitude;
			lo=position.coords.longitude;
			contentString = '<div>尋寶Game</div>'+
			'<form method="post" enctype="multipart/form-data" action="upload.php">'+
			'<input name="file" type="file"><input name="upload" type="submit" value="上傳">'+
			'</form>'+
			'lat: '+la+' , '+'lon: '+lo;
			
			infowindow = new google.maps.InfoWindow({
			 content: contentString
			});
			
			var marker = new google.maps.Marker({
                    position: pos,
                    //icon:'marker.png',
                    map: map
                });
				marker.addListener('click', function() {
				infowindow.open(map, marker);
				});
				map.setZoom(17);
                map.setCenter(pos);
				
            //infoWindow.setPosition(pos);
            //infoWindow.setContent('Location found.');
            //infoWindow.open(map);
            //map.setCenter(pos);
          }, function() {
            handleLocationError(true, infoWindow, map.getCenter());
          });
        } else {
          // Browser doesn't support Geolocation
          handleLocationError(false, infoWindow, map.getCenter());
        }
      }
      function handleLocationError(browserHasGeolocation, infoWindow, pos) {
        infoWindow.setPosition(pos);
        infoWindow.setContent(browserHasGeolocation ?
                              'Error: The Geolocation service failed.' :
                              'Error: Your browser doesn\'t support geolocation.');
        infoWindow.open(map);
      }
    </script>
     <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>

圖檔上傳 upload.php

<?php
print_r($_POST);
print_r($_FILES);//或使用var_dump
//試著理解以下內容與差異
echo $_FILES["file"]["name"]."<br/>";	//原檔案名稱
echo $_FILES["file"]["tmp_name"]."<br/>";//暫存路徑
echo $_FILES["file"]["size"]."<br/>";//檔案byte, max 2mb,除非要改php上傳限制
echo $_FILES["file"]["type"]."<br/>";//檔案類型
//將檔案儲存到伺服器位置的方式為
//copy($_FILES["file"]["tmp_name"],"./".$_FILES["file"]["name"]); // copy(from,to)
//上傳檔案時也可以改名
//$newname=date("YmdHis")."_".$_FILES["file"]["name"];
//copy($_FILES["file"]["tmp_name"],"./".$newname); // copy(from,to)
copy($_FILES["file"]["tmp_name"],"1.jpg"); // copy(from,to)
//unlink("upload/".$newname);  //刪除網路空間內的檔案
sleep(2);
$txt_file = fopen('output.txt','r');
$line = fgets($txt_file);
fclose($txt_file);
echo $line;
header("Location: index.php?a=".$line);
?>
<!--
<form method="post" enctype="multipart/form-data">
<input type="file" name="mypic">
<input type="submit" value="上傳">
</form>-->

Python 檔案是否存在

import os
# 要檢查的檔案路徑
filepath = "0.jpg"
# 檢查檔案是否存在
if os.path.isfile(filepath):
  print("檔案存在。")
else:
  print("檔案不存在。")

安裝 Pillow

pip install Pillow

Python 圖形辨識 相似度

# -*- coding:utf-8 -*-
from functools import reduce
from PIL import Image
# 計算圖片的局部哈希值--pHash
def phash(img):
    """
    :param img: 圖片
    :return: 返回圖片的局部hash值
    """
    img = img.resize((8, 8), Image.ANTIALIAS).convert('L')
    avg = reduce(lambda x, y: x + y, img.getdata()) / 64.
    hash_value=reduce(lambda x, y: x | (y[1] << y[0]), enumerate(map(lambda i: 0 if i < avg else 1, img.getdata())), 0)
    print(hash_value)
    return hash_value
# 計算漢明距離:
def hamming_distance(a, b):
    """
    :param a: 圖片1的hash值
    :param b: 圖片2的hash值
    :return: 返回兩個圖片hash值的漢明距離
    """
    hm_distance=bin(a ^ b).count('1')
    print(hm_distance)
    return hm_distance
# 計算兩個圖片是否相似:
def is_imgs_similar(img1,img2):
    """
    :param img1: 圖片1
    :param img2: 圖片2
    :return:  True 圖片相似  False 圖片不相似
    """
    return True if hamming_distance(phash(img1),phash(img2)) <= 5 else False
if __name__ == '__main__':
    # 讀取圖片
    sensitive_pic = Image.open("0.jpg")
    target_pic = Image.open("2.jpg")
    # 比較圖片相似度
    result=is_imgs_similar(target_pic, sensitive_pic)
    print(result)

Python 偵測檔案 + 比對相似度

# -*- coding:utf-8 -*-
from functools import reduce
from PIL import Image
import os
import pymysql
# 計算圖片的局部哈希值--pHash
def phash(img):
    """
    :param img: 圖片
    :return: 返回圖片的局部hash值
    """
    img = img.resize((8, 8), Image.ANTIALIAS).convert('L')
    avg = reduce(lambda x, y: x + y, img.getdata()) / 64.
    hash_value=reduce(lambda x, y: x | (y[1] << y[0]), enumerate(map(lambda i: 0 if i < avg else 1, img.getdata())), 0)
    #print(hash_value)
    return hash_value
# 計算漢明距離:
def hamming_distance(a, b):
    """
    :param a: 圖片1的hash值
    :param b: 圖片2的hash值
    :return: 返回兩個圖片hash值的漢明距離
    """
    hm_distance=bin(a ^ b).count('1')
    #print(hm_distance)
    return hm_distance
# 計算兩個圖片是否相似:
def is_imgs_similar(img1,img2):
    """
    :param img1: 圖片1
    :param img2: 圖片2
    :return:  True 圖片相似  False 圖片不相似
    """
    return True if hamming_distance(phash(img1),phash(img2)) <= 5 else False
# 資料庫設定
db_settings = {
    "host": "127.0.0.1",
    "port": 3306,
    "user": "root",
    "password": "資料庫管理員密碼",
    "db": "test2022",
    "charset": "utf8"
}
if __name__ == '__main__':
    while True:
# 要檢查的檔案路徑
        filepath = "1.jpg"
# 檢查檔案是否存在
        if os.path.isfile(filepath):
         #print("檔案存在。")
     # 讀取圖片
         #fp = open(filepath,'rb')
         sensitive_pic = Image.open("0.jpg")
         target_pic = Image.open(filepath)
         
     # 比較圖片相似度
         result=is_imgs_similar(target_pic, sensitive_pic)
         a=result
         print(a)
         path = 'output.txt'
          
         if a==True:
          #print("ok")
          f = open(path, 'w')
          f.write('ok')
          f.close()
 
         else:
          #print("ng")
          f = open(path, 'w')
          f.write('ng')
          f.close()
          
        else:
         print("檔案不存在。")
原本打算用SQL處理,不過有點懶...所以就用文字檔的方式處理...以後有空在搞囉~
為什麼會看到廣告
avatar-img
40會員
130內容數
獨立遊戲開發紀錄
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
吳佳鑫的沙龍 的其他內容
本專題為兩塊ESP8266-ESP01 ,分別為 Arduino+ESP-01+YL-69 土壤濕度檢測器與LED燈 ,以及 ESP-01 + DHT11 + LED 傳輸給伺服器端,並於伺服器上 WebSite 透過ESP-01上傳儲 存於 MYSQL 資料呈現曲線圖給前端使用者。此外,前端使用者
本專題為兩塊ESP8266-ESP01 ,分別為 Arduino+ESP-01+YL-69 土壤濕度檢測器與LED燈 ,以及 ESP-01 + DHT11 + LED 傳輸給伺服器端,並於伺服器上 WebSite 透過ESP-01上傳儲 存於 MYSQL 資料呈現曲線圖給前端使用者。此外,前端使用者
使用網路上找來的原碼 測試圖片 因版本問題會出現 error pytesseract.pytesseract.TesseractNotFoundError: C:\Program Files (x86)\Tesseract-OCR esseract.exe is not installed or i
Haar Cascade classifier OpenCV 官方 Github:https://github.com/opencv/opencv/tree/4.x/data 人臉特徵模型:haarcascade_frontalface_default.xml 資料來源: https://steam
詳細原碼: https://reurl.cc/ex8lZm hello world Variable (變數) 輸入 input() 四則運算 列表 list (陣列) 集合 字典(Dictionary) 給值 try 檢驗 取所有值 判斷式 If else 迴圈 Switch //字典方式 CSV
取得掌紋 圖片比對 後續思維... 透過特徵比對+CNN,以YOLO 或 TensorFlow+Keras進行會比較正確。 單靠OpneCV至此是極限,要判斷出各條線,沒模型,則要以numpy陣列加上相似度(哈希算法等)去做,整體上不好進行... 待續...
本專題為兩塊ESP8266-ESP01 ,分別為 Arduino+ESP-01+YL-69 土壤濕度檢測器與LED燈 ,以及 ESP-01 + DHT11 + LED 傳輸給伺服器端,並於伺服器上 WebSite 透過ESP-01上傳儲 存於 MYSQL 資料呈現曲線圖給前端使用者。此外,前端使用者
本專題為兩塊ESP8266-ESP01 ,分別為 Arduino+ESP-01+YL-69 土壤濕度檢測器與LED燈 ,以及 ESP-01 + DHT11 + LED 傳輸給伺服器端,並於伺服器上 WebSite 透過ESP-01上傳儲 存於 MYSQL 資料呈現曲線圖給前端使用者。此外,前端使用者
使用網路上找來的原碼 測試圖片 因版本問題會出現 error pytesseract.pytesseract.TesseractNotFoundError: C:\Program Files (x86)\Tesseract-OCR esseract.exe is not installed or i
Haar Cascade classifier OpenCV 官方 Github:https://github.com/opencv/opencv/tree/4.x/data 人臉特徵模型:haarcascade_frontalface_default.xml 資料來源: https://steam
詳細原碼: https://reurl.cc/ex8lZm hello world Variable (變數) 輸入 input() 四則運算 列表 list (陣列) 集合 字典(Dictionary) 給值 try 檢驗 取所有值 判斷式 If else 迴圈 Switch //字典方式 CSV
取得掌紋 圖片比對 後續思維... 透過特徵比對+CNN,以YOLO 或 TensorFlow+Keras進行會比較正確。 單靠OpneCV至此是極限,要判斷出各條線,沒模型,則要以numpy陣列加上相似度(哈希算法等)去做,整體上不好進行... 待續...
你可能也想看
Google News 追蹤
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
現在的智慧型手機都已經具有定位功能,可在Google地圖知道自己的所在位置,也能夠傳送座標給朋友輕鬆找到會面地點。 其實連手機拍出的照片,也能夠自動儲存拍照地點的定位資訊!
Thumbnail
一個獨立開發者,立志打造顛覆性的遊戲體驗,在開拓全新玩法的道路上,砥礪前行。 大家好,我正在開發一款獨立遊戲,以魔法戰鬥為主題,如果想要嘗試遊戲的demo,歡迎到下方連結處,加入我的Discord群組。 魔法與戰鬥的世界---開發中的遊戲   這款遊戲發生在一個飄浮於雲端之上的世界,
Thumbnail
這是一篇介紹如何使用Google Maps API在網頁上呈現地圖,並進行店家名稱的搜尋的文章。內容包含如何申請Google Cloud Platform的API金鑰、初始化地圖、設定搜尋功能等步驟。文章中提供了部分程式碼範例,並附上圖片說明操作過程。
Thumbnail
天網快速地進行了模擬和設計,數分鐘後,屏幕上出現了一個簡單而精美的遊戲介面。 天網:「初步設計已經完成。這個APP看起來是一個普通的益智遊戲,使用者可以在遊戲過程中觸發隱藏的安全報警功能。所有報警信號會立即發送到天網系統,並通知你和相關機構。你可以試用一下,看看是否符合你的要求。」
-在Web3打造google map 任何人都可以貢獻最新數據,並獲得獎勵。   Hivemapper announced as the Google Maps of Web 3.0
Thumbnail
這是假裝某個空間中的兩端點距離很遠的方式
Thumbnail
這篇文章記錄了如何在網頁中使用<iframe>或套件vue3-google-map來實現Google Map呈現,並在上面設置圖釘。兩種方法的優缺點也有相關的說明。想要在網頁上加入Google Map及設置圖釘的讀者可以參考這篇文章。
Thumbnail
Google Maps的「藍牙隧道信標」功能已經針對 Android 用戶推出,並且已經在台灣推出[1][3]。 這項功能可以在沒有GPS信號的隧道中,透過藍牙獲得即時位置,進而進行導航。 使用者可以在「設定」>「導航設定」>「藍牙隧道信標」中授權位置信息來使用此功能[1][4]。
改版之後的方格子,找不到圖庫,找不到路徑 只好發個測試廢文
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
現在的智慧型手機都已經具有定位功能,可在Google地圖知道自己的所在位置,也能夠傳送座標給朋友輕鬆找到會面地點。 其實連手機拍出的照片,也能夠自動儲存拍照地點的定位資訊!
Thumbnail
一個獨立開發者,立志打造顛覆性的遊戲體驗,在開拓全新玩法的道路上,砥礪前行。 大家好,我正在開發一款獨立遊戲,以魔法戰鬥為主題,如果想要嘗試遊戲的demo,歡迎到下方連結處,加入我的Discord群組。 魔法與戰鬥的世界---開發中的遊戲   這款遊戲發生在一個飄浮於雲端之上的世界,
Thumbnail
這是一篇介紹如何使用Google Maps API在網頁上呈現地圖,並進行店家名稱的搜尋的文章。內容包含如何申請Google Cloud Platform的API金鑰、初始化地圖、設定搜尋功能等步驟。文章中提供了部分程式碼範例,並附上圖片說明操作過程。
Thumbnail
天網快速地進行了模擬和設計,數分鐘後,屏幕上出現了一個簡單而精美的遊戲介面。 天網:「初步設計已經完成。這個APP看起來是一個普通的益智遊戲,使用者可以在遊戲過程中觸發隱藏的安全報警功能。所有報警信號會立即發送到天網系統,並通知你和相關機構。你可以試用一下,看看是否符合你的要求。」
-在Web3打造google map 任何人都可以貢獻最新數據,並獲得獎勵。   Hivemapper announced as the Google Maps of Web 3.0
Thumbnail
這是假裝某個空間中的兩端點距離很遠的方式
Thumbnail
這篇文章記錄了如何在網頁中使用<iframe>或套件vue3-google-map來實現Google Map呈現,並在上面設置圖釘。兩種方法的優缺點也有相關的說明。想要在網頁上加入Google Map及設置圖釘的讀者可以參考這篇文章。
Thumbnail
Google Maps的「藍牙隧道信標」功能已經針對 Android 用戶推出,並且已經在台灣推出[1][3]。 這項功能可以在沒有GPS信號的隧道中,透過藍牙獲得即時位置,進而進行導航。 使用者可以在「設定」>「導航設定」>「藍牙隧道信標」中授權位置信息來使用此功能[1][4]。
改版之後的方格子,找不到圖庫,找不到路徑 只好發個測試廢文