星期二, 5月 24, 2022

[jQuery Plugin] 實作響應式影像地圖

因為客戶在某些場景要用影像地圖實現點擊的功能,

使用rwdImageMaps套件可以輕鬆達到

外掛:https://github.com/stowball/jQuery-rwdImageMaps

$(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();
});

但使用前需要使用初步工具做影像地圖,可以參考https://www.image-maps.com/


image map

產生後原圖會有會有原本定位坐標的原圖比例(要保留,jq外掛會吃這個值去自動resize到目前畫面的大小坐標)

操作畫面

星期一, 4月 18, 2022

[Javascript] 使用Javascript呼叫Webcam掃QRCode - 整合的函式庫與html5範例

找了幾個控制webcam的方法,桌機跟手機要可以運行。

QuaggaJS

https://serratus.github.io/quaggaJS/

Instascan

https://www.tutorialstuff.com/tutorials/jquery-html5-qr-code-scanner-using-instascan-js-exampleexample

html5自幹:

使用 jsqrcode 

https://www.sitepoint.com/create-qr-code-reader-mobile-website/

demo網址在iphoneX測試可用

https://ilrm9.csb.app/

AngularJS  1.x directive

2022/10/12  測試本專案的 js 版本不適用目前的版本

使用 jsqrcode 

https://github.com/sembrestels/angular-qr-scanner


後記

要在開發環境啟用 相機(window.navigator.mediaDevices.getUserMedia)

請至chrome設定啟不insecure

chrome://flags/#unsafely-treat-insecure-origin-as-secure