JavaScript实现前端下载图片
前几天公司的项目有个需求，实现点击下载图片功能，当时我就就想着还不简单嘛，当即写下以下代码：
const download = ateElement('a');
download.setAttribute('download', downloadName);
download.clik();
结果出乎意料，浏览器并没有将图片下载，而是将图片在窗口中打开了。我查了下资料，发现像 Chrome 等现代浏览器会识别图片并将其打开。现在下载图片网上大部分做法是响应时添加下载头，浏览器识别到下载头就会将其下载，但是我这前端项目并做不到。那么，问题来了，如何实现前端下载图片？
1. 实现思路
1.将图片装换成 Data URLs
2.下载图片
Data URLs
Data URLs，即前缀为 data:如何下载javascript 协议的的 URL，其允许内容创建者向文档中嵌入小文件。
Data URLs 由四个部分组成：前缀 (data:)、指示数据类型的 MIME 类型、如果非文本则为可选的 base64 标记、数据本身：
data:[<mediatype>][;base64],<data>
mediatype 是个 MIME 类型的字符串，例如 "image/jpeg" 表示 JPEG 图像文件。如果被省略，则默认值为 text/plain;charset=US-ASCII
如果数据是文本类型，你可以直接将文本嵌入 (根据文档类型，使用合适的实体字符或转义字符)。如果是二进制数据，你可以将数据进行 base64 编码之后再进行嵌入。
详细请看 MDN 对 Data URLs 的解释。
2. 代码实现
以下是获取图片 DataURL 的示例代码：
/**
* 获取图片的 base64 编码 DataURL
* @param image JS 图像对象
* @return {string} 已编码的 DataURL
*/
getImageDataURL(image) {
// 创建画布
const canvas = ateElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
const ctx = Context('2d');
// 以图片为背景剪裁画布
ctx.drawImage(image, 0, 0, image.width, image.height);
// 获取图片后缀名
const extension = image.src.substring(image.src.lastIndexOf('.') + 1).toLowerCase();
// 某些图片 url 可能没有后缀名，默认是 png
DataURL('image/' + extension, 1);
},
执行上面的函数后会返回如下面的格式一样的字符串
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAgAElEQVR4Xu1dB3hUxfb/
注意：图片越大，转换后的 base64 编码越长，尽量避免对大图进行 DataURL 转换，防止转换后的长度超出浏览器限制
以下是下载图片的示例代码：
downLoad(downloadName, url) {
const tag = ateElement('a');
// 此属性的值就是下载时图片的名称，注意，名称中不能有半角点，否则下载时后缀名会错误
tag.setAttribute('download', place(/\./g, '。'));
const image = new Image();
// 设置 image 的 url, 添加时间戳，防止浏览器缓存图片
image.src = url + '?time=' + new Date().getTime();
/
/重要，设置 crossOrigin 属性，否则图片跨域会报错
image.setAttribute('crossOrigin', 'Anonymous');
// 图片未加载完成时操作会报错
load = () => {
tag.href = getImageDataURL(image);
tag.click();
};
},
欢迎转载，转载请注明出处 /

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。