{"id":18785,"date":"2000-04-08T15:34:00","date_gmt":"2000-04-08T07:34:00","guid":{"rendered":"https:\/\/www.csie.ntnu.edu.tw\/?p=18785"},"modified":"2026-04-15T15:43:07","modified_gmt":"2026-04-15T07:43:07","slug":"18785","status":"publish","type":"post","link":"https:\/\/www.csie.ntnu.edu.tw\/index.php\/2000\/04\/08\/18785\/","title":{"rendered":"\u5e2b\u5927\u8cc7\u5de540\u982d\u8cbc\u7522\u751f\u5668"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">\u5e2b\u5927\u8cc7\u5de540\u982d\u8cbc\u7522\u751f\u5668<\/h2>\n\n\n\n<p>\u9ede\u64ca\u4e0b\u65b9\u85cd\u8272\u6309\u9215\u4e0a\u50b3\u7167\u7247\uff0c\u88fd\u4f5c\u4f60\u7684\u5c08\u5c6c\u982d\u8cbc<br>\u4f7f\u7528\u6ed1\u9f20\u6efe\u8f2a\/\u96d9\u6307\u7e2e\u653e\uff0c\u53ef\u4ee5\u653e\u5927\u6216\u7e2e\u5c0f\u5716\u7247<\/p>\n\n\n\n<div id=\"csie40-avatar-app\">\n  <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/cropperjs\/1.5.13\/cropper.min.css\" rel=\"stylesheet\">\n  \n  <style>\n    \/* \u9650\u5b9a\u4f5c\u7528\u7bc4\u570d\uff0c\u907f\u514d\u5f71\u97ff WordPress \u5168\u57df\u6a23\u5f0f *\/\n    #csie40-avatar-app {\n      font-family: inherit; \/* \u7e7c\u627f WordPress \u539f\u672c\u7684\u5b57\u9ad4 *\/\n      text-align: center;\n      padding: 15px 0;\n      background-color: transparent;\n    }\n    #csie40-avatar-app * {\n      box-sizing: border-box;\n    }\n    \n    \/* \u6539\u540d\u70ba csie40-container \u907f\u514d\u8ddf WP \u7684\u4f48\u666f\u4e3b\u984c\u885d\u7a81 *\/\n    #csie40-avatar-app .csie40-container {\n      width: 100%;\n      max-width: 500px;\n      margin: 0 auto;\n      background: white;\n      padding: 20px 15px;\n      border-radius: 12px;\n      box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n    }\n    #csie40-avatar-app h2 {\n      font-size: 1.3rem;\n      margin-top: 0;\n      margin-bottom: 15px;\n      color: #333;\n    }\n    #csie40-avatar-app p.instruction {\n      font-size: 0.95rem;\n      color: #666;\n      margin-bottom: 20px;\n    }\n\n    #csie40-avatar-app .upload-btn-wrapper {\n      position: relative;\n      overflow: hidden;\n      display: inline-block;\n      width: 100%;\n      margin-bottom: 10px;\n    }\n    #csie40-avatar-app .upload-btn-wrapper .btn {\n      width: 100%;\n      border: none;\n      color: white;\n      background-color: #4285F4;\n      padding: 14px 20px;\n      border-radius: 8px;\n      font-size: 16px;\n      font-weight: bold;\n      cursor: pointer;\n      transition: background-color 0.2s;\n    }\n    #csie40-avatar-app .upload-btn-wrapper .btn:active {\n      background-color: #3367d6;\n    }\n    #csie40-avatar-app .upload-btn-wrapper input[type=file] {\n      font-size: 100px;\n      position: absolute;\n      left: 0;\n      top: 0;\n      opacity: 0;\n      cursor: pointer;\n      height: 100%;\n      width: 100%;\n    }\n\n    \/* --- \u65b0\u589e\uff1a\u9810\u89bd\u5340\u584a\u7684\u6a23\u5f0f --- *\/\n    #csie40-avatar-app #defaultPreview {\n      margin: 15px auto;\n      width: 100%;\n      text-align: center;\n    }\n    #csie40-avatar-app #defaultPreview img {\n      max-width: 100%;\n      border-radius: 8px;\n      border: 1px dashed #ccc; \/* \u52a0\u500b\u865b\u7dda\u908a\u6846\u8b93\u5b83\u770b\u8d77\u4f86\u50cf\u662f\u7b49\u5f85\u586b\u6eff\u7684\u76f8\u6846 *\/\n    }\n    #csie40-avatar-app #defaultPreview p {\n      font-size: 0.9rem;\n      color: #888;\n      margin-top: 8px;\n    }\n    \/* -------------------------- *\/\n\n    #csie40-avatar-app #workspace {\n      display: none;\n      margin: 15px auto;\n      width: 100%;\n      height: 55vh;\n      max-height: 400px;\n      min-height: 250px;\n      background-color: #e9ecef;\n      border-radius: 8px;\n      overflow: hidden;\n    }\n    #csie40-avatar-app img#imageToCrop {\n      display: block;\n      max-width: 100%;\n    }\n\n    #csie40-avatar-app #canvas-container {\n      display: none;\n    }\n    #csie40-avatar-app canvas {\n      width: 100% !important;\n      height: 100% !important;\n      display: block;\n    }\n\n    #csie40-avatar-app #downloadBtn {\n      width: 100%;\n      background-color: #34A853;\n      color: white;\n      border: none;\n      padding: 14px 20px;\n      border-radius: 8px;\n      font-size: 16px;\n      font-weight: bold;\n      margin-top: 10px;\n      cursor: pointer;\n    }\n    #csie40-avatar-app #downloadBtn:disabled {\n      background-color: #ccc;\n      cursor: not-allowed;\n    }\n\n    #csie40-avatar-app .cropper-dashed, \n    #csie40-avatar-app .cropper-center {\n      display: none !important;\n    }\n\n    #csie40-avatar-app .cropper-view-box::after {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background-image: url('https:\/\/www.csie.ntnu.edu.tw\/wp-content\/uploads\/2000\/04\/frame-1.png');\n      background-size: cover;\n      pointer-events: none;\n    }\n  <\/style>\n\n  <div class=\"csie40-container\">\n    \n    <div class=\"upload-btn-wrapper\">\n      <button class=\"btn\">\u9078\u64c7\u7167\u7247<\/button>\n      <input type=\"file\" id=\"imageLoader\" accept=\"image\/*\"\/>\n    <\/div>\n\n    <div id=\"defaultPreview\">\n      <img decoding=\"async\" src=\"https:\/\/www.csie.ntnu.edu.tw\/wp-content\/uploads\/2000\/04\/frame-1.png\" alt=\"\u5916\u6846\u9810\u89bd\">\n    <\/div>\n    <div id=\"workspace\">\n      <img decoding=\"async\" id=\"imageToCrop\" src=\"\" alt=\"Picture\">\n    <\/div>\n\n    <div id=\"canvas-container\">\n      <canvas id=\"imageCanvas\" width=\"800\" height=\"800\"><\/canvas>\n    <\/div>\n\n    <div>\n      <button id=\"downloadBtn\" disabled>\u5b8c\u6210\u4e26\u4e0b\u8f09\u982d\u8cbc<\/button>\n    <\/div>\n  <\/div>\n\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/cropperjs\/1.5.13\/cropper.min.js\"><\/script>\n  \n  <script>\n    \/\/ \u4f7f\u7528 IIFE (\u7acb\u5373\u57f7\u884c\u51fd\u5f0f) \u5c01\u88dd\u8b8a\u6578\uff0c\u907f\u514d\u6c61\u67d3 WordPress \u5168\u57df\u8b8a\u6578\n    (function() {\n      var canvas = document.getElementById('imageCanvas');\n      var ctx = canvas.getContext('2d');\n      \n      var frameImage = new Image();\n      var isFrameLoaded = false;\n      var cropper = null;\n      var imageToCrop = document.getElementById('imageToCrop');\n      var workspace = document.getElementById('workspace');\n      var defaultPreview = document.getElementById('defaultPreview'); \/\/ \u65b0\u589e\uff1a\u53d6\u5f97\u9810\u89bd\u5340\u584a\u5143\u7d20\n\n      frameImage.onload = function() {\n        isFrameLoaded = true;\n        canvas.width = frameImage.width || 800;\n        canvas.height = frameImage.height || 800;\n        drawFrameOnly();\n      };\n      frameImage.onerror = function() {\n        console.error('\u7121\u6cd5\u8f09\u5165\u5916\u6846\u5716\u7247\u3002');\n      };\n      \n      \/\/ \u2605 \u78ba\u4fdd\u8de8\u57df\u8acb\u6c42\u4e0d\u53d7\u963b\u64cb\n      frameImage.crossOrigin = \"Anonymous\";\n      frameImage.src = 'https:\/\/www.csie.ntnu.edu.tw\/wp-content\/uploads\/2000\/04\/frame-1.png';\n\n      var imageLoader = document.getElementById('imageLoader');\n      imageLoader.addEventListener('change', handleImage, false);\n\n      function handleImage(e){\n        var files = e.target.files;\n        if (files && files.length > 0) {\n          var file = files[0];\n          var reader = new FileReader();\n          \n          reader.onload = function(event){\n            defaultPreview.style.display = 'none'; \/\/ \u65b0\u589e\uff1a\u6210\u529f\u8b80\u53d6\u7167\u7247\u5f8c\uff0c\u96b1\u85cf\u9810\u89bd\u5340\u584a\n            workspace.style.display = 'block';\n            imageToCrop.src = event.target.result;\n            \n            if (cropper) {\n              cropper.destroy();\n            }\n            \n            cropper = new Cropper(imageToCrop, {\n              aspectRatio: 1, \n              viewMode: 0,             \n              dragMode: 'move',        \n              cropBoxMovable: false,   \n              cropBoxResizable: false, \n              guides: false,           \n              highlight: false,        \n              responsive: true,\n              restore: false,\n              ready: function() {\n                var containerData = cropper.getContainerData();\n                var size = Math.min(containerData.width, containerData.height) ; \n                cropper.setCropBoxData({\n                  width: size,\n                  height: size,\n                  left: (containerData.width - size) \/ 2,\n                  top: (containerData.height - size) \/ 2\n                });\n              }\n            });\n            document.getElementById('downloadBtn').disabled = false;\n          };\n          reader.readAsDataURL(file);\n        }\n      }\n\n      function drawFrameOnly() {\n        ctx.clearRect(0, 0, canvas.width, canvas.height);\n        if (isFrameLoaded) {\n          ctx.drawImage(frameImage, 0, 0, canvas.width, canvas.height);\n        }\n      }\n\n      var downloadBtn = document.getElementById('downloadBtn');\n      downloadBtn.addEventListener('click', function() {\n        if (!cropper || !isFrameLoaded) return;\n\n        var croppedCanvas = cropper.getCroppedCanvas({\n          width: canvas.width,\n          height: canvas.height\n        });\n\n        ctx.clearRect(0, 0, canvas.width, canvas.height);\n        \n        ctx.fillStyle = '#ffffff'; \n        ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n        ctx.drawImage(croppedCanvas, 0, 0, canvas.width, canvas.height);\n        ctx.drawImage(frameImage, 0, 0, canvas.width, canvas.height);\n\n        var dataURL = canvas.toDataURL('image\/png');\n        var link = document.createElement('a');\n        link.download = 'csie40_avatar.png'; \n        link.href = dataURL;\n        link.click();\n      });\n    })();\n  <\/script>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>\u6b61\u8fce\u4e0b\u8f09\u4e0b\u65b9\u7279\u6548\u6846\u53ca\u7c3d\u540d\u6a94\u4f7f\u7528<br><a href=\"https:\/\/www.csie.ntnu.edu.tw\/wp-content\/uploads\/2000\/04\/frame-1.png\">\u7279\u6548\u6846\u5927\u5716\u4e0b\u8f09.png<\/a><br><a href=\"https:\/\/www.csie.ntnu.edu.tw\/wp-content\/uploads\/2000\/04\/\u7c3d\u540d\u6a94.png\">\u7c3d\u540d\u6a94.png<\/a><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5e2b\u5927\u8cc7\u5de540\u982d\u8cbc\u7522\u751f\u5668 \u9ede\u64ca\u4e0b\u65b9\u85cd\u8272\u6309\u9215\u4e0a\u50b3\u7167\u7247\uff0c\u88fd\u4f5c\u4f60\u7684\u5c08\u5c6c\u982d\u8cbc\u4f7f\u7528\u6ed1\u9f20\u6efe\u8f2a\/\u96d9\u6307\u7e2e\u653e\uff0c\u53ef\u4ee5\u653e\u5927\u6216\u7e2e\u5c0f\u5716\u7247  [&hellip;]<\/p>\n","protected":false},"author":10,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[1],"tags":[],"class_list":["post-18785","post","type-post","status-publish","format-standard","hentry","category-news","entry"],"_links":{"self":[{"href":"https:\/\/www.csie.ntnu.edu.tw\/index.php\/wp-json\/wp\/v2\/posts\/18785","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.csie.ntnu.edu.tw\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.csie.ntnu.edu.tw\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.csie.ntnu.edu.tw\/index.php\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.csie.ntnu.edu.tw\/index.php\/wp-json\/wp\/v2\/comments?post=18785"}],"version-history":[{"count":13,"href":"https:\/\/www.csie.ntnu.edu.tw\/index.php\/wp-json\/wp\/v2\/posts\/18785\/revisions"}],"predecessor-version":[{"id":18894,"href":"https:\/\/www.csie.ntnu.edu.tw\/index.php\/wp-json\/wp\/v2\/posts\/18785\/revisions\/18894"}],"wp:attachment":[{"href":"https:\/\/www.csie.ntnu.edu.tw\/index.php\/wp-json\/wp\/v2\/media?parent=18785"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.csie.ntnu.edu.tw\/index.php\/wp-json\/wp\/v2\/categories?post=18785"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.csie.ntnu.edu.tw\/index.php\/wp-json\/wp\/v2\/tags?post=18785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}