refactor: 移除长按保存图片功能及相关代码
移除不再需要的长按保存图片功能,包括HTML中的提示元素、CSS样式以及JS中的相关逻辑 将保存图片提示改为点击保存,简化用户操作流程
This commit is contained in:
@@ -526,27 +526,6 @@ html, body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 长按提示 */
|
||||
.long-press-tip {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 8px 16px;
|
||||
background: rgba(0,0,0,0.7);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
border-radius: 16px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.long-press-tip.show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 右键菜单 */
|
||||
.context-menu {
|
||||
position: fixed;
|
||||
|
||||
@@ -110,8 +110,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 长按提示 -->
|
||||
<div class="long-press-tip" id="longPressTip">长按屏幕可保存图片</div>
|
||||
|
||||
</div>
|
||||
|
||||
<input type="file" id="fileInput" accept="image/*" hidden>
|
||||
|
||||
45
js/script.js
45
js/script.js
@@ -261,9 +261,6 @@
|
||||
handleContainerClick(e);
|
||||
});
|
||||
|
||||
// 初始化长按保存(只在3:5预览区域)
|
||||
initLongPressSave();
|
||||
|
||||
// 初始化右键菜单(只在3:5预览区域)
|
||||
initContextMenu();
|
||||
|
||||
@@ -276,13 +273,7 @@
|
||||
// 加载默认背景图
|
||||
loadDefaultBackground();
|
||||
|
||||
// 显示长按提示
|
||||
setTimeout(() => {
|
||||
longPressTip.classList.add('show');
|
||||
setTimeout(() => {
|
||||
longPressTip.classList.remove('show');
|
||||
}, 3000);
|
||||
}, 1000);
|
||||
|
||||
}
|
||||
|
||||
// 加载默认背景图
|
||||
@@ -1707,38 +1698,6 @@
|
||||
editorToolbar.classList.remove('active');
|
||||
}
|
||||
|
||||
// 初始化长按保存(只在3:5预览区域)
|
||||
function initLongPressSave() {
|
||||
// 只在图片容器上触发长按保存
|
||||
imageContainer.addEventListener('touchstart', (e) => {
|
||||
// 如果触摸的是输入框,不触发长按保存
|
||||
if (e.target.closest('.text-input')) {
|
||||
return;
|
||||
}
|
||||
|
||||
longPressTimer = setTimeout(() => {
|
||||
if (navigator.vibrate) {
|
||||
navigator.vibrate(50);
|
||||
}
|
||||
saveImage();
|
||||
}, 800);
|
||||
}, { passive: true });
|
||||
|
||||
imageContainer.addEventListener('touchend', () => {
|
||||
if (longPressTimer) {
|
||||
clearTimeout(longPressTimer);
|
||||
longPressTimer = null;
|
||||
}
|
||||
});
|
||||
|
||||
imageContainer.addEventListener('touchmove', () => {
|
||||
if (longPressTimer) {
|
||||
clearTimeout(longPressTimer);
|
||||
longPressTimer = null;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化右键菜单(只在3:5预览区域)
|
||||
function initContextMenu() {
|
||||
// 只在图片容器上禁用默认右键菜单并显示自定义菜单
|
||||
@@ -2025,7 +1984,7 @@
|
||||
`;
|
||||
|
||||
const tipText = document.createElement('p');
|
||||
tipText.innerHTML = '长按图片保存到相册<br><span style="font-size:14px;opacity:0.8">(预览已缩放,实际保存为高清原图)</span>';
|
||||
tipText.innerHTML = '预览图片<br><span style="font-size:14px;opacity:0.8">(点击保存到相册)</span>';
|
||||
tipText.style.cssText = `
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
|
||||
Reference in New Issue
Block a user