点击图片下载保存（完整demo代码全）

就像风1样

于 2019-09-07 15:28:16 发布

阅读量1.4k

点赞数

分类专栏： JavaScript 文章标签： js canvas 保存

本文链接：https://blog.youkuaiyun.com/qq_42221334/article/details/100598870

版权

该博客探讨了在浏览器限制跨域下载多媒体文件的情况下，如何通过前端JS和Canvas技术实现图片点击下载功能。作者提供了完整的demo代码，强调了正规做法是通过后端转发，但也分享了一种利用Canvas进行另存的前端实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：点击图片下载，看了好多都没实现，加 download测试也没成功

原因：浏览器已经限制死跨域下载多媒体文件的各种方式。最正规的办法还是让后端做一次转发。请求后端，后端向第三方请求文件，返回给前端，前端保存文件。

不过在网上找了下用canvas的方式前端实现点击图片另存

完整代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    </head>
    <body>
        <button onclick="download()">点击下载</button>
    </body>
    <script>
        function download() {
            var image = new Image();
            image.crossOrigin = "anonymous";
            image.src = "h

最低0.47元/天解锁文章