\u3055\u3066\uff0c\u30b9\u30af\u30ea\u30d7\u30c8\u5168\u6587\u3067\u3059\uff0e<\/p>\n
\u7d30\u304b\u3044\u88c5\u98fe\u3084\u8868\u793a\u4f4d\u7f6e\u306f\u81ea\u5206\u3067\u5909\u66f4\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\uff0e<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<title>camera paint<\/title>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no\">\r\n<!-- meta\u30bf\u30b0\u3067\u3000\u30b9\u30de\u30db\u306e\u6319\u52d5\u3092\u5236\u9650\u3057\u3066\u3044\u308b -->\r\n<script src=\"megapix-image.js\"><\/script><!-- \u5916\u90e8\u306e\u4fbf\u5229\u306a\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u8aad\u307f\u8fbc\u3093\u3067\u3044\u308b -->\r\n<\/head>\r\n<body>\r\n<h1>camera<\/h1>\r\n\r\n\u30ab\u30e1\u30e9\u3092\u8d77\u52d5\uff0c\u53c8\u306f\u5199\u771f\u3092\u9078\u629e<br>\r\n<input type=\"file\" accept=\"image\/*\" capture=\"camera\" id=\"mycam\" onchange=\"myCamera(mycam)\"\/>\r\n<br>\r\n<canvas id=\"myCanvas\" style=\"border:1px solid #000000;\"><\/canvas>\r\n\r\n<script type=\"text\/javascript\">\r\nvar canvas;\r\nvar camCanvas;\r\nvar paintSwitch = false;\r\nvar oldX = 0;\r\nvar oldY = 0;\r\nvar myColor = \"rgb(255,0,0)\";\/\/\u8272\u3092\u52d5\u7684\u306b\u5909\u3048\u3089\u308c\u308b\u3088\u3046\u306b\u3059\u308b\u305f\u3081\u306b\u5909\u6570\u5ba3\u8a00\u3057\u3061\u3083\u3046\r\nvar myLine = 0;\r\n\r\n\/\/---\u30b9\u30de\u30db\u306eOS\u53d6\u5f97\r\nvar ua = navigator.userAgent;\/\/User Agent\uff08\u307e\u3041\u6a5f\u7a2e\u540d\u307f\u305f\u3044\u306a\u306e\uff09\u3092\u53d6\u5f97\u3057\u3066\u5909\u6570ua\u306b\u4ee3\u5165\u3057\u306a\u3055\u3044\r\n\/\/---\r\n\r\n\r\n\/\/\u4ee5\u4e0biPhone\u306e\u6642\u306e\u6319\u52d5\r\nif (ua.indexOf(\"iPad\") >= 0 || ua.indexOf(\"iPhone\") >= 0 || ua.indexOf(\"iPod\") >= 0){\r\n\/\/\u7279\u306b\u6319\u52d5\u306f\u307e\u3060\u6c7a\u3081\u3066\u3044\u306a\u3044\r\n}\r\n\r\n\/\/\u4ee5\u4e0bAndroid\u306e\u6642\u306e\u6319\u52d5\r\nif (ua.indexOf(\"Android\") >= 0){\r\n\/\/\u7279\u306b\u6319\u52d5\u306f\u307e\u3060\u6c7a\u3081\u3066\u3044\u306a\u3044\r\n}\r\n\r\n\r\n\/\/---------\r\nwindow.onload = function() {\/\/\u3053\u308c\u8aad\u307f\u8fbc\u3093\u3060\u6642\u306b\uff0c\uff0c\uff0c\r\n syokika();\/\/syokika\u3092\u5b9f\u884c\u3057\u3066\u306d\r\n}\r\n\r\nfunction syokika(){\/\/\u3067\uff0c\u3053\u308c\u304csyokika\u306d\r\ncanvas = document.getElementById(\"myCanvas\");\r\n\r\nvar context = canvas.getContext(\"2d\");\r\n\r\n\/\/--\u3053\u3053\u304b\u3089\u30b9\u30de\u30db\u306e\u30bf\u30c3\u30c1\u306e\u6319\u52d5\uff1c\u2212NEW!!\r\ncanvas.addEventListener(\"touchmove\",myTouchDraw,false);\r\ncanvas.addEventListener(\"touchstart\",myTouchStart,false);\r\ncanvas.addEventListener(\"touchend\",myTouchEnd,false);\r\n}\r\n\r\n\r\n\r\n\/\/--\u30bf\u30c3\u30c1\u306e\u6319\u52d5\u3053\u3053\u304b\u3089\r\nfunction myTouchStart(atai){\r\n paintSwitch = true;\r\n oldX = atai.touches[0].pageX - canvas.offsetLeft;\/\/\u30aa\u30d5\u30bb\u30c3\u30c8\uff08\u305a\u308c\uff09\u306e\u4fee\u6b63\uff1d\u3088\u3053\r\n oldY = atai.touches[0].pageY - canvas.offsetTop;\/\/\u30aa\u30d5\u30bb\u30c3\u30c8\uff08\u305a\u308c\uff09\u306e\u4fee\u6b63\uff1d\u305f\u3066\r\n}\r\n\r\nfunction myTouchEnd(){\r\n\t\tpaintSwitch = false;\r\n}\r\n\/\/--\u30bf\u30c3\u30c1\u306e\u6319\u52d5\u3053\u3053\u307e\u3067\r\n\r\n\/\/--\u30ab\u30e1\u30e9\u306e\u753b\u50cf\r\nfunction myCamera(mycam){\r\n\tvar myFile = mycam.files[0];\r\n\tnew MegaPixImage(myFile).render(myCanvas, { width : 300});\r\n}\r\n\/\/--\u30ab\u30e1\u30e9\u306e\u753b\u50cf\u51e6\u7406\u3053\u3053\u307e\u3067\r\n\r\n\r\nfunction myWidth(myWidth){\r\nmyLine = myWidth;\r\n}\r\n\r\n\r\n\r\nfunction myTouchDraw(atai) {\r\nif (!paintSwitch) return;\r\n\tatai.preventDefault();\/\/\u3053\u308c\u3059\u308b\u3068\u7e26\u30b9\u30af\u30ed\u30fc\u30eb\u304c\u306a\u304f\u306a\u308b\r\n\tvar x = atai.touches[0].pageX - canvas.offsetLeft;\/\/\u306a\u3093\u304b\u30bf\u30c3\u30c1\u306e\u5834\u5408\u306fpageX\u3058\u3083\u306a\u3044\u3068\u3060\u3081\r\n var y = atai.touches[0].pageY - canvas.offsetTop;\/\/\u306a\u3093\u304b\u30bf\u30c3\u30c1\u306e\u5834\u5408\u306fpageY\u3058\u3083\u306a\u3044\u3068\u3060\u3081\r\n var context = canvas.getContext(\"2d\");\r\n context.strokeStyle = myColor;\/\/\u8272\u306f\u52d5\u7684\u306b\u5909\u3048\u3089\u308c\u308b\u3088\u3046\u306b\u5909\u6570\u306b\u3059\u3061\u3083\u3063\u305f\u3088\u306d\r\n context.lineWidth = myLine;\/\/\u7dda\u306e\u592a\u3055\r\n context.beginPath();\/\/\u7dda\u3092\u63cf\u304d\u59cb\u3081\u307e\u3059\r\n context.moveTo(oldX, oldY);\/\/\u3053\u306e\u70b9\u304b\u3089\r\n context.lineTo(x, y);\/\/\u3053\u306e\u70b9\u307e\u3067\r\n context.stroke();\/\/\u63cf\u3044\u3066\u306d\r\n context.closePath();\/\/\u7dda\u306f\u3053\u3053\u307e\u3067\r\n oldX = x;\r\n oldY = y;\r\n}\r\n\r\nfunction myRed(){\r\nmyColor = \"rgb(255,0,0)\";\t\r\n}\r\nfunction myGreen(){\r\nmyColor = \"rgb(0,255,0)\";\t\r\n}\r\nfunction myBlu(){\r\nmyColor = \"rgb(0,0,255)\";\t\r\n}\r\nfunction myYel(){\r\nmyColor = \"rgb(255,255,0)\";\t\r\n}\r\nfunction myGray(){\r\nmyColor = \"rgb(128,128,128)\";\t\r\n}\r\nfunction myBlack(){\r\nmyColor = \"rgb(0,0,0)\";\t\r\n}\r\n\r\n\/\/---\u753b\u50cf\u306b\u5909\u63db\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u3053\u3053\u306bfunction\u304c\u5b9f\u884c\u3055\u308c\u308b\r\nfunction screenshot(){\r\n var myimage = canvas.toDataURL();\r\n \r\n \/\/\u4ee5\u4e0biPhone\u306e\u6642\u306e\u6319\u52d5\u3000\u4e0a\u306e\u65b9\u3067\u6a5f\u7a2e\u3092\u30b0\u30ed\u30fc\u30d0\u30eb\u5909\u6570ua\u306b\u5165\u308c\u3066\u3042\u308b\u306e\u3067if\u3067\u6a5f\u7a2e\u304c\u5206\u304b\u308b\r\nif (ua.indexOf(\"iPad\") >= 0 || ua.indexOf(\"iPhone\") >= 0 || ua.indexOf(\"iPod\") >= 0){\r\n document.getElementById(\"newImg\").src = myimage;\/\/newImge\u3068\u3044\u3046ID\u3092\u63a2\u3057\u3066PNG\u5165\u308c\u3066\u306d\r\n}\r\n\r\n \r\n\/\/\u4ee5\u4e0bAndroid\u306e\u6642\u306e\u6319\u52d5\u3000\u4e0a\u306e\u65b9\u3067\u6a5f\u7a2e\u3092\u30b0\u30ed\u30fc\u30d0\u30eb\u5909\u6570ua\u306b\u5165\u308c\u3066\u3042\u308b\u306e\u3067if\u3067\u6a5f\u7a2e\u304c\u5206\u304b\u308b\r\nif (ua.indexOf(\"Android\") >= 0){\r\n \/\/androimage\u3068\u3044\u3046iD\u304c\u3042\u308bimg\u30bf\u30b0\u306e\u30bd\u30fc\u30b9\uff08URL\u5165\u308c\u308b\u3068\u3053\u308d\uff09\u306b\u5165\u308c\u3061\u3083\u3046\r\n document.getElementById(\"androimage\").src = myimage;\r\n}\r\n\r\n \r\n\r\n}\r\n\/\/---\r\n\r\n<\/script>\r\n\r\n\r\n<form>\r\n<input type=\"button\" value=\"RED\" onclick=\"myRed()\">\r\n<input type=\"button\" value=\"GREEEN\" onclick=\"myGreen()\">\r\n<input type=\"button\" value=\"BLUE\" onclick=\"myBlu()\">\r\n<input type=\"button\" value=\"YELLOW\" onclick=\"myYel()\">\r\n<input type=\"button\" value=\"GRAY\" onClick=\"myGray()\">\r\n<input type=\"button\" value=\"BLACK\" onClick=\"myBlack()\">\r\n<\/form>\r\n<\/ br>\r\n<pre>\r\n\u7dda\u306e\u592a\u3055<input id=\"myRange\" value=\"1\" type=\"range\" max=\"10\" min=\"1\" step=\"0.1\" onChange=\"myWidth(this.value)\" \/>\r\n<\/pre>\r\n<hr>\r\n<form>\r\n<input type=\"button\" value=\"\u753b\u50cf\u306b\u5909\u63db\" onclick=\"screenshot()\">\r\n<!-- onclick\u3067screenshot\u3068\u3044\u3046function\u5b9f\u884c\u3057\u3066\u306d -->\r\n<\/form>\r\n\r\n\r\n\r\n<div><img id=\"newImg\"><\/div>\r\n<!-- iPhone\u7528\u3067\u3059\u3000\u3053\u306eDIV\u306eID\u3092\u63a2\u3057\u3066\u3053\u3053\u306b\u753b\u50cf\u3092\u5165\u308c\u308b -->\r\n<\/ br>\r\n<img src=\"\" id=\"androimage\" border=\"1\"><!-- Android\u306e\u6642\u306e\u753b\u50cf\u4fdd\u5b58\u7528 -->\r\n<pre>\r\n\u753b\u50cf\u3092\u9577\u62bc\u3057\u3057\u3066\u4fdd\u5b58\r\n<\/pre>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n <\/p>\n","protected":false},"excerpt":{"rendered":"
\u3055\u3066\uff0c\u30b9\u30af\u30ea\u30d7\u30c8\u5168\u6587\u3067\u3059\uff0e \u7d30\u304b\u3044\u88c5\u98fe\u3084\u8868\u793a\u4f4d\u7f6e\u306f\u81ea\u5206\u3067\u5909\u66f4\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\uff0e <!DOCTYPE html> <html> <head> <title>camera pa … \u7d9a\u304d\u3092\u8aad\u3080 HTML5\u5165\u9580\u305d\u306e23-\u5199\u771f\u306b\u304a\u7d75\u304b\u304d4<\/span>