使用JavaScript保存图片的方法及案例 |21xrx.com

使用JavaScript保存图片的方法及案例

2023-06-16 08:55:53 深夜i -- --

JavaScript 保存图片 canvas Blob 绘图下载本地保存

在开发中，可能会遇到需要将页面中的图片保存到本地的需求。JavaScript提供了多种保存图片的方法，下面将介绍其中两种比较常用的方法。

方法一：使用canvas实现保存图片

canvas是HTML5提供的一种绘图标签，可以动态生成图片并保存到本地。

HTML部分：

JavaScript部分：


// 获取canvas元素
var canvas = document.getElementById("canvas");
// 获取canvas的上下文对象
var ctx = canvas.getContext("2d");
// 绘制图片到canvas
var img = new Image();
img.src = "图片地址";
img.onload = function() {
 ctx.drawImage(img, 0, 0);
};
// 保存canvas的绘制结果到本地
var link = document.createElement("a");
link.download = "图片名称";
link.href = canvas.toDataURL();
link.click();

方法二：使用Blob实现保存图片

Blob是一种二进制数据流，可以将canvas生成的图片流转化为Blob对象。Blob对象可以通过a标签下载到本地。

JavaScript部分：


// 获取canvas元素
var canvas = document.getElementById("canvas");
// 获取canvas生成的图片流
var dataUrl = canvas.toDataURL();
// 将dataUrl转化为Blob对象
var arr = dataUrl.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n--) {
 u8arr[n] = bstr.charCodeAt(n);
}
var blob = new Blob([u8arr], {type: mime});
// 保存Blob对象到本地
var link = document.createElement("a");
link.download = "图片名称";
link.href = window.URL.createObjectURL(blob);
link.click();

上一篇: idea打包java可执行jar包

下一篇: 【标题】C语言程序设计的八大问题

评论区

()

相似文章