{"id":2568,"date":"2025-04-29T16:36:09","date_gmt":"2025-04-29T07:36:09","guid":{"rendered":"https:\/\/www.dogrow.net\/hp\/?p=2568"},"modified":"2025-04-30T06:53:17","modified_gmt":"2025-04-29T21:53:17","slug":"blog161-%e3%82%af%e3%83%aa%e3%83%83%e3%83%97%e3%83%9c%e3%83%bc%e3%83%89%e4%b8%8a%e3%81%ae%e7%94%bb%e5%83%8f%e3%82%92%e8%b2%bc%e3%82%8a%e3%81%a4%e3%81%91%e3%81%a6%e9%80%81%e4%bf%a1%e3%81%99%e3%82%8b","status":"publish","type":"post","link":"https:\/\/www.dogrow.net\/hp\/blog161-%e3%82%af%e3%83%aa%e3%83%83%e3%83%97%e3%83%9c%e3%83%bc%e3%83%89%e4%b8%8a%e3%81%ae%e7%94%bb%e5%83%8f%e3%82%92%e8%b2%bc%e3%82%8a%e3%81%a4%e3%81%91%e3%81%a6%e9%80%81%e4%bf%a1%e3%81%99%e3%82%8b\/","title":{"rendered":"(161) \u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u4e0a\u306e\u753b\u50cf\u3092Web\u30d6\u30e9\u30a6\u30b6\u306b\u8cbc\u308a\u3064\u3051\u3066\u9001\u4fe1\u3059\u308b\u3002"},"content":{"rendered":"

\u30101\u3011\u3084\u308a\u305f\u3044\u3053\u3068<\/h1>\n

\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u4e0a\u306e\u753b\u50cf\u3092\u30d5\u30a1\u30a4\u30eb\u51fa\u529b\u305b\u305a\u3001\u305d\u306e\u307e\u307e\u30b5\u30fc\u30d0\u30fc\u3078\u9001\u308a\u305f\u3044\u3002<\/span><\/p>\n

\u5177\u4f53\u7684\u306b\u306f\u3001\u4ee5\u4e0b\u306e\u624b\u9806\u3067\u5b9f\u884c\u3057\u305f\u3044\u306e\u3060\u3002<\/p>\n

(1) \u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u4e0a\u306b\u753b\u50cf\u3092\u4fdd\u5b58\u3059\u308b\u3002
\n\u3000\u2193
\n(2) Web\u30d6\u30e9\u30a6\u30b6\u4e0a\u3067\u753b\u50cf\u3092\u8cbc\u308a\u4ed8\u3051\u308b\u3002
\n\u3000\u2193
\n(3) [\u9001\u4fe1]\u30dc\u30bf\u30f3\u62bc\u4e0b\u3067\u30b5\u30fc\u30d0\u30fc\u3078\u9001\u4fe1\u3059\u308b\u3002
\n\u3000\u2193
\n(4) \u30b5\u30fc\u30d0\u30fc\u4e0a\u3067\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3059\u308b\u3002<\/p>\n

\u3053\u308c\u3092\u5b9f\u73fe\u3057\u305f\u3044\u3002<\/p>\n

\u30102\u3011\u3084\u3063\u3066\u307f\u308b<\/h1>\n

\"\"<\/p>\n

1) \u30d7\u30ed\u30b0\u30e9\u30e0\u30fb\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/h2>\n
\r\n<!DOCTYPE html>\r\n<html lang="ja">\r\n  <head>\r\n    <meta charset="UTF-8">\r\n    <title>Sample 161<\/title>\r\n  <\/head>\r\n  <body>\r\n    <h2>\u753b\u50cf\u3092[Ctrl]+[V]\u3067\u8cbc\u308a\u4ed8\u3051 \u2192 [Upload]\u30dc\u30bf\u30f3\u3067\u30b5\u30fc\u30d0\u306b\u9001\u4fe1<\/h2>\r\n    <canvas id="canvas" style="border:1px solid black;"><\/canvas><br>\r\n    <button id="uploadBtn">Upload<\/button>\r\n    <script src=".\/script.js"><\/script>\r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n
\r\n\/\/ canvas\u3068context\u3092\u53d6\u5f97\r\nconst canvas = document.getElementById('canvas');\r\nconst ctx = canvas.getContext('2d');\r\nlet pastedImage = null;\r\n\r\n\/\/ \u30da\u30fc\u30b9\u30c8\u30a4\u30d9\u30f3\u30c8\u691c\u77e5\r\ndocument.addEventListener('paste', (event) => {\r\n  const items = (event.clipboardData || event.originalEvent.clipboardData).items;\r\n  for (const item of items) {\r\n    if (item.type.indexOf('image') === -1) {    \/\/ \u975e\u753b\u50cf\u306f\u7121\u8996\r\n      continue;\r\n    }\r\n    const file   = item.getAsFile();\r\n    const reader = new FileReader();\r\n    reader.onload = (e) => {\r\n      const img = new Image();\r\n      img.onload = () => {\r\n        \/\/ canvas\u30b5\u30a4\u30ba\u3092\u753b\u50cf\u306b\u5408\u308f\u305b\u308b\r\n        canvas.width  = img.width;\r\n        canvas.height = img.height;\r\n        ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n        ctx.drawImage(img, 0, 0);\r\n        pastedImage = img;\r\n      };\r\n      img.src = e.target.result;\r\n    };\r\n    reader.readAsDataURL(file);\r\n  }\r\n});\r\n\r\n\/\/ Upload\u30dc\u30bf\u30f3\u62bc\u4e0b\u30a4\u30d9\u30f3\u30c8\u691c\u77e5 \u2192 \u753b\u50cf\u9001\u4fe1\r\ndocument.getElementById('uploadBtn').addEventListener('click', () => {\r\n  if (!pastedImage) {\r\n    alert('\u307e\u305a\u753b\u50cf\u3092\u8cbc\u308a\u4ed8\u3051\u3066\u304f\u3060\u3055\u3044');\r\n    return;\r\n  }\r\n  canvas.toBlob((blob) => {\r\n    const formData = new FormData();\r\n    formData.append('image', blob, 'pasted.png');\r\n    fetch('upload.php', {\r\n      method: 'POST',\r\n      body: formData\r\n    })\r\n    .then(response => response.text())\r\n    .then(result => {\r\n      alert('\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u6210\u529f: ' + result);\r\n    })\r\n    .catch(error => {\r\n      alert('\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u5931\u6557: ' + error);\r\n    });\r\n  }, 'image\/png');\r\n});\r\n<\/pre>\n
\r\n<?php\r\n\/\/ \u753b\u50cf\u304c\u9001\u3089\u308c\u3066\u304d\u305f\u304b\u30c1\u30a7\u30c3\u30af\r\nif (!isset($_FILES['image'])) {\r\n    http_response_code(400);\r\n    echo "No image uploaded.";\r\n    exit;\r\n}\r\n\r\n\/\/ \u4fdd\u5b58\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\r\n$upload_dir = __DIR__ . '\/uploads';\r\n\r\n\/\/ uploads\u30d5\u30a9\u30eb\u30c0\u304c\u306a\u3051\u308c\u3070\u4f5c\u6210\r\nif (!is_dir($upload_dir)) {\r\n    mkdir($upload_dir, 0755, true);\r\n}\r\n\r\n\/\/ \u30d5\u30a1\u30a4\u30eb\u540d\u3092\u30e6\u30cb\u30fc\u30af\u306b\u751f\u6210\r\n$filename = 'img_' . date('Ymd_His') . '_' . bin2hex(random_bytes(5)) . '.png';\r\n\r\n\/\/ \u4fdd\u5b58\u30d1\u30b9\r\n$save_path = $upload_dir . '\/' . $filename;\r\n\r\n\/\/ \u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\r\nif (move_uploaded_file($_FILES['image']['tmp_name'], $save_path)) {\r\n    echo 'Saved as ' . $filename;\r\n} else {\r\n    http_response_code(500);\r\n    echo 'Failed to save file.';\r\n}\r\n?>\r\n<\/pre>\n
\u30103\u3011\u5fdc\u7528\uff1a\u753b\u50cf\u30922\u679a\u9001\u308a\u305f\u3044\u3002<\/h1>\n
\"\"<\/p>\n
1) \u30d7\u30ed\u30b0\u30e9\u30e0\u30fb\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/h2>\n
\r\n<!DOCTYPE html>\r\n<html lang="ja">\r\n  <head>\r\n  <meta charset="UTF-8">\r\n    <title>Sample 161(2)<\/title>\r\n  <\/head>\r\n  <body>\r\n    <h2>\u30da\u30fc\u30b9\u30c8\u5148\u3092\u9078\u3093\u3067\u8cbc\u308a\u4ed8\u3051 \u2192 Upload<\/h2>\r\n\r\n    <div>\r\n      <button id="pasteQuestion">\u8cea\u554f\u3092\u8cbc\u308a\u4ed8\u3051<\/button>\r\n      <button id="pasteAnswer">\u56de\u7b54\u3092\u8cbc\u308a\u4ed8\u3051<\/button>\r\n    <\/div>\r\n\r\n    <div style="margin-top:10px;">\r\n      <h3>\u8cea\u554f\u753b\u50cf<\/h3>\r\n      <canvas id="questionCanvas" style="border:1px solid black;"><\/canvas>\r\n    <\/div>\r\n    <div style="margin-top:10px;">\r\n      <h3>\u56de\u7b54\u753b\u50cf<\/h3>\r\n      <canvas id="answerCanvas" style="border:1px solid black;"><\/canvas>\r\n    <\/div>\r\n\r\n    <div style="margin-top:20px;">\r\n      <button id="uploadBtn">Upload<\/button>\r\n    <\/div>\r\n\r\n    <script src=".\/script.js"><\/script>\r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n
\r\nconst questionCanvas = document.getElementById('questionCanvas');\r\nconst answerCanvas   = document.getElementById('answerCanvas');\r\nconst ctxQuestion = questionCanvas.getContext('2d');\r\nconst ctxAnswer   = answerCanvas.getContext('2d');\r\n\r\n\/\/ \u8cea\u554f\u7528\u306b\u8cbc\u308a\u4ed8\u3051\r\ndocument.getElementById('pasteQuestion').addEventListener('click', () => {\r\n  pasteImageToCanvas(questionCanvas, ctxQuestion);\r\n});\r\n\r\n\/\/ \u56de\u7b54\u7528\u306b\u8cbc\u308a\u4ed8\u3051\r\ndocument.getElementById('pasteAnswer').addEventListener('click', () => {\r\n  pasteImageToCanvas(answerCanvas, ctxAnswer);\r\n});\r\n\r\n\/\/ \u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u304b\u3089\u753b\u50cf\u3092\u8aad\u307f\u53d6\u308a\u3001\u6307\u5b9acanvas\u306b\u8cbc\u308b\r\nasync function pasteImageToCanvas(canvas, ctx) {\r\n  try {\r\n    const items = await navigator.clipboard.read();\r\n    for (const item of items) {\r\n      for (const type of item.types) {\r\n        if (type.startsWith('image\/')) {\r\n          const blob = await item.getType(type);\r\n          const img = new Image();\r\n          img.onload = () => {\r\n            canvas.width  = img.width;\r\n            canvas.height = img.height;\r\n            ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n            ctx.drawImage(img, 0, 0);\r\n          };\r\n          img.src = URL.createObjectURL(blob);\r\n          return; \/\/ \u753b\u50cf\u8cbc\u308a\u4ed8\u3051\u5b8c\u4e86\r\n        }\r\n      }\r\n    }\r\n    alert('\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u753b\u50cf\u304c\u3042\u308a\u307e\u305b\u3093');\r\n  } catch (err) {\r\n    alert('\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u304b\u3089\u753b\u50cf\u3092\u8aad\u307f\u8fbc\u3081\u307e\u305b\u3093\u3067\u3057\u305f: ' + err);\r\n  }\r\n}\r\n\r\n\/\/ Upload\u30dc\u30bf\u30f3\u62bc\u4e0b\u30a4\u30d9\u30f3\u30c8\r\ndocument.getElementById('uploadBtn').addEventListener('click', () => {\r\n  if (questionCanvas.width === 0 || answerCanvas.width === 0) {\r\n    alert('\u8cea\u554f\u3068\u56de\u7b54\u3001\u4e21\u65b9\u306e\u753b\u50cf\u3092\u8cbc\u308a\u4ed8\u3051\u3066\u304f\u3060\u3055\u3044');\r\n    return;\r\n  }\r\n\r\n  const formData = new FormData();\r\n\r\n  questionCanvas.toBlob((blob1) => {\r\n    formData.append('question', blob1, 'question.png');\r\n\r\n    answerCanvas.toBlob((blob2) => {\r\n      formData.append('answer', blob2, 'answer.png');\r\n\r\n      fetch('upload.php', {\r\n        method: 'POST',\r\n        body: formData\r\n      })\r\n      .then(response => response.text())\r\n      .then(result => {\r\n        alert('\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u6210\u529f: ' + result);\r\n        ctxQuestion.clearRect(0, 0, questionCanvas.width, questionCanvas.height);\r\n        ctxAnswer.clearRect(0, 0, answerCanvas.width, answerCanvas.height);\r\n        questionCanvas.width = 0;\r\n        questionCanvas.height = 0;\r\n        answerCanvas.width = 0;\r\n        answerCanvas.height = 0;\r\n      })\r\n      .catch(error => {\r\n        alert('\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u5931\u6557: ' + error);\r\n      });\r\n    }, 'image\/png');\r\n  }, 'image\/png');\r\n});\r\n<\/pre>\n
\r\n<?php\r\n$upload_dir = __DIR__ . '\/uploads';\r\n\r\nif (!is_dir($upload_dir)) {\r\n    mkdir($upload_dir, 0755, true);\r\n}\r\n\r\nfunction save_uploaded_image($field_name, $prefix) {\r\n    global $upload_dir;\r\n    if (!isset($_FILES[$field_name])) {\r\n        return false;\r\n    }\r\n    $filename = $prefix . '_' . date('Ymd_His') . '_' . bin2hex(random_bytes(5)) . '.png';\r\n    $save_path = $upload_dir . '\/' . $filename;\r\n    if (move_uploaded_file($_FILES[$field_name]['tmp_name'], $save_path)) {\r\n        return $filename;\r\n    }\r\n    return false;\r\n}\r\n\r\n$question_saved = save_uploaded_image('question', 'question');\r\n$answer_saved   = save_uploaded_image('answer', 'answer');\r\n\r\nif ($question_saved && $answer_saved) {\r\n    echo "Saved: $question_saved and $answer_saved";\r\n} else {\r\n    http_response_code(500);\r\n    echo "Failed to save images.";\r\n}\r\n?><\/pre>\n
\n","protected":false},"excerpt":{"rendered":"
\u30101\u3011\u3084\u308a\u305f\u3044\u3053\u3068 \u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u4e0a\u306e\u753b\u50cf\u3092\u30d5\u30a1\u30a4\u30eb\u51fa\u529b\u305b\u305a\u3001\u305d\u306e\u307e\u307e\u30b5\u30fc\u30d0\u30fc\u3078\u9001\u308a\u305f\u3044\u3002 \u5177\u4f53\u7684\u306b\u306f\u3001\u4ee5\u4e0b\u306e\u624b\u9806\u3067\u5b9f\u884c\u3057\u305f\u3044\u306e\u3060\u3002 (1) \u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u4e0a\u306b\u753b\u50cf\u3092\u4fdd\u5b58\u3059\u308b\u3002 \u3000\u2193 (2) Web\u30d6\u30e9\u30a6\u30b6\u4e0a\u3067\u753b\u50cf\u3092\u8cbc\u308a\u2026 \u7d9a\u304d\u3092\u8aad\u3080 »<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[47,3,4],"tags":[],"class_list":["post-2568","post","type-post","status-publish","format-standard","hentry","category-canvas","category-htmlcss","category-javascriptjquery"],"views":583,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts\/2568","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/comments?post=2568"}],"version-history":[{"count":7,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts\/2568\/revisions"}],"predecessor-version":[{"id":2577,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts\/2568\/revisions\/2577"}],"wp:attachment":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/media?parent=2568"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/categories?post=2568"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/tags?post=2568"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}