{"id":950,"date":"2020-03-12T22:51:06","date_gmt":"2020-03-12T13:51:06","guid":{"rendered":"https:\/\/dalomo.net\/blog\/?p=950"},"modified":"2020-03-12T22:51:06","modified_gmt":"2020-03-12T13:51:06","slug":"google-chrome%e3%81%ae%e6%8b%a1%e5%bc%b5%e3%82%92%e4%bd%9c%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f%e3%81%84%e2%91%a2-%e9%a1%94%e8%aa%8d%e8%ad%98","status":"publish","type":"post","link":"https:\/\/dalomo.net\/blog\/2020\/03\/12\/950\/","title":{"rendered":"Google Chrome\u306e\u62e1\u5f35\u3092\u4f5c\u3063\u3066\u307f\u305f\u3044\u2462 \u9854\u8a8d\u8b58"},"content":{"rendered":"

\u9854\u8a8d\u8b58<\/h1>\n

\u5916\u90e8\u30e9\u30a4\u30d6\u30e9\u30ea\u3068\u304b\u3001WebAPI\u3068\u304b\u3001\u7121\u304f\u3066\u3082\u3001\u30d6\u30e9\u30a6\u30b6\u3060\u3051\u3042\u308c\u3070\u9854\u8a8d\u8b58\u304c\u3067\u304d\u308b\u307f\u305f\u3044\u306a\u306e\u3067\u8a66\u3057\u3066\u307f\u308b\u3002<\/p>\n

Shape Detection API<\/h2>\n

flags<\/h3>\n

\u8a66\u9a13\u7684\u306a\u6a5f\u80fd\u306a\u3088\u3046\u3067\u3001\u6709\u52b9\u5316\u3057\u306a\u3044\u3068\u4f7f\u3048\u306a\u3044\u3002<\/p>\n

chrome:\/\/flags\/#enable-experimental-web-platform-features<\/p><\/blockquote>\n

\u306b\u884c\u3063\u3066\u3001Experimental Web Platform features\u3092Enabled\u306b\u3059\u308b\u3002<\/p>\n

contentScript.js<\/h2>\n

\u52d5\u4f5c\u78ba\u8a8d<\/h3>\n

\u3066\u3044\u3046\u304b\u305d\u3082\u305d\u3082\u62e1\u5f35\u6a5f\u80fd\u5185\u3067\u4f7f\u3048\u308b\u3093\u3060\u308d\u3046\u304b\u3068\u3001\u3075\u3068\u982d\u3092\u3088\u304e\u3063\u305f\u306e\u3067\u304a\u8a66\u3057\u3092\u3057\u3066\u307f\u308b\u3002<\/p>\n

https:\/\/dalomo.net\/blog\/files\/face\/index.html<\/a><\/p>\n

\u3053\u3093\u306a\u3093\u3092\u4f5c\u308a\u307e\u3057\u3066\u3001codepen\u306e\u30b3\u30fc\u30c9\u3092\u53c2\u8003\u306b<\/p>\n

debugger;\r\nvar image = document.getElementsByTagName('img');\r\n\r\ntry {\r\n    if (window.FaceDetector == undefined) {\r\n        console.error('Face Detection not supported');\r\n        throw new Error();\r\n    }\r\n\r\n    console.log('ignition!');\r\n    var faceDetector = new FaceDetector();\r\n    faceDetector.detect(image[0])\r\n        .then(faces => {\r\n            console.log('yes');\r\n        });\r\n\r\n} catch (error) {\r\n\r\n}<\/code><\/pre>\n
\u3046\u30fc\u3093\u3068\u3001img\u30bf\u30b0\u3092getElementsByTagName\u3067\u53d6\u5f97\u3002facedetecter\u304c\u6709\u52b9\u5316\u3055\u308c\u3066\u308b\u304b\u30c1\u30a7\u30c3\u30af\u3002\u5143\u306freturn\u3060\u3063\u305f\u3051\u3069\u3001return\u3060\u3068\u306a\u3093\u304b\u30a8\u30e9\u30fc\u306b\u306a\u308b\u306e\u3067try-catch\u3067exit\u4ee3\u308f\u308a\u3002\u305d\u3057\u3066new\u3057\u3066\u3001faceDetector.detect(image[0])\u3067\u691c\u51fa\u3002image[0]\u306e\u90e8\u5206\u306f<\/p>\n
It takes an image object (either a CanvasImageSource, Blob, ImageData or an <img> element)<\/p><\/blockquote>\n
\u304c\u5bfe\u5fdc\u3057\u3066\u308b\u307f\u305f\u3044\u3002then\u3060\u304b\u3089\u975e\u540c\u671f\u51e6\u7406\u306a\u3093\u3060\u306a\u3053\u308c\u3002\u305d\u3093\u3067\u3001\u52d5\u304b\u3057\u3066\u307f\u307e\u3059\u3068<\/p>\n
\"\"<\/a><\/p>\n
\u3042\u3063!\u306a\u3093\u304b\u3044\u3044\u611f\u3058\u306a\u6c17\u304c\u3059\u308b!!!!!\u3084\u3063\u3071\u308alandmark(\u76ee\u30fb\u9f3b\u30fb\u53e3)\u306e\u4f4d\u7f6e\u306f\u307e\u3060\u53d6\u308c\u306a\u3044\u307f\u305f\u3044\u3002\u305d\u3057\u305f\u3089canvas\u306e\u3042\u308c\u3084\u3053\u308c\u3084\u3092\u8ffd\u52a0\u3057\u3066\u307f\u308b\u3002<\/p>\n
canvas\u3092\u8ffd\u52a0<\/h3>\n
debugger;\r\nvar image = document.getElementsByTagName('img');\r\nvar ccan = document.createElement('canvas');\r\ndocument.body.insertBefore(ccan, image[0].nextSibling);\r\n\r\nccan.width = image[0].width;\r\nccan.height = image[0].height;\r\n\r\nvar canvas = document.getElementsByTagName('canvas');\r\n\r\nvar ctx = canvas[0].getContext(\"2d\");\r\nctx.drawImage(image[0],\r\n    0, 0, image[0].width, image[0].height,\r\n    0, 0, ccan.width, ccan.height);\r\n\r\nconst scale = ccan.width \/ image[0].width;\r\n\r\ntry {\r\n    if (window.FaceDetector == undefined) {\r\n        console.error('Face Detection not supported');\r\n        throw new Error();\r\n    }\r\n\r\n    console.log('ignition!');\r\n    var faceDetector = new FaceDetector();\r\n    faceDetector.detect(image[0])\r\n        .then(faces => {\r\n            console.log('yes');\r\n\r\n            ctx.lineWidth = 2;\r\n            for (var i = 0; i < faces.length; i++) {\r\n                const face = faces[i].boundingBox;\r\n                ctx.beginPath();\r\n                ctx.strokeStyle = \"red\";\r\n                ctx.rect(Math.floor(face.x * scale),\r\n                    Math.floor(face.y * scale),\r\n                    Math.floor(face.width * scale),\r\n                    Math.floor(face.height * scale));\r\n                ctx.stroke();\r\n            }\r\n        });\r\n\r\n} catch (error) {\r\n\r\n}<\/code><\/pre>\n
\u611a\u76f4\u306b\u66f8\u3044\u305f\u3002\u3048\u30fc\u3068\u307e\u305a\u3001canvas\u30bf\u30b0\u306f\u81ea\u5206\u306e\u65b9\u306b\u306f\u66f8\u3044\u3066\u306a\u304b\u3063\u305f\u306e\u3067createElement\u3067canvas\u3092\u4f5c\u308b\u3002body\u76f4\u4e0b\u3001\u5b50\u3063\u3066\u3044\u3046\u3089\u3057\u3044\u3001\u306bimg\u30bf\u30b0\u304c\u3042\u308b\u306e\u3067img\u30bf\u30b0\u306e\u3059\u3050\u4e0b\u306bcanvas\u304c\u4f5c\u3089\u308c\u308b\u3088\u3046document.body.insertBefore(ccan, image[0].nextSibling)\u3066\u3084\u308b\u3002canvas\u306e\u30b5\u30a4\u30ba\u3068\u753b\u50cf\u30b5\u30a4\u30ba\u3092\u540c\u3058\u306b\u3057\u3066\u3001getContext(“2d”)\u3067\u63cf\u753b\u6a5f\u80fd\u3092\u6709\u52b9\u306b\u3059\u308b\u3002\u3067\u3001drawImage\u3067\u5143\u753b\u50cf\u3092canas\u4e0a\u306b\u63cf\u753b\u3059\u308b\u3002\u30b3\u30d4\u30fc\u307f\u305f\u3044\u306a\u611f\u3058\u304b\u3002\u30b5\u30a4\u30ba\u306e\u6bd4\u7387\u3092\u3068\u3063\u3068\u304f\u3002\u3053\u308c\u306f\u3042\u3093\u307e\u4f7f\u308f\u306a\u304b\u3063\u305f\u3002lineWidth\u3067\u7dda\u306e\u592a\u3055\u30922\u306b\u3057\u3066\u3001faces\u306e\u4e2d\u306e\u9854\u306e\u6570\u3060\u3051\u63cf\u753b\u3057\u3066\u304f\u3002faces.boundingBox\u306b\u306f\u753b\u50cf\u5185\u306e\u9854\u3092\u56f2\u3080\u56db\u89d2\u306e\u5ea7\u6a19\u304c\u5165\u3063\u3066\u308b\u3002x, y\u304c\u56db\u89d2\u306e\u5de6\u4e0a\u306e\u5ea7\u6a19\u3001width, height\u304c\u56db\u89d2\u306e\u5e45\u3068\u9ad8\u3055\u3001top, right, bottom, left\u304c\u305d\u308c\u305e\u308c\u753b\u50cf\u5185\u3067\u306e\u3001\u4e0a\u8fba\u306ey\u5ea7\u6a19\u30fb\u53f3\u8fba\u306ex\u5ea7\u6a19\u30fb\u5e95\u8fba\u306ey\u5ea7\u6a19\u30fb\u5de6\u8fba\u306ex\u5ea7\u6a19\u3068\u601d\u308f\u308c\u308b\u3002\u305d\u3057\u305f\u3089\u63cf\u753b\u306b\u5165\u3063\u3066\u304f\u3002beginPath\u3067\u30ea\u30bb\u30c3\u30c8\u2026\u521d\u671f\u5316\u307f\u305f\u3044\u306a\u3082\u3093\u304b\u306a\u3001\u3057\u3066\u3001strokeStyle\u3067\u8272\u3092\u8a2d\u5b9a\u3002rect\u3067\u77e9\u5f62\u306e\u8a2d\u5b9a\u3001\u5de6\u4e0a\u306e\u5ea7\u6a19\u3068\u5e45\u9ad8\u3092\u3055\u3063\u304d\u306eboundingBox\u306e\u5024\u3092\u5229\u7528\u3059\u308b\u3002Math.floor\u3067\u5207\u308a\u6368\u3066\u6574\u6570\u306b\u3059\u308b\u3002stroke\u3067\u63cf\u753b\u3092\u5b9f\u884c\u3057\u307e\u3059\u3068\u3001\u7d50\u679c\u306f<\/p>\n
\"\"<\/a><\/p>\n
\u3046\u304a\u30fc!\u3067\u304d\u305f!\u3051\u3069\u3042\u308c?\u306a\u3093\u304b2\u4eba\u3044\u308b\u2026\u3002\u306a\u3093\u3067\u304b\u306a\u30fc\u3068\u601d\u3063\u3066codepen\u306e\u4f8b\u898b\u305f\u3089html\u306e\u3044mg\u30bf\u30b0\u306bhidden\u5c5e\u6027\u304c\u4ed8\u3051\u3089\u308c\u3066\u305f\u3002\u305f\u3060\u3053\u306e\u72b6\u614b\u304b\u3089elem.style.visibility = “hidden”\u3059\u308b\u3068\u305d\u3053\u3060\u3051\u307d\u3063\u304b\u308a\u7a7a\u304f\u307f\u305f\u3044\u306a\u611f\u3058\u306b\u306a\u308b\u307f\u305f\u3044\u3002\u306a\u306e\u3067\u3001image[0].style.display = “none”\u3063\u3066\u3057\u305f\u3002<\/p>\n
\"\"<\/a><\/p>\n
1\u4eba\u306b\u306a\u3063\u305f!\u3088\u3063\u3057\u3083\u3001\u305d\u3057\u305f\u3089\u5168\u90e8\u306e\u753b\u50cf\u306b\u3084\u3063\u3066\u307f\u3088\u3046\u3002<\/p>\n
\u30b5\u30f3\u30d7\u30eb\u30da\u30fc\u30b8\u5185\u306e\u753b\u50cf\u5168\u3066\u306b\u9069\u7528<\/h3>\n
debugger;\r\nvar image = document.getElementsByTagName('img');\r\nvar ctx = [];\r\nfor (var j = 0; j < image.length; j++) {\r\n    var ccan = document.createElement('canvas');\r\n    document.body.insertBefore(ccan, image[j].nextSibling);\r\n\r\n    ccan.width = image[j].width;\r\n    ccan.height = image[j].height;\r\n\r\n    var canvas = document.getElementsByTagName('canvas');\r\n\r\n    ctx[j] = canvas[j].getContext(\"2d\");\r\n    ctx[j].drawImage(image[j],\r\n        0, 0, image[j].width, image[j].height,\r\n        0, 0, ccan.width, ccan.height);\r\n\r\n    const scale = ccan.width \/ image[j].width;\r\n\r\n    try {\r\n        if (window.FaceDetector == undefined) {\r\n            console.error('Face Detection not supported');\r\n            throw new Error();\r\n        }\r\n        image[j].style.display = \"none\";\r\n        console.log('ignition!');\r\n        var faceDetector = new FaceDetector();\r\n\r\n        var n = 0;\r\n        faceDetector.detect(image[j])\r\n            .then(faces => {\r\n                console.log('yes');\r\n                \r\n                ctx[n].lineWidth = 2;\r\n                for (var i = 0; i < faces.length; i++) {\r\n                    const face = faces[i].boundingBox;\r\n                    ctx[n].beginPath();\r\n                    ctx[n].strokeStyle = \"red\";\r\n                    ctx[n].rect(Math.floor(face.x * scale),\r\n                        Math.floor(face.y * scale),\r\n                        Math.floor(face.width * scale),\r\n                        Math.floor(face.height * scale));\r\n                    ctx[n].stroke();\r\n                }\r\n                n++;\r\n            });\r\n            \r\n    } catch (error) {\r\n\r\n    }\r\n}<\/code><\/pre>\n
\u304a\u3042\u30fc\u2026\u3001\u52d5\u304f\u3053\u3068\u3092\u76ee\u6307\u3057\u3066\u4e00\u751f\u61f8\u547d\u66f8\u3044\u3066\u305f\u3089\u3059\u3063\u3052\u3047\u6c5a\u306d\u3047\u30b3\u30fc\u30c9\u306b\u306a\u3063\u305f\u2026\u3002for\u3067\u56de\u305b\u3070\u306a\u3093\u3068\u304b\u306a\u3093\u3060\u308d\u3068\u601d\u3063\u3066\u66f8\u304d\u59cb\u3081\u305f\u3051\u3069\u3001for\u306e\u30d6\u30ed\u30c3\u30af\u5185\u306b\u975e\u540c\u671f\u51e6\u7406\u304c\u3042\u308b\u3068\u3001\u975e\u540c\u671f\u51e6\u7406\u5074\u306e\u51e6\u7406\u306e\u5b8c\u4e86\u3092\u5f85\u305f\u305a\u306b\u51e6\u7406\u304c\u9032\u3093\u3067\u3057\u307e\u3046\u306e\u3067\u3001\u601d\u3063\u305f\u3068\u304a\u308a\u306b\u52d5\u304b\u306a\u3044\u3002\u975e\u540c\u671f\u51e6\u7406\u306a\u3093\u3060\u304b\u3089\u5f53\u305f\u308a\u524d\u306a\u3093\u3060\u3051\u3069\u3002\u3069\u3046\u3057\u3088\u3063\u304b\u306a\u30fc\u3068\u30c7\u30d0\u30c3\u30ac\u3067\u30b9\u30c6\u30c3\u30d7\u30a4\u30f3\u3057\u306a\u304c\u3089\u8fbb\u8904\u304c\u5408\u3046\u3088\u3046\u306b\u76f4\u3057\u3066\u3063\u305f\u3089\u3053\u3046\u306a\u3063\u305f\u3002\u30b9\u30c6\u30c3\u30d7\u30a4\u30f3\u3057\u306a\u304c\u3089\u601d\u3063\u305f\u3093\u3060\u3051\u3069\u3001for\u5185\u306e\u30ab\u30a6\u30f3\u30c8\u304c\u5168\u90e8\u7d42\u4e86\u3057\u3066\u304b\u3089\u975e\u540c\u671f\u51e6\u7406\u306e\u4e2d\u3092\u3084\u3063\u3066\u304f\u307f\u305f\u3044\u306a\u9806\u756a\u306a\u306e\u306d\u3002\u305d\u308c\u306f\u305d\u3046\u3044\u3046\u3082\u3093\u306a\u306e\u304b\u3001\u305d\u308c\u3068\u3082\u81ea\u5206\u306e\u66f8\u304d\u65b9\u304c\u3053\u3046\u3060\u304b\u3089\u305d\u3046\u306a\u3063\u305f\u306e\u304b\u3001\u8abf\u3079\u308b\u6c17\u529b\u306f\u6e67\u304d\u307e\u305b\u3093\u3067\u3057\u305f\u3002<\/p>\n
\"\"<\/a><\/p>\n
\u8d64\u7dda\u306e\u6240\u307e\u3067\u884c\u3063\u305f\u3089for\u306e\u6700\u521d\u306b\u623b\u3063\u3066\u7e70\u308a\u8fd4\u3057\u3002\u6761\u4ef6\u5f0f\u6e80\u305f\u3057\u305f\u3089\u3001then\u4ee5\u4e0b\u304c\u5b9f\u884c\u3055\u308c\u3066\u3063\u305f\u3002\u3046\u30fc\u3093\u3001\u3069\u3046\u3059\u308c\u3070\u30ad\u30ec\u30a4\u306b\u66f8\u3051\u308b\u3093\u3060\u308d\u3046\u3001\u691c\u7d22\u8a9e\u53e5\u3082\u5206\u304b\u3089\u3093\u3002\u3042\u3001\u3067\u3001\u7d50\u679c<\/p>\n
\"\"<\/a><\/p>\n
\u3067\u304d\u305f\u2026!\u7cbe\u5ea6\u7684\u306b\u306f\u771f\u6b63\u9762\u3060\u3068\u307e\u3041\u8a8d\u8b58\u3055\u308c\u3066\u3001\u9006\u3055\u9854\u3068\u304b\u3001\u6a2a\u9854\u3068\u304b\u753b\u50cf\u304c\u3061\u3063\u3061\u3083\u304b\u3063\u305f\u308a\u3068\u304b\u3060\u3068\u3042\u3093\u307e\u8a8d\u8b58\u3055\u308c\u306a\u3044\u307f\u305f\u3044\u3002\u307e\u3041\u30b5\u30f3\u30d7\u30eb\u6570=1\u3060\u304b\u3089\u306a\u3093\u3068\u306a\u304f\u3060\u3051\u3069\u3002<\/p>\n
\u53c2\u8003<\/h2>\n
https:\/\/wicg.github.io\/shape-detection-api\/<\/a><\/p>\n
https:\/\/codepen.io\/miguelao\/pen\/PmJWro<\/a><\/p>\n
https:\/\/codepen.io\/oliverjam\/pen\/jzBWNB<\/a><\/p>\n
https:\/\/paul.kinlan.me\/face-detection\/<\/a><\/p>\n
https:\/\/qiita.com\/daisu_yamazaki\/items\/c782f0154fcb784d4406<\/a><\/p>\n
https:\/\/www.mitsue.co.jp\/knowledge\/blog\/frontend\/201810\/29_1635.html<\/a><\/p>\n
https:\/\/lealog.hateblo.jp\/entry\/2018\/08\/24\/153251<\/a><\/p>\n
https:\/\/teratail.com\/questions\/209176<\/a><\/p>\n
https:\/\/developer.mozilla.org\/ja\/docs\/Web\/API\/Document\/createElement<\/a><\/p>\n
https:\/\/qiita.com\/kouh\/items\/dfc14d25ccb4e50afe89<\/a><\/p>\n
https:\/\/pcmanabu.com\/javascript.html<\/a><\/p>\n
https:\/\/stackoverflow.com\/questions\/15318357\/show-hide-image-with-javascript<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
\u9854\u8a8d\u8b58 \u5916\u90e8\u30e9\u30a4\u30d6\u30e9\u30ea\u3068\u304b\u3001WebAPI\u3068\u304b\u3001\u7121\u304f\u3066\u3082\u3001\u30d6\u30e9\u30a6\u30b6\u3060\u3051\u3042\u308c\u3070\u9854\u8a8d\u8b58\u304c\u3067\u304d\u308b\u307f\u305f\u3044\u306a\u306e\u3067\u8a66\u3057\u3066\u307f\u308b\u3002 Shape Detection API flags \u8a66\u9a13\u7684\u306a\u6a5f\u80fd\u306a\u3088\u3046\u3067\u3001\u6709\u52b9\u5316\u3057\u306a\u3044\u3068\u4f7f\u3048\u306a\u3044\u3002 chr … \u7d9a\u304d\u3092\u8aad\u3080 →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":956,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[8],"tags":[93,92,91,96],"class_list":["post-950","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-8","tag-chrome","tag-googlechrome","tag-javascript","tag-shapedetectionapi"],"_links":{"self":[{"href":"https:\/\/dalomo.net\/blog\/wp-json\/wp\/v2\/posts\/950","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dalomo.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dalomo.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dalomo.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dalomo.net\/blog\/wp-json\/wp\/v2\/comments?post=950"}],"version-history":[{"count":6,"href":"https:\/\/dalomo.net\/blog\/wp-json\/wp\/v2\/posts\/950\/revisions"}],"predecessor-version":[{"id":962,"href":"https:\/\/dalomo.net\/blog\/wp-json\/wp\/v2\/posts\/950\/revisions\/962"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dalomo.net\/blog\/wp-json\/wp\/v2\/media\/956"}],"wp:attachment":[{"href":"https:\/\/dalomo.net\/blog\/wp-json\/wp\/v2\/media?parent=950"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dalomo.net\/blog\/wp-json\/wp\/v2\/categories?post=950"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dalomo.net\/blog\/wp-json\/wp\/v2\/tags?post=950"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}