如何用JavaScript保存图片到本地|极客笔记

如何用JavaScript保存图片到本地

在Web开发中，我们经常需要处理图片，有时候我们需要保存一些特定的图片到本地。本文将介绍如何使用JavaScript保存图片到本地，让我们一起来看看吧。

方法一：使用canvas

第一种方法是使用HTML5的canvas元素来保存图片。我们可以将图片绘制到canvas上，然后通过canvas的toDataURL方法将画布转换为base64格式的图片数据，最后通过a标签的download属性实现保存到本地。

<!DOCTYPE html>
<html>
<body>

<h2>Save Image to Local</h2>
<p>Click the button to save the image to your local storage.</p>

<button onclick="saveImage()">Save Image</button>

<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000;"></canvas>

<script>
function saveImage() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    var img = new Image();
    img.src = "image.jpg";
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
        var link = document.createElement('a');
        link.download = 'image.png';
        link.href = canvas.toDataURL();
        link.click();
    };
}
</script>

</body>
</html>

运行以上代码，点击”Save Image”按钮后会将图片保存到本地。

方法二：使用FileSaver.js

除了使用canvas，我们还可以借助第三方库FileSaver.js来保存图片到本地。FileSaver.js是一个简单的文件保存库，通过它我们可以轻松地将文件保存到本地。

首先，我们需要引入FileSaver.js库，然后通过XMLHttpRequest获取图片资源，最后调用FileSaver.js的saveAs方法保存图片到本地。

<!DOCTYPE html>
<html>
<body>

<h2>Save Image to Local with FileSaver.js</h2>
<p>Click the button to save the image to your local storage.</p>

<button onclick="saveImage()">Save Image</button>

<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

<script>
function saveImage() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'image.jpg', true);
    xhr.responseType = 'blob';

    xhr.onload = function (e) {
        if (this.status == 200) {
            var blob = new Blob([this.response], {type: 'image/jpeg'});
            saveAs(blob, "image.jpg");
        }
    };

    xhr.send();
}
</script>

</body>
</html>

运行以上代码，点击”Save Image”按钮后会将图片保存到本地。

方法三：使用fetch API

最后一种方法是使用fetch API来保存图片到本地。fetch API是现代浏览器中用来替代XMLHttpRequest的新的网络请求方案。

我们可以通过fetch API获取图片资源，然后将图片转换为blob对象，最后将blob对象保存到本地。

<!DOCTYPE html>
<html>
<body>

<h2>Save Image to Local with Fetch API</h2>
<p>Click the button to save the image to your local storage.</p>

<button onclick="saveImage()">Save Image</button>

<script>
function saveImage() {
    fetch('image.jpg')
        .then(response => response.blob())
        .then(blob => {
            var url = URL.createObjectURL(blob);
            var a = document.createElement('a');
            a.href = url;
            a.download = 'image.jpg';
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
        });
}
</script>

</body>
</html>

运行以上代码，点击”Save Image”按钮后会将图片保存到本地。