update html

html/css/main.css

@@ -353,9 +353,10 @@ canvas.text-placement-mode {
     cursor: text !important; /* Force text cursor */
 }
 
-.canvas-tooltip {
+.canvas-title {
     display: none;
     text-align: center;
+    margin-bottom: 5px;
     color: var(--primary-color);
 }
 

html/js/main.js

@@ -143,11 +143,6 @@ async function sendimg() {
   const driver = document.getElementById("epddriver").value;
   const mode = document.getElementById('dithering').value;
 
-  if (mode === '') {
-    alert('请选择一种取模算法！');
-    return;
-  }
-
   startTime = new Date().getTime();
   status.parentElement.style.display = "block";
 
@@ -343,16 +338,15 @@ function intToHex(intIn) {
   return stringOut.substring(2, 4) + stringOut.substring(0, 2);
 }
 
-async function update_image() {
-  let image = new Image();;
+async function update_image(clear = false) {
   const image_file = document.getElementById('image_file');
-  if (image_file.files.length > 0) {
-    const file = image_file.files[0];
-    image.src = URL.createObjectURL(file);
-  } else {
-    image.src = document.getElementById('demo-img').src;
-  }
+  if (image_file.files.length == 0) return;
 
+  if (clear) clear_canvas();
+
+  const file = image_file.files[0];
+  let image = new Image();;
+  image.src = URL.createObjectURL(file);
   image.onload = function(event) {
     URL.revokeObjectURL(this.src);
     ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
@@ -361,7 +355,7 @@ async function update_image() {
 }
 
 function clear_canvas() {
-  if(confirm('确认清除画布内容?')) {
+  if (confirm('清除画布已有内容?')) {
     ctx.fillStyle = 'white';
     ctx.fillRect(0, 0, canvas.width, canvas.height);
     return true;
@@ -384,6 +378,7 @@ function filterDitheringOptions() {
   const driver = document.getElementById('epddriver').value;
   const dithering = document.getElementById('dithering');
   let currentOptionStillValid = false;
+  let lastValidOptionValue = null;
 
   for (let optgroup of dithering.getElementsByTagName('optgroup')) {
     const drivers = optgroup.getAttribute('data-driver').split('|');
@@ -392,12 +387,13 @@ function filterDitheringOptions() {
       if (show) {
         option.removeAttribute('disabled');
         if (option.value == dithering.value) currentOptionStillValid = true;
+        lastValidOptionValue = option.value;
       } else {
         option.setAttribute('disabled', 'disabled');
       }
     }
   }
-  if (!currentOptionStillValid) dithering.value = '';
+  if (!currentOptionStillValid) dithering.value = lastValidOptionValue;
 }
 
 function checkDebugMode() {
@@ -422,9 +418,9 @@ document.body.onload = () => {
   canvas = document.getElementById('canvas');
   ctx = canvas.getContext("2d");
 
-  updateButtonStatus();
-  update_image();
-  filterDitheringOptions();
+  ctx.fillStyle = 'white';
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
 
+  updateButtonStatus();
   checkDebugMode();
 }

html/js/paint.js

@@ -15,30 +15,38 @@ let dragOffsetY = 0;
 let textBold = false; // Track if text should be bold
 let textItalic = false; // Track if text should be italic
 
+function setCanvasTitle(title) {
+  const canvasTitle = document.querySelector('.canvas-title');
+  if (canvasTitle) {
+    canvasTitle.innerText = title;
+    canvasTitle.style.display = title && title !== '' ? 'block' : 'none';
+  }
+}
+
 function initPaintTools() {
   document.getElementById('brush-mode').addEventListener('click', () => {
     if (currentTool === 'brush') {
-      setActiveTool(null);
+      setActiveTool(null, '');
     } else {
-      setActiveTool('brush');
+      setActiveTool('brush', '画笔模式');
       brushColor = document.getElementById('brush-color').value;
     }
   });
   
   document.getElementById('eraser-mode').addEventListener('click', () => {
     if (currentTool === 'eraser') {
-      setActiveTool(null);
+      setActiveTool(null, '');
     } else {
-      setActiveTool('eraser');
+      setActiveTool('eraser', '橡皮擦');
       brushColor = "#FFFFFF";
     }
   });
 
   document.getElementById('text-mode').addEventListener('click', () => {
     if (currentTool === 'text') {
-      setActiveTool(null);
+      setActiveTool(null, '');
     } else {
-      setActiveTool('text');
+      setActiveTool('text', '插入文字');
       brushColor = document.getElementById('brush-color').value;
     }
   });
@@ -90,13 +98,11 @@ function initPaintTools() {
   updateToolUI();
 }
 
-function setActiveTool(tool) {
+function setActiveTool(tool, title) {
   currentTool = tool;
   updateToolUI();
 
-  // clear and hide tooltip
-  document.querySelector('.canvas-tooltip').innerText = '';
-  document.querySelector('.canvas-tooltip').style.display = 'none';
+  setCanvasTitle(title);
 
   // Cancel any pending text placement
   cancelTextPlacement();
@@ -330,8 +336,7 @@ function startTextPlacement() {
   isTextPlacementMode = true;
 
   // Add visual feedback
-  document.querySelector('.canvas-tooltip').style.display = 'block';
-  document.querySelector('.canvas-tooltip').innerText = '点击画布放置文字';
+  setCanvasTitle('点击画布放置文字');
   canvas.classList.add('text-placement-mode');
 }
 
@@ -388,8 +393,7 @@ function placeText(e) {
   document.getElementById('text-input').value = '';
   isTextPlacementMode = false;
   canvas.classList.remove('text-placement-mode');
-  document.querySelector('.canvas-tooltip').style.display = 'block';
-  document.querySelector('.canvas-tooltip').innerText = '鼠标拖动新添加文字可调整位置';
+  setCanvasTitle('拖动新添加文字可调整位置');
 }
 
 function redrawTextElements() {