seo 专业为网站建设,专业模板建站公司,国内自适应网站案例,培训学校机构目录
方法一#xff1a;同源使用标签下载图片
方法二#xff1a;跨域使用将canvas上的内容转换为Blob对象并下载 在前端开发中#xff0c;有时候我们需要实现点击图片后直接下载的功能。本文将介绍两种方法来实现这一功能#xff1a; 同源使用a标签下载图片跨域使…目录
方法一同源使用标签下载图片
方法二跨域使用将canvas上的内容转换为Blob对象并下载 在前端开发中有时候我们需要实现点击图片后直接下载的功能。本文将介绍两种方法来实现这一功能 同源使用a标签下载图片跨域使用将canvas上的内容转换为Blob对象并下载。 方法一同源使用a标签下载图片 在同源情况下我们可以通过创建一个a标签设置其href属性为图片的链接然后设置download属性为图片的文件名就可以实现点击图片下载的功能。 a hrefimage.jpg downloadimage.jpgimg srcimage.jpg altImage
/a 但当出现请求下载资源跨域时这个方法就不能实现效果了 方法二跨域使用将canvas上的内容转换为Blob对象并下载 在跨域情况下由于浏览器的安全策略限制直接下载图片可能会受到限制。我们可以通过将图片绘制到canvas上然后将canvas上的内容转换为Blob对象最后通过创建a标签来实现下载。 代码中有详细注释 // 接收一个图片链接作为参数
function download(link: string) {// 创建新的图片对象const img new Image()// 设置图片跨域属性为匿名img.setAttribute(crossOrigin, Anonymous)// 图片加载完成后执行回调函数img.onload function () {// 创建一个新的画布元素const canvas document.createElement(canvas)// 获取画布的2D上下文const context canvas.getContext(2d)// 判断是否成功获取到画布上下文if (context) {// 设置画布的宽度和高度与图片一致canvas.width img.widthcanvas.height img.height// 在画布上绘制图片context.drawImage(img, 0, 0, img.width, img.height)// 将画布内容转换为 Blob 对象canvas.toBlob((blob) {// 判断是否成功生成 Blob 对象if (blob) {// 创建一个临时链接用于下载const url URL.createObjectURL(blob)const a document.createElement(a)const event new MouseEvent(click)// 设置下载的文件名a.download default.png// 设置链接地址为 Blob 对象的 URLa.href url// 模拟点击事件触发下载a.dispatchEvent(event)// 释放 Blob 对象的 URLURL.revokeObjectURL(url)} else {console.error(生成 Blob 失败)}})} else {console.error(获取 Canvas 上下文失败)}}// 设置图片的 src 属性并在链接后添加时间戳以避免缓存img.src ${link}?v${Date.now()}
} 注 在canvas中绘制了来自其他域名的图片时浏览器会认为这个canvas被“污染”tainted即受到了跨域限制。在这种情况下浏览器会禁止使用toBlob()方法导出这个canvas作为Blob对象。 为了解决这个问题可以在加载图片时设置图片的crossOrigin属性为Anonymous这样就可以避免跨域问题。
