vue实现图片保存
使用 Canvas 绘制并保存图片
通过 Canvas 将 DOM 元素或图片转换为图像数据，利用 toDataURL 方法生成 Base64 编码，再通过创建下载链接实现保存。
<template>
<div>
<img ref="image" src="your-image.jpg" />
<button @click="saveImage">保存图片</button>
</div>
</template>
<script>
export default {
methods: {
saveImage() {
const canvas = document.createElement('canvas');
const img = this.$refs.image;
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
const link = document.createElement('a');
link.download = 'image.png';
link.href = canvas.toDataURL('image/png');
link.click();
}
}
};
</script>使用第三方库 html2canvas
html2canvas 可将任意 DOM 元素转换为 Canvas，适用于复杂内容的截图保存。
<template>
<div ref="content">
<!-- 需要保存的内容 -->
<h1>标题</h1>
<img src="example.jpg" />
</div>
<button @click="capture">保存为图片</button>
</template>
<script>
import html2canvas from 'html2canvas';
export default {
methods: {
async capture() {
const el = this.$refs.content;
const canvas = await html2canvas(el);
const link = document.createElement('a');
link.download = 'screenshot.png';
link.href = canvas.toDataURL();
link.click();
}
}
};
</script>直接下载远程图片
若需保存远程图片，可通过 Fetch API 获取图片 Blob 数据并触发下载。
methods: {
async downloadRemoteImage(url, filename) {
const response = await fetch(url);
const blob = await response.blob();
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = filename || 'image.jpg';
link.click();
URL.revokeObjectURL(link.href);
}
}注意事项
- 跨域限制：若图片跨域，需确保服务器允许 CORS，否则
canvas.toDataURL可能报错。 - 文件名与格式：通过
download属性指定文件名，toDataURL可设置格式（如image/jpeg）。 - 性能优化：大尺寸 Canvas 转换可能耗时，建议对用户提示加载状态。
