国外主机测评 - 国外VPS，国外服务器，国外云服务器，测评及优惠码
h5页面长按保存图片
在HTML中，长按图片保存并不是一个直接的功能，我们可以通过JavaScript和CSS来实现这个功能，以下是一个简单的实现方法：,1、我们需要创建一个HTML文件，然后在其中添加一个图片元素和一个隐藏的按钮元素，图片元素用于显示图片，隐藏的按钮元素用于触发保存图片的操作。,2、接下来，我们需要编写JavaScript代码来监听图片元素的长按事件，当用户长按图片时，我们将隐藏的图片按钮显示出来，并为其添加点击事件监听器，当用户点击保存按钮时，我们将使用浏览器的下载功能将图片保存到本地。,3、我们需要修改CSS样式，使隐藏的按钮在长按图片时显示出来，我们可以使用 ::before伪元素来实现这个效果。,现在，当你在浏览器中打开这个HTML文件并长按图片时，你应该可以看到一个“保存图片”的按钮，点击这个按钮，图片将被保存到你的本地文件系统中。, ,<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF8″> <meta name=”viewport” content=”width=devicewidth, initialscale=1.0″> <title>长按图片保存</title> <style> #saveBtn { display: none; position: absolute; top: 50%; left: 50%; transform: translate(50%, 50%); cursor: pointer; } </style> </head> <body> <img id=”image” src=”yourimageurl” alt=”yourimagedescription”> <button id=”saveBtn”>保存图片</button> <script> // 在这里编写JavaScript代码 </script> </body> </html>,const image = document.getElementById(‘image’); const saveBtn = document.getElementById(‘saveBtn’); const link = document.createElement(‘a’); link.href = image.src; link.download = ‘image.jpg’; image.addEventListener(‘longpress’, () => { saveBtn.style.display = ‘block’; saveBtn.addEventListener(‘click’, () => { saveBtn.style.display = ‘none’; link.click(); }); });,#saveBtn::before { content: ‘保存图片’; display: block; padding: 10px; backgroundcolor: rgba(0, 0, 0, 0.7); color: white; borderradius: 5px; },
