JavaScript保存图片详解

JavaScript 是一种用于 Web 开发的脚本语言, 绝大多数时候它是在客户端运行的。在实际应用中我们经常需要保存一些图片，下面就从多个方面，详细介绍如何使用 JavaScript 去保存图片。

一、JavaScript 保存图片到手机

在移动端的 Web 开发中，我们经常需要将图片保存到手机本地。使用 JavaScript 保存图片可以用一些第三库， 如 canvas2image、saveSvgAsPng 等。这里我们以 canvas2image 来进行介绍。

canvas2image 是一个可以将 Canvas 对象保存为本地图片的 JavaScript 库。

步骤如下：

1. 引入 canvas2image 库

“`HTML

“`

2. 在 HTML 中，创建一个 Canvas 元素，并将图片绘制到该元素中。

“`HTML

“`

“`JavaScript
$(function () {
/**
* $(”)[0] is equivalent to document.createElement(‘img’).
* It’s faster since jQuery creates a new wrapper object instead of setting the tagName property.
*/
var img = $(”)[0];
img.onload = function () {
// 创建 Canvas 元素
var canvas = document.createElement(“canvas”);
canvas.width = img.width;
canvas.height = img.height;

// 把图像绘制到 Canvas 上
var ctx = canvas.getContext(“2d”);
ctx.drawImage(img, 0, 0, img.width, img.height);
var dataURL = canvas.toDataURL(“image/png”);

// 将图片保存到本地
canvas2image.saveAsPNG(canvas,dataURL.length,canvas.width,canvas.height)
}
img.src=”https://www.baidu.com/img/bd_logo1.png?qua=high”;
})
“`

使用 canvas2image 库，获取图片的 DataURL，然后调用 saveAsPNG 方法进行保存。

二、JavaScript 保存图片到本地指定位置

将图片保存到本地指定位置，需要后端的支持才行。在前端我们需要使用一些后端语言来辅助实现。在这里，我们以PHP举例来演示如何实现。

步骤如下：

1. HTML 代码中，创建一个 input 元素，并指定文件的上传路径

“`HTML

提交
“`

2. 使用 JavaScript 获取图片文件对象

“`JavaScript
$(function () {
$(“#submit-btn”).click( function () {
var file = $(“#file-upload”)[0].files[0];
console.log(file);
// 文件上传逻辑
});
})
“`

3. 将文件对象使用 FormData 类型发送到后台

“`JavaScript
$(function () {
$(“#submit-btn”).click( function () {
var file = $(“#file-upload”)[0].files[0];
console.log(file);

var formData = new FormData();
formData.append(“image”,file);

$.ajax({
url:”saveImage.php”,
type:”POST”,
data:formData,
contentType:false,//这里不能省略
processData:false,//这里不能省略
success:function(data){
alert(“保存成功”)
}
})
});
})
“`

4. 在后端(PHP)中，保存文件

“`php

“`

这里使用了 PHP 的 move_uploaded_file 函数，将文件保存到指定路径中。

三、JavaScript 保存图片到服务器

将图片保存到服务器上需要后端语言的支持。下面以 PHP 为例，演示如何将图片保存到服务器上。

步骤如下：

1. HTML 代码中，创建一个 input 元素，并指定文件的上传路径

“`HTML

提交
“`

2. 使用 JavaScript 获取图片文件对象

“`JavaScript
$(function () {
$(“#submit-btn”).click( function () {
var file = $(“#file-upload”)[0].files[0];
console.log(file);
// 文件上传逻辑
});
})
“`

3. 将文件对象使用 FormData 类型发送到后台

“`JavaScript
$(function () {
$(“#submit-btn”).click( function () {
var file = $(“#file-upload”)[0].files[0];
console.log(file);

var formData = new FormData();
formData.append(“image”,file);

$.ajax({
url:”saveImage.php”,
type:”POST”,
data:formData,
contentType:false,//这里不能省略
processData:false,//这里不能省略
success:function(data){
alert(“保存成功”)
}
})
});
})
“`

4. 在后端(PHP)中，保存文件

“`php

“`

在 PHP 中，使用 move_uploaded_file 函数将文件保存至指定路径中。

四、JavaScript 保存图片到本地

将图片保存到本地，我们需要使用 FileSaver.js 库。

步骤如下：

1. HTML 代码中，创建一个 button 元素

“`HTML
保存
“`

