js img点击下载
时间: 2023-09-14 13:15:51 浏览: 48
您可以使用以下的Javascript代码来实现点击图片下载:
```javascript
function downloadImage(url) {
var link = document.createElement("a");
link.href = url;
link.download = "image.jpg";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
var img = document.getElementById("myImg");
img.addEventListener("click", function() {
downloadImage(this.src);
});
```
在上面的代码中,我们创建了一个`downloadImage`函数,它接收一个URL作为参数,然后使用`<a>`元素创建一个下载链接。我们设置了链接的`href`属性为传入的URL,将`download`属性设置为我们想要的文件名(这里是"image.jpg"),然后将链接添加到文档中。接着,我们模拟了用户点击链接的操作,触发了`click`事件。最后,我们从文档中删除了链接,以确保它不会留在页面上。
在图片元素上,我们添加了一个事件监听器,当用户单击图片时,它会调用`downloadImage`函数并将图片的URL作为参数传递给它。这将使浏览器自动下载该图片并保存为"image.jpg"文件。
相关问题
js点击按钮img旋转
你可以使用CSS3的`transform`属性来实现图片旋转效果,然后通过JavaScript来控制按钮的点击事件。
HTML代码:
```html
<button id="rotate-btn">旋转图片</button>
<img id="image" src="your-image-source.jpg">
```
CSS代码:
```css
#image {
transition: transform 0.5s ease;
}
.rotate {
transform: rotate(180deg);
}
```
JavaScript代码:
```javascript
const rotateBtn = document.getElementById('rotate-btn');
const image = document.getElementById('image');
rotateBtn.addEventListener('click', () => {
image.classList.toggle('rotate');
});
```
当你点击按钮时,JavaScript会为图片添加或移除`rotate`类,从而触发CSS中的旋转效果。
js img元素,当点击图片时
,如何实现弹出模态框显示原图?
你可以在img的onclick事件中添加代码实现弹出模态框,例如:
<img src="图片地址" onclick="showModal(this)">
然后在js代码中定义showModal函数,例如:
function showModal(img) {
var modal = document.createElement('div');
modal.style.position = 'fixed';
modal.style.top = '0';
modal.style.right = '0';
modal.style.bottom = '0';
modal.style.left = '0';
modal.style.zIndex = '9999';
modal.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
modal.style.display = 'flex';
modal.style.alignItems = 'center';
modal.style.justifyContent = 'center';
modal.onclick = function() {
modal.parentNode.removeChild(modal);
}
var modalImg = document.createElement('img');
modalImg.src = img.src;
modalImg.style.maxWidth = '90%';
modalImg.style.maxHeight = '90%';
modal.appendChild(modalImg);
document.body.appendChild(modal);
}
这样,当点击图片时,就会弹出一个模态框,显示原图。