当前位置：首页 > 行业动态 > 正文

html保存图片按钮

admin
行业动态
2025-05-13
9

在HTML中通过` 标签结合download 属性实现保存图片按钮，示例代码：保存图片`（共49字

使用`<a>`标签的`download`属性

直接通过<a>标签包裹图片，并设置download属性，浏览器会自动触发下载行为。

步骤	代码示例	说明
包裹图片	`<a href="image.jpg" download>`	将图片路径作为`href`属性
插入图片	`<img src="image.jpg" alt="图片">`	正常显示图片
关闭标签	`</a>`	形成可点击区域

<a href="image.jpg" download>
  <img src="image.jpg" alt="下载图片" style="width:200px;">
</a>

JavaScript动态创建下载链接

适用于需要动态生成文件名或处理多张图片的场景。

html保存图片按钮第1张

步骤	代码示例	说明
获取图片元素	`const img = document.getElementById('targetImage');`	通过ID获取目标图片
创建临时链接	`const link = document.createElement('a');`	生成`<a>`
设置下载属性	`link.href = img.src; link.download = 'image.jpg';`	指定下载地址和文件名
触发点击事件	`link.click();`	程序化模拟点击

document.getElementById('saveBtn').addEventListener('click', function() {
  const img = document.getElementById('targetImage');
  const link = document.createElement('a');
  link.href = img.src;
  link.download = 'downloaded-image.jpg';
  link.click();
});

使用Canvas导出图片（适合合成图片）

当需要保存经过处理的图片（如添加文字、合并图层）时使用。

步骤	代码示例	说明
绘制图片到Canvas	`const canvas = document.createElement('canvas');` `ctx.drawImage(img, 0, 0);`	将图片绘制到画布
转换图片格式	`canvas.toBlob(function(blob) {...});`	生成二进制数据
创建下载链接	`const url = URL.createObjectURL(blob);` `link.href = url;`	生成临时URL

document.getElementById('saveCanvasBtn').addEventListener('click', function() {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const img = document.getElementById('canvasImage');
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  canvas.toBlob(function(blob) {
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'canvas-image.png';
    link.click();
  }, 'image/png');
});