2. 使用 JavaScript 获取图片的 DataURL，使用 saveAs 方法进行保存。

“`JavaScript
$(function () {
$(“#btn-save”).click(function () {
var canvas = document.createElement(“canvas”);
canvas.width = 200;
canvas.height = 200;
// 把图像绘制到 Canvas 上
var ctx = canvas.getContext(“2d”);
ctx.drawImage($(“#img”)[0], 0, 0, 200, 200);
var dataURL = canvas.toDataURL(“image/png”);

saveAs(dataURL, “myPicture.png”);
})
})
“`

这里使用了 {FileSaver.js} 库中的 saveAs 方法，将 DataURL 数据保存至本地。

五、JavaScript 保存图片到指定目录

在前面的例子中，我们都是将文件保存到默认目录中的。下面我们介绍如何将文件保存到指定目录中。

以 PHP 为例，步骤如下：

1. 新建保存文件的文件夹

在服务器上，例如：/var/www/html/myapp/uploads。修改文件夹权限，以确保可以向其中写入文件。

“`Shell
$ sudo mkdir /var/www/html/myapp/uploads
$ sudo chown -R www-data:www-data /var/www/html/myapp/uploads
$ sudo chmod -R 755 /var/www/html/myapp/uploads

“`

2. 保存图片时，指定图片保存路径

“`php
$fileName = $_FILES[‘image’][‘name’];
$uploadPath = “uploads/” . basename($fileName);
move_uploaded_file($_FILES[‘image’][‘tmp_name’], $uploadPath);
“`

这里，我们将文件保存在 upload 目录下，文件名为原文件的名字。

六、JavaScript 保存图片到手机相册

在移动端中，我们经常需要将图片保存到手机相册。 在 IOS 上，使用 JavaScript 保存至相册的方法如下：

“`JavaScript
var imgSrc = ‘https://www.baidu.com/img/bd_logo1.png?qua=high’;
var xhr = new XMLHttpRequest();
xhr.open(“get”, imgSrc, true);
xhr.responseType = “blob”;
xhr.onload = function () {
if (this.status === 200) {
var blob = this.response;
saveImageIOS(blob);
}
}
xhr.send();

function saveImageIOS (blob) {
var reader = new FileReader();
reader.onload = function (event) {
var base64Str = event.target.result;
var img = new Image();
img.onload = function () {
var canvas = document.createElement(“canvas”);
canvas.width = this.width;
canvas.height = this.height;
var ctx = canvas.getContext(“2d”);
ctx.drawImage(this, 0, 0, this.width, this.height);
canvas.toBlob(function (blob) {
var url = URL.createObjectURL(blob);
var a = document.createElement(“a”);
a.href = url;
a.target = ‘_blank’;
a.download = ‘image.png’;
a.click();
URL.revokeObjectURL(url);
})
}
img.src = base64Str;
}
reader.readAsDataURL(blob);
}
“`

在 Android 上，我们可以通过调用 Android 的 Native 方法来实现图片保存。

“`JavaScript
function saveImageAndroid(blob) {
let fileReader = new FileReader();
fileReader.onload = function() {
let arrayBuffer = this.result;
let blob = new Blob([new Uint8Array(arrayBuffer)]);
let type = ‘image/png’;
let filename = ‘image.png’;
try {
window.saveimage.savePicture(blob, type, filename);
} catch (e) {
alert(e.name + “: ” + e.message);
}
};
fileReader.readAsArrayBuffer(blob);
}
“`

这里的 saveimage 是一个 Native 对象，其中含有实现图片保存的方法。

七、保存图片没法保存jpg

在前面的例子中，为了方便，我们将图片格式设置为 png。如果需要保存 jpg 格式的图片，我们可以通过以下方法将 png 图片转成 jpg。

“`JavaScript
function pngToJpg (pngImage) {
var img = document.createElement(‘img’);
img.src = pngImage;
img.onload = function () {
// 创建 Canvas 元素
var canvas = document.createElement(“canvas”);
canvas.width = img.width;
canvas.height = img.height;

// 把图像绘制到 Canvas 上
var ctx = canvas.getContext(“2d”);
ctx.drawImage(img, 0, 0, img.width, img.height);
var jpgDataURL = canvas.toDataURL(“image/jpeg”,0.8);
saveAs(jpgDataURL,”myPicture.jpg”);
}
}
“`

这里需要注意的是， png 转成 jpg 时，需要指定图片的质量。