乐趣区

使用JavaScript将图片保存至本地

jiezi

Canvas

// 下载 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 标签 

// 下载
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', '图片名称')

总结 

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', '图片名称')

此属性仅适用于同源 URLs。
可以使用 blob: URLs 和 data: URLs 以方便用户下载 JavaScript 方式生成的内容（例如使用在线绘图的 Web 应用创建的照片）。
如果 HTTP 头的 Content-Disposition：存在，并且赋予了一个和这个属性不同的文件名，HTTP 头优先于此属性。
如果这个属性存在 Content-Disposition 被设置为 inline，火狐优先 Content-Disposition，像之前文件名​​的情况下，而 Chrome 则优先 download 属性。

退出移动版