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 時，需要指定圖片的質量。