JavaScript 是一种用于 Web 开发的脚本语言, 绝大多数时候它是在客户端运行的。在实际应用中我们经常需要保存一些图片，下面就从多个方面，详细介绍如何使用 JavaScript 去保存图片。
一、JavaScript 保存图片到手机
在移动端的 Web 开发中，我们经常需要将图片保存到手机本地。使用 JavaScript 保存图片可以用一些第三库， 如 canvas2image、saveSvgAsPng 等。这里我们以 canvas2image 来进行介绍。 canvas2image 是一个可以将 Canvas 对象保存为本地图片的 JavaScript 库。 步骤如下： 1. 引入 canvas2image 库 ```HTML <script src="https://cdn.bootcss.com/canvas2image/0.1.0/canvas2image.js"></script> ``` 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 <input type="file" id="file-upload" accept="image/*">
``` 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 <input type="file" id="file-upload" accept="image/*">
``` 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 时，需要指定图片的质量。
