{"id":8924,"date":"2021-04-19T07:00:14","date_gmt":"2021-04-18T22:00:14","guid":{"rendered":"https:\/\/blog.capilano-fw.com\/?p=8924"},"modified":"2021-04-09T18:07:30","modified_gmt":"2021-04-09T09:07:30","slug":"%e3%80%90opencv-js%e3%80%91%e3%81%aa%e3%81%aa%e3%82%81%e3%81%ab%e5%86%99%e3%81%a3%e3%81%9f%e6%96%87%e6%9b%b8%e3%82%92%e3%83%94%e3%83%83%e3%82%bf%e3%83%aa%e3%81%95%e3%81%9b%e3%82%8b","status":"publish","type":"post","link":"https:\/\/blog.capilano-fw.com\/?p=8924","title":{"rendered":"\u3010OpenCV.js\u3011\u306a\u306a\u3081\u306b\u5199\u3063\u305f\u6587\u66f8\u3092\u30d4\u30c3\u30bf\u30ea\u3055\u305b\u308b"},"content":{"rendered":"

\u3055\u3066\u3055\u3066\u3001\u5c11\u3057\u524d\u306b\u79c1\u306b\u3068\u3063\u3066\u5c11\u3057\u524d\u306b\u9a5a\u304f\u3079\u304d\u4e8b\u5b9f\u3092\u77e5\u308b\u3053\u3068\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n

\u305d\u308c\u306f\u30fb\u30fb\u30fb\u30fb\u30fb<\/p>\n

\u753b\u50cf\u51e6\u7406\u30d1\u30c3\u30b1\u30fc\u30b8\u300cOpenCV\u300d\u304c\u30d6\u30e9\u30a6\u30b6\u3067\u3082\u4f7f\u3048\u308b<\/strong><\/p>\n

\u3068\u3044\u3046\u3082\u306e\u3067\u3059\u3002<\/p>\n

OpenCV<\/code>\u3068\u306f\u3001Python<\/code>\u306a\u3069\u3067\u306f\u5b9a\u756a\u306e\u753b\u50cf\u51e6\u7406\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u3053\u3068\u3067\u3001PHP<\/code>\u3067\u8a00\u3046\u3068\u3053\u308d\u306eGD<\/code>\u306e\u3088\u3046\u306a\u5b58\u5728\u3067\u3059\u3002<\/p>\n

\u3057\u304b\u3057\u3001GD<\/code>\u3068\u6bd4\u3079\u308b\u3068\u3088\u308a\u5c02\u9580\u7684\u306a\u51e6\u7406\u304c\u3067\u304d\u308b\u306e\u3067\u3001\u6570\u5b66\u7684\u306a\u77e5\u8b58\u304c\u591a\u5c11\u5fc5\u8981\u306a\u5206\u3001\u3067\u304d\u308b\u3053\u3068\u3082\u3088\u308a\u591a\u304f\u306a\u3063\u3066\u3044\u305f\u308a\u3057\u307e\u3059\u3002<\/p>\n

\u3068\u3044\u3046\u3053\u3068\u3067\u3001\u4eca\u56de\u306f\u3053\u306eJavaScript<\/code>\u7248\u306eOpenCV<\/code>\u3092\u4f7f\u3063\u3066\u3001\u300c\u306a\u306a\u3081\u306b\u5199\u3063\u3066\u3057\u307e\u3063\u305f\u6587\u66f8<\/strong>\u300d\u3092\u81ea\u52d5\u7684\u306b\u4fee\u6b63\u3057\u3066\u753b\u50cf\u306b\u30d4\u30c3\u30bf\u30ea\u306b\u306a\u308b\u3088\u3046\u306b\u4fee\u6b63\u3057\u3066\u307f\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n

\u3064\u307e\u308a\u3001\u3053\u3046\u3044\u3046\u3053\u3068\u3067\u3059\u306d\u3002
\n\u2193\u2193\u2193<\/p>\n

\"\"<\/p>\n

\u3053\u308c\u304c\u81ea\u52d5\u3067\u30fb\u30fb\u30fb<\/p>\n

\"\"<\/p>\n

\u30d4\u30c3\u30bf\u30ea\u2757<\/p>\n

\u3067\u306f\u3001\u5b9f\u969b\u306b\u3084\u3063\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n

\"\"\u300c\u30d6\u30e9\u30a6\u30b6\u3060\u3051\u3067
\nOpenCV\u3063\u3066\u3059\u3054\u3044\u3067\u3059\u306d\ud83d\udc4d\u300d<\/p>\n

\u958b\u767a\u74b0\u5883\uff1a<\/strong> OpenCV.js 4.5<\/p>\n

\u6e96\u5099\u3059\u308b<\/h1>\n

OpenCV.js<\/code>\u306b\u306fCDN<\/code>\u304c\u7528\u610f\u3055\u308c\u3066\u3044\u308b\u306e\u3067\u76f4\u63a5\u8aad\u307f\u8fbc\u3080\u306e\u304c\u30b7\u30f3\u30d7\u30eb\u3067\u3044\u3044\u3067\u3059\u3002\u305f\u3060\u3001\u30d5\u30a1\u30a4\u30eb\u30b5\u30a4\u30ba\u304c\u5927\u304d\u3044\u306e\u3067\u3001\u8aad\u307f\u8fbc\u307f\u306b\u6642\u9593\u304c\u304b\u304b\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n

\u305d\u306e\u305f\u3081\u3001\u3082\u3057\u30b5\u30a4\u30c8\u306b\u8a2d\u7f6e\u3057\u4f7f\u3044\u305f\u3044\u5834\u5408\u306f\u3001\u4ee5\u4e0b\u306e\u30da\u30fc\u30b8\u304b\u3089\u300copencv-\uff08\u30d0\u30fc\u30b8\u30e7\u30f3\u756a\u53f7\uff09-docs.zip<\/strong>\u300d\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u3001\u5c55\u958b\u3057\u305f\u4e2d\u306b\u3042\u308bopencv.js<\/code>\u3092\/js\/opencv.js<\/code>\u3068\u3057\u3066\u4f7f\u3063\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n

\ud83d\udcdd\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9URL\uff1a https:\/\/github.com\/opencv\/opencv\/releases<\/a><\/p>\n

\u4ee5\u4e0b\u306f\u30d0\u30fc\u30b8\u30e7\u30f34.5.2\u306e\u5834\u5408\u3067\u3059\u3002<\/p>\n

\"\"<\/p>\n

\u203b \u306a\u304a\u3001\u5f8c\u3067ServiceWorker<\/code>\u306b\u3088\u308b\u9ad8\u901f\u5316\u3092\u7d39\u4ecb\u3057\u3066\u3044\u307e\u3059\u304c\u3001\u305d\u306e\u5834\u5408\u306f\u4e0a\u8a18\u306e\u624b\u9806\u3067\u5b9f\u88c5\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n

\u6b6a\u307f\u3092\u4fee\u6b63\u3059\u308b\u90e8\u5206\u3092\u3064\u304f\u308b<\/h1>\n

\u3067\u306f\u3001\u3044\u304d\u306a\u308a\u30e1\u30a4\u30f3\u300c\u6b6a\u3093\u3060\u6587\u66f8\u3092\u30d4\u30c3\u30bf\u30ea\u3055\u305b\u308b<\/strong>\u300d\u90e8\u5206\u3067\u3059\u3002<\/p>\n

<html><\/strong>\r\n<head><\/strong>\r\n    <link href=\"https:\/\/unpkg.com\/tailwindcss@^2\/dist\/tailwind.min.css\" rel=\"stylesheet\"><\/strong>\r\n<\/head><\/strong>\r\n<body><\/strong>\r\n    <div id=\"app\" class=\"p-3\"><\/strong>\r\n        <div v-if=\"!initialized\"><\/strong>\r\n            opencv\u3092\u6e96\u5099\u4e2d\u3067\u3059...\u3057\u3070\u3089\u304f\u304a\u5f85\u3061\u304f\u3060\u3055\u3044\u3002<\/strong>\r\n        <\/div><\/strong>\r\n        <div v-else><\/strong>\r\n            <input type=\"file\" accept=\"image\/*\" @change=\"onFileChange\"><\/strong>\r\n            <div class=\"pt-3\" v-if=\"imageData\"><\/strong>\r\n                <img id=\"image\" class=\"float-left\" :src=\"imageData\" v-if=\"imageData\"><\/strong>\r\n                <canvas id=\"outputCanvas\"><\/canvas><\/strong>\r\n            <\/div><\/strong>\r\n            <div class=\"pt-3 clear-both\" v-if=\"imageData\"><\/strong>\r\n                <button type=\"button\" class=\"bg-indigo-500 text-indigo-50 p-2 rounded mb-3\" @click=\"transform\">\u6b6a\u307f\u3092\u4fee\u6b63\u3059\u308b<\/button><\/strong>\r\n            <\/div><\/strong>\r\n        <\/div><\/strong>\r\n    <\/div><\/strong>\r\n    <script src=\"https:\/\/unpkg.com\/vue@3.0.2\/dist\/vue.global.prod.js\"><\/script><\/strong>\r\n    <script src=\"https:\/\/docs.opencv.org\/4.5.2\/opencv.js\"><\/script><\/strong>\r\n    <script><\/strong>\r\n\r\n        Vue.createApp({<\/strong>\r\n            data() {<\/strong>\r\n                return {<\/strong>\r\n                    initialized: false,<\/strong>\r\n                    imageData: null,<\/strong>\r\n                    MIN_CONTOURS_SCALE: 20, \/\/ \u6700\u4f4e\u5143\u753b\u50cf\u6bd4\u7387<\/strong>\r\n                    THRESHOLD: 170, \/\/ \u30e2\u30ce\u30af\u30ed\u306e\u3057\u304d\u3044\u5024<\/strong>\r\n                }<\/strong>\r\n            },<\/strong>\r\n            methods: {<\/strong>\r\n                onFileChange(e) {<\/strong>\r\n\r\n                    const files = e.target.files;<\/strong>\r\n\r\n                    if(files.length > 0) {<\/strong>\r\n\r\n                        const file = files[0];<\/strong>\r\n                        const reader = new FileReader();<\/strong>\r\n                        reader.onload = (e) => {<\/strong>\r\n\r\n                            this.imageData = e.target.result;<\/strong>\r\n\r\n                        };<\/strong>\r\n                        reader.readAsDataURL(file);<\/strong>\r\n\r\n                    }<\/strong>\r\n\r\n                },<\/strong>\r\n\r\n                \/\/ opencv<\/strong>\r\n                transform() {<\/strong>\r\n\r\n                    const imageElement = document.querySelector('#image');<\/strong>\r\n                    const im = cv.imread(imageElement);<\/strong>\r\n                    const pts = this.getContoursPoints(im);<\/strong>\r\n\r\n                    if(pts) {<\/strong>\r\n\r\n                        const transformedIm = this.getTransformedImage(im, pts);<\/strong>\r\n                        cv.imshow('outputCanvas', transformedIm);<\/strong>\r\n                        console.log('Done!');<\/strong>\r\n\r\n                    } else {<\/strong>\r\n\r\n                        console.log('Failed...');<\/strong>\r\n\r\n                    }<\/strong>\r\n\r\n                    im.delete();<\/strong>\r\n\r\n                },<\/strong>\r\n                getContoursPoints(im) {<\/strong>\r\n\r\n                    \/\/ Image area<\/strong>\r\n                    const imRectArea = im.cols * im.rows \/\/ \u5143\u753b\u50cf\u306e\u9762\u7a4d<\/strong>\r\n\r\n                    \/\/ Grayscale<\/strong>\r\n                    let im_gray = new cv.Mat();<\/strong>\r\n                    cv.cvtColor(im, im_gray, cv.COLOR_RGBA2GRAY);<\/strong>\r\n\r\n                    \/\/ Threshold<\/strong>\r\n                    let threshold_im = new cv.Mat();<\/strong>\r\n                    cv.threshold(im_gray, threshold_im, this.THRESHOLD, 255, cv.THRESH_BINARY);<\/strong>\r\n\r\n                    \/\/ Contours<\/strong>\r\n                    let contours = new cv.MatVector();<\/strong>\r\n                    let hierarchy = new cv.Mat();<\/strong>\r\n                    cv.findContours(threshold_im, contours, hierarchy, cv.RETR_CCOMP, cv.CHAIN_APPROX_SIMPLE);<\/strong>\r\n                    hierarchy.delete();<\/strong>\r\n\r\n                    let pts = null;<\/strong>\r\n                    let maxCntArea = 0<\/strong>\r\n\r\n                    for(let i = 0; i < contours.size(); ++i) {<\/strong>\r\n\r\n                        let cnt = contours.get(i);<\/strong>\r\n                        const cntArea = cv.contourArea(cnt)<\/strong>\r\n                        const maxRectScale = parseInt(cntArea \/ imRectArea * 100) \/\/ \u5143\u753b\u50cf\u3068\u6bd4\u3079\u3066\u3069\u308c\u3050\u3089\u3044\u306e\u5927\u304d\u3055\u304b\uff08\uff05\uff09<\/strong>\r\n\r\n                        if(maxRectScale >= this.MIN_CONTOURS_SCALE) { \/\/ \u5143\u753b\u50cf\u3068\u306e\u6bd4\u7387\u3067\u30d5\u30a3\u30eb\u30bf\u30fc<\/strong>\r\n\r\n                            if(cntArea > maxCntArea) { \/\/ \u3088\u308a\u5927\u304d\u3044\u3082\u306e\u3092\u30ad\u30fc\u30d7<\/strong>\r\n\r\n                                let approx = new cv.Mat();<\/strong>\r\n                                const epsilon = 0.02 * cv.arcLength(cnt, true)<\/strong>\r\n                                cv.approxPolyDP(cnt, approx, epsilon, true)<\/strong>\r\n\r\n                                if(approx.size().height === 4) { \/\/ \u56db\u89d2\u5f62\u306a\u3089\u30ad\u30fc\u30d7<\/strong>\r\n\r\n                                    maxCntArea = cntArea;<\/strong>\r\n                                    pts = approx \/\/ \u5207\u308a\u629c\u304f\u3079\u304d\u56db\u89d2\u5f62\u306e\u5ea7\u6a19\uff084\u70b9\uff09<\/strong>\r\n\r\n                                }<\/strong>\r\n\r\n                            }<\/strong>\r\n\r\n                        }<\/strong>\r\n\r\n                    }<\/strong>\r\n\r\n                    contours.delete();<\/strong>\r\n                    im_gray.delete();<\/strong>\r\n                    threshold_im.delete();<\/strong>\r\n                    pts.convertTo(pts, cv.CV_32FC2);<\/strong>\r\n\r\n                    return pts;<\/strong>\r\n\r\n                },<\/strong>\r\n\r\n                getTransformedImage(im, fromPts) {<\/strong>\r\n\r\n                    let transformedIm = new cv.Mat();<\/strong>\r\n                    const rows = im.rows;<\/strong>\r\n                    const cols = im.cols;<\/strong>\r\n                    let dsize = new cv.Size(cols, rows);<\/strong>\r\n                    const toPts = cv.matFromArray(4, 1, cv.CV_32FC2, [<\/strong>\r\n                        cols, 0, 0, 0, 0, rows, cols, rows<\/strong>\r\n                    ]);<\/strong>\r\n                    const M = cv.getPerspectiveTransform(fromPts, toPts); \/\/ \u5909\u5f62\u306e\u884c\u5217<\/strong>\r\n                    cv.warpPerspective(im, transformedIm, M, dsize);<\/strong>\r\n\r\n                    fromPts.delete();<\/strong>\r\n                    toPts.delete();<\/strong>\r\n                    return transformedIm;<\/strong>\r\n\r\n                }<\/strong>\r\n\r\n            },<\/strong>\r\n            mounted() {<\/strong>\r\n\r\n                cv['onRuntimeInitialized'] = () => {<\/strong>\r\n\r\n                    this.initialized = true;<\/strong>\r\n\r\n                };<\/strong>\r\n\r\n            }<\/strong>\r\n        }).mount('#app');<\/strong>\r\n\r\n    <\/script><\/strong>\r\n<\/body><\/strong>\r\n<\/html><\/strong><\/pre>\n
\u3053\u306e\u4e2d\u3067\u6587\u66f8\u306e\u6b6a\u307f\u3092\u4fee\u6b63\u3057\u3066\u3044\u308b\u624b\u9806\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n
    \n
  1. \u753b\u50cf\u3092\u30e2\u30ce\u30af\u30ed\u306b\u5909\u63db<\/li>\n
  2. \u3057\u304d\u3044\u5024\u3092\u4f7f\u3063\u3066\u3088\u308a\u6587\u66f8\u306e\u90e8\u5206\u3092\u660e\u78ba\u306b\u3059\u308b<\/li>\n
  3. \u5168\u3066\u306e\u8f2a\u90ed\u3092\u53d6\u5f97\u3057\u300c\u5f62\u304c\u56db\u89d2\u5f62\u3067\u6700\u5927\u306e\u3082\u306e\uff08\uff1d\u3064\u307e\u308a\u6587\u66f8\uff09\u300d\u3092\u53d6\u5f97\u3059\u308b<\/li>\n
  4. \u53d6\u5f97\u3057\u305f\u4f4d\u7f6e\u60c5\u5831\u304b\u3089\u300c\u9060\u8fd1\u6cd5\u30ef\u30fc\u30d7\u300d\u3067\u753b\u50cf\u3092\u5909\u5f62<\/li>\n
  5. \u5b8c\u6210\uff01<\/li>\n<\/ol>\n
    \u3064\u307e\u308a\u753b\u50cf\u3067\u3044\u3046\u3068\u3053\u3046\u306a\u308a\u307e\u3059\u3002<\/p>\n
    \uff11\uff0e\u5143\u753b\u50cf
    \n\"\"<\/p>\n
    \uff12\uff0e\u30e2\u30ce\u30af\u30ed\u3078\u5909\u63db
    \n\"\"<\/p>\n
    \uff13\uff0e\u3057\u304d\u3044\u5024\u3092\u9069\u7528
    \n\"\"<\/p>\n
    \uff14\uff0e\u8f2a\u90ed\u304b\u3089\u4f4d\u7f6e\u3092\u53d6\u5f97
    \n\"\"<\/p>\n
    \uff15\uff0e\u9060\u8fd1\u6cd5\u30ef\u30fc\u30d7\u3067\u5143\u753b\u50cf\u306e\u6b6a\u307f\u3092\u4fee\u6b63
    \n\"\"<\/p>\n
    \u306a\u304a\u3001\u4eca\u56de\u306f\u300cA4\u7e26\u30b5\u30a4\u30ba<\/strong>\u300d\u3092\u60f3\u5b9a\u3057\u3066\u3044\u307e\u3059\u304c\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u4f7f\u3063\u3066\u6a2a\u5411\u304d\u3084\u4ed6\u306e\u30b5\u30a4\u30ba\u3078\u5bfe\u5fdc\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u308b\u3067\u3057\u3087\u3046\u3002<\/p>\n
    \u30c7\u30e2\u30da\u30fc\u30b8\u3092\u7528\u610f\u3057\u307e\u3057\u305f<\/h1>\n
    \u4eca\u56de\u306e\u30b3\u30fc\u30c9\u3092\u5c11\u3057\u3060\u3051\u6539\u5909\u3057\u305f\u3082\u306e\u3092\u30c7\u30e2\u30da\u30fc\u30b8\u3068\u3057\u3066\u516c\u958b\u3059\u308b\u3053\u3068\u306b\u3057\u307e\u3057\u305f\u3002\u305c\u3072OpenCV.js<\/code>\u3092\u8a66\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
    \ud83d\udcdd \u30c7\u30e2\u30da\u30fc\u30b8\uff1a<\/strong> \u306a\u306a\u3081\u306b\u5199\u3063\u305f\u6587\u66f8\u3092\u30d4\u30c3\u30bf\u30ea\u306b\u3059\u308b\u30b5\u30f3\u30d7\u30eb<\/a><\/p>\n
    \u3061\u306a\u307f\u306b\uff1aServiceWoker\u306b\u3088\u308b\u9ad8\u901f\u5316<\/h1>\n
    \u30c7\u30e2\u30da\u30fc\u30b8\u3092\u898b\u3066\u3044\u305f\u3060\u304f\u3068\u304a\u6c17\u3065\u304d\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u304c\u3001OpenCV.js<\/code>\u672c\u4f53\u306e\u30d5\u30a1\u30a4\u30eb\u30b5\u30a4\u30ba\u304c\u5927\u304d\u3044\u306e\u3067\u3001\u5c11\u3057\u5f85\u305f\u306a\u3044\u3068\u3044\u3051\u307e\u305b\u3093\u3002<\/p>\n
    \u6b21\u56de\u304b\u3089\u306f\u30d6\u30e9\u30a6\u30b6\u306e\u30ad\u30e3\u30c3\u30b7\u30e5\u304c\u52b9\u3044\u3066\u304f\u308c\u308b\u306e\u3067\u305d\u308c\u307b\u3069\u6c17\u306b\u3059\u308b\u5fc5\u8981\u306f\u3042\u308a\u307e\u305b\u3093\u304c\u3001\u30ad\u30e3\u30c3\u30b7\u30e5\u306f\u5b8c\u5168\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3057\u3001\u30e6\u30fc\u30b6\u30fc\u30d3\u30ea\u30c6\u30a3\u3068\u3057\u3066\u3042\u307e\u308a\u3044\u3044\u3068\u306f\u8a00\u3048\u307e\u305b\u3093\u3088\u306d\u3002<\/p>\n
    \u305d\u3053\u3067\u3001\u4eca\u56de\u306f\u305b\u3063\u304b\u304f\u3067\u3059\u306e\u3067\u300cService Worker<\/strong>\u300d\u3092\u4f7f\u3063\u3066\u4e8b\u524d\u306b\/js\/opencv.js<\/code>\u3092\u30ad\u30e3\u30c3\u30b7\u30e5\u3059\u308b\u3088\u3046\u306b\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n
    \u4f8b\u3048\u3070\u3001\u6d41\u308c\u3068\u3057\u3066\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
      \n
    1. \u30e6\u30fc\u30b6\u30fc\u304c\u30ed\u30b0\u30a4\u30f3\u3059\u308b<\/li>\n
    2. \u30ed\u30b0\u30a4\u30f3\u3057\u305f\u6642\u70b9\u3067 \/js\/opencv.js \u3092\u30ad\u30e3\u30c3\u30b7\u30e5\u3059\u308b\uff08\u30d0\u30c3\u30af\u30b0\u30e9\u30f3\u30c9\u3067\u72ec\u7acb\u3057\u3066\u52d5\u304d\u307e\u3059\uff09<\/li>\n
    3. \/js\/opencv.js \u304c\u5fc5\u8981\u306a\u30da\u30fc\u30b8\u3078\u79fb\u52d5<\/li>\n
    4. \u3059\u3067\u306b\u30d5\u30a1\u30a4\u30eb\u306f\u30ad\u30e3\u30c3\u30b7\u30e5\u3055\u308c\u3066\u3044\u308b\u306e\u3067\u9ad8\u901f\u3067\u30da\u30fc\u30b8\u8868\u793a\u3067\u304d\u308b\uff01<\/li>\n<\/ol>\n
      \u3064\u307e\u308a\u3001\u30ad\u30e3\u30c3\u30b7\u30e5\u30fb\u30d5\u30a1\u30a4\u30eb\u3092\u30ed\u30fc\u30ab\u30eb\u306b\u4fdd\u5b58\u3059\u308b\u306e\u3067\u9ad8\u901f\u5316\u3067\u304d\u308b\u3068\u3044\u3046\u308f\u3051\u3067\u3059\u306d\u3002\uff08HTML\u306a\u3069\u3082\u30ad\u30e3\u30c3\u30b7\u30e5\u3067\u304d\u308b\u306e\u3067\u3001\u30aa\u30d5\u30e9\u30a4\u30f3\u3067\u3082\u64cd\u4f5c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\ud83d\udc4d\uff09<\/p>\n
      \u3067\u306f\u3001\u5b9f\u969b\u306e\u30b3\u30fc\u30c9\u3067\u3059\u3002
      \n\u307e\u305a\u3001Service Worker<\/code>\u672c\u4f53\u3067\u3059\u3002<\/p>\n
      \/service-worker.js<\/strong><\/p>\n
      const CACHE_NAME = 'opencv-cache-v1';<\/strong>\r\n\r\nself.addEventListener('install', function(e) {<\/strong>\r\n\r\n    e.waitUntil(<\/strong>\r\n        caches.open(CACHE_NAME).then(cache => {<\/strong>\r\n\r\n            return cache.addAll([<\/strong>\r\n                '\/js\/opencv.js'<\/strong>\r\n            ]);<\/strong>\r\n\r\n        })<\/strong>\r\n    );<\/strong>\r\n\r\n});<\/strong>\r\n\r\nself.addEventListener('fetch', function(e) {<\/strong>\r\n    e.respondWith(<\/strong>\r\n        caches.match(e.request).then(response => {<\/strong>\r\n\r\n                if(response) {<\/strong>\r\n                    return response;<\/strong>\r\n                }<\/strong>\r\n                return fetch(e.request);<\/strong>\r\n\r\n        })<\/strong>\r\n    );<\/strong>\r\n});<\/strong><\/pre>\n
      \u203b \u306a\u304a\u3001Service Worker<\/code>\u306f\u30d5\u30a1\u30a4\u30eb\u304c\u5b58\u5728\u3059\u308b\u30d5\u30a9\u30eb\u30c0\u4ee5\u4e0b\u3067\u6709\u52b9<\/strong>\u306b\u306a\u308a\u307e\u3059\u3002\u305d\u306e\u305f\u3081\u3001\/js\/service-worker.js<\/code>\u306b\u8a2d\u7f6e\u3068\u3057\u3066\u3057\u307e\u3046\u3068\u3001\u30b5\u30a4\u30c8\u5168\u4f53\u3067\u6709\u52b9\u306b\u306a\u3089\u306a\u304f\u306a\u308b\u305f\u3081\u3001\u4eca\u56de\u306f\u30eb\u30fc\u30c8\u30d5\u30a9\u30eb\u30c0\u306b\u8a2d\u7f6e\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n
      \u305d\u3057\u3066\u3001\u3053\u306eService Worker<\/code>\u3092\u767b\u9332\u3059\u308b\u30b3\u30fc\u30c9\u3067\u3059\u3002
      \n\u3053\u308c\u306f\u4e8b\u524d\u306b\/js\/service-worker.js<\/code>\u3092\u30ad\u30e3\u30c3\u30b7\u30e5\u3057\u305f\u3044\u30da\u30fc\u30b8\u3068\u3001\u5b9f\u969b\u306b\/js\/service-worker.js<\/code>\u3092\u4f7f\u3046\u30da\u30fc\u30b8\u3067\u5b9f\u884c\u3059\u308b\u3068\u3044\u3044\u3067\u3057\u3087\u3046\u3002<\/p>\n
      <html>\r\n<body>\r\n    Service Worker \u3092\u6e96\u5099\u4e2d\r\n    <script>\r\n\r\n        window.onload = e => {<\/strong>\r\n\r\n            if('serviceWorker' in navigator) {<\/strong>\r\n\r\n                navigator.serviceWorker.register('\/service-worker.js')<\/strong>\r\n                    .then(<\/strong>\r\n                        registration => {<\/strong>\r\n\r\n                            console.log('ServiceWorker registration successful', registration.scope);<\/strong>\r\n\r\n                        },<\/strong>\r\n                        err => {<\/strong>\r\n\r\n                            console.log('ServiceWorker registration failed: ', err);<\/strong>\r\n\r\n                        }<\/strong>\r\n                    );<\/strong>\r\n\r\n            }<\/strong>\r\n\r\n        }<\/strong>\r\n\r\n    <\/script>\r\n<\/body>\r\n<\/html><\/pre>\n
      \u3053\u308c\u3067opencv.js<\/code>\u304cService Worker<\/code>\u7d4c\u7531\u3067\u8aad\u307f\u8fbc\u307e\u308c\u308b\u306e\u3067\u3001\u6b21\u56de\u304b\u3089\u306f\u9ad8\u901f\u3067\u30da\u30fc\u30b8\u8868\u793a\u304c\u3067\u304d\u307e\u3059\ud83d\udc4d<\/p>\n
      \u304a\u307e\u3051\uff1aPython\u7248<\/h1>\n
      \u3082\u3068\u3082\u3068\u4eca\u56de\u306e\u8a18\u4e8b\u306f\u3001\u300cAWS Lambda\u3067Python\u3092\u5b9f\u884c\u3059\u308b<\/strong>\u300d\u3068\u3044\u3046\u306e\u304c\u30c6\u30fc\u30de\u3060\u3063\u305f\u3093\u3067\u3059\u304c\u3001Lambda<\/code>\u3067OpenCV<\/code>\u3092\u4f7f\u3046\u306b\u306f\u81ea\u5206\u3067OpenCV<\/code>\u3092\u540c\u68b1\u3057\u306a\u3044\u3068\u3044\u3051\u306a\u3044\u3068\u3044\u3046\u3053\u3068\u304c\u5206\u304b\u308a\u300c\u3046\u30fc\u3093…\u300d\u3068\u306a\u3063\u3066\u3001\u65b9\u5411\u8ee2\u63db\u3092\u3057\u307e\u3057\u305f\u3002<\/p>\n
      \uff08\u5f53\u7136\u3068\u8a00\u3048\u3070\u5f53\u7136\u3067\u3059\u304c\u3001\u6709\u540d\u30d1\u30c3\u30b1\u30fc\u30b8\u3060\u304b\u3089\u5927\u4e08\u592b\u3060\u308d\u3046\u306a\u3093\u3066\u8003\u3048\u3067\u3057\u305f\u2026\ud83d\udca6\uff09<\/p>\n
      \u3057\u304b\u3057\u3001\u305b\u3063\u304b\u304fPython<\/code>\u7248\u3082\u3064\u304f\u3063\u305f\u306e\u306b\u3082\u3063\u305f\u3044\u306a\u3044\u306a\u3068\u3044\u3046\u3053\u3068\u3067\u300c\u304a\u307e\u3051\u300d\u3068\u3057\u3066\u516c\u958b\u3059\u308b\u3053\u3068\u306b\u3057\u307e\u3057\u305f\u3002\uff08\u30dc\u30c4\u30b3\u30fc\u30c9\u4f9b\u990a \ud83d\ude4f\u2728\uff09<\/p>\n
      \u6e96\u5099\u3059\u308b<\/h2>\n
      \u4eca\u56de\u306fPython<\/code>\u30b3\u30fc\u30c9\u306e\u4e2d\u4ee5\u4e0b\u306e\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u4f7f\u3044\u307e\u3059\u3002
      \n\u3082\u3057\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u3066\u3044\u306a\u3044\u5834\u5408\u306f\u5148\u306b\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u304a\u3044\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n