本文由 发布,转载请注明出处,如有问题请联系我们! 发布时间: 2021-08-01js保存图片到手机相册怎么保存-js实现下载文件到本地

加载中

在近期的开发设计之中,大家必须为img标签及其canvas动态性制作的图象给予使用作用,下边是通过研究后大家得到的結果。在近期的发展趋势中,大家必须为img标签和蒙版动态性制作的图象给予使用作用。下列是大家探寻后的結果。

一,蒙版版。

// 免费下载Canvas元素的照片function downloadCanvasIamge(selector, name) { // 根据选择符获得canvas元素 var canvas = document.querySelector(selector) // 应用toDataURL方式将图象变换被base64编号的URL字符串数组 var url = canvas.toDataURL('image/png') // 转化成一个a原素 var a = document.createElement('a') // 建立一个点击事情 var event = new MouseEvent('click') // 将a的download特性设定为大家想要下载的照片名字,若name不会有则应用‘保存图片名字’做为默认设置名字 a.download = name || '保存图片名字' // 将转化成的URL设定为a.href特性 a.href = url // 开启a的点击事情 a.dispatchEvent(event)}// 启用方法// 主要参数一: 选择符,意味着canvas// 主要参数二: 照片名字,可选择downloadCanvasIamge('canvas', '照片名字')

二,img 标识版本号第二,img标签版本号。

// 免费下载function downloadIamge(selector, name) { // 根据选择符获得img元素 var img = document.querySelector(selector) // 将照片的src特性做为URL详细地址 var url = img.src var a = document.createElement('a') var event = new MouseEvent('click') a.download = name || '保存图片名字' a.href = url a.dispatchEvent(event)}// 启用方法// 主要参数一: 选择符,意味着img标签// 主要参数二: 照片名字,可选择downloadIamge('canvas', '照片名字')

改善版本号

跨域请求会导致A标识在一些电脑浏览器中立即开启新的标签页,因此改善如下所示。

function downloadIamge(selector, name) { var image = new Image() // 处理跨域请求 Canvas 环境污染难题 image.setAttribute('crossOrigin', 'anonymous') image.onload = function () { var canvas = document.createElement('canvas') canvas.width = image.width canvas.height = image.height var context = canvas.getContext('2d') context.drawImage(image, 0, 0, image.width, image.height) var url = canvas.toDataURL('image/png') // 转化成一个a原素 var a = document.createElement('a') // 建立一个点击事情 var event = new MouseEvent('click') // 将a的download特性设定为大家想要下载的照片名字,若name不会有则应用‘保存图片名字’做为默认设置名字 a.download = name || '保存图片名字' // 将转化成的URL设定为a.href特性 a.href = url // 开启a的点击事情 a.dispatchEvent(event)}image.src = document.querySelector(selector).src}// 启用方法// 主要参数一: 选择符,意味着img标签// 主要参数二: 照片名字,可选择downloadIamge('canvas', '照片名字')

三.引言

大家关键应用A标识的免费下载特性,下边是MDN得出的叙述:

此特性标示浏览器下载URL而不是导航栏到它,因而将显示客户将其储存为本地文件。

假如特性有值,它将在储存提醒中作为事先添充的文件夹名称(客户依然能够按照必须变更文件夹名称)。容许的值沒有限定,可是/和\被变换为下横线。大部分系统文件限定文件夹名称中的一些标点,电脑浏览器会相对地调节提议的名字。

常见问题:

这一特性只适用同宗的网站地址。

您还可以应用blob:URL和data:URL来便捷客户免费下载由JavaScript绘制的內容(比如,由在线绘图Web应用软件建立的相片)。

假如HTTP头的內容处理:存有,而且给出的文件夹名称有别于此特性,则HTTP头优先选择在此特性。

假如此特性的內容处理设定为内联,火狐浏览器优先选择于內容处理,如同此前的文件夹名称一样,而Chrome优先选择于免费下载特性。

评论(0条)

刀客源码 游客评论