refactor: 移除长按保存图片功能及相关代码
移除不再需要的长按保存图片功能,包括HTML中的提示元素、CSS样式以及JS中的相关逻辑 将保存图片提示改为点击保存,简化用户操作流程
This commit is contained in:
@@ -526,27 +526,6 @@ html, body {
|
|||||||
display: none;
|
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 {
|
.context-menu {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|||||||
@@ -110,8 +110,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 长按提示 -->
|
|
||||||
<div class="long-press-tip" id="longPressTip">长按屏幕可保存图片</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<input type="file" id="fileInput" accept="image/*" hidden>
|
<input type="file" id="fileInput" accept="image/*" hidden>
|
||||||
|
|||||||
45
js/script.js
45
js/script.js
@@ -261,9 +261,6 @@
|
|||||||
handleContainerClick(e);
|
handleContainerClick(e);
|
||||||
});
|
});
|
||||||
|
|
||||||
// 初始化长按保存(只在3:5预览区域)
|
|
||||||
initLongPressSave();
|
|
||||||
|
|
||||||
// 初始化右键菜单(只在3:5预览区域)
|
// 初始化右键菜单(只在3:5预览区域)
|
||||||
initContextMenu();
|
initContextMenu();
|
||||||
|
|
||||||
@@ -276,13 +273,7 @@
|
|||||||
// 加载默认背景图
|
// 加载默认背景图
|
||||||
loadDefaultBackground();
|
loadDefaultBackground();
|
||||||
|
|
||||||
// 显示长按提示
|
|
||||||
setTimeout(() => {
|
|
||||||
longPressTip.classList.add('show');
|
|
||||||
setTimeout(() => {
|
|
||||||
longPressTip.classList.remove('show');
|
|
||||||
}, 3000);
|
|
||||||
}, 1000);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 加载默认背景图
|
// 加载默认背景图
|
||||||
@@ -1707,38 +1698,6 @@
|
|||||||
editorToolbar.classList.remove('active');
|
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预览区域)
|
// 初始化右键菜单(只在3:5预览区域)
|
||||||
function initContextMenu() {
|
function initContextMenu() {
|
||||||
// 只在图片容器上禁用默认右键菜单并显示自定义菜单
|
// 只在图片容器上禁用默认右键菜单并显示自定义菜单
|
||||||
@@ -2025,7 +1984,7 @@
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
const tipText = document.createElement('p');
|
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 = `
|
tipText.style.cssText = `
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
|||||||
Reference in New Issue
Block a user