要实现将Chrome浏览器中的Base64编码的图像保存为png格式的图片,可以通过以下步骤进行操作:
drawImage
方法将Base64编码的图像绘制在canvas上。以下是示例代码实现上述步骤:
// 创建新窗口
var newWindow = window.open();
// 在新窗口中创建canvas
var canvas = newWindow.document.createElement('canvas');
canvas.width = 400; // 设置canvas宽度
canvas.height = 400; // 设置canvas高度
// 获取Base64编码的图像
var base64Image = "data:image/png;base64,iVBORw0KG..."; // 以Base64编码表示的图像数据
// 在canvas上绘制图像
var context = canvas.getContext('2d');
var image = new Image();
image.src = base64Image;
image.onload = function() {
context.drawImage(image, 0, 0, canvas.width, canvas.height);
// 将canvas上的图像转换为png格式的Blob对象
canvas.toBlob(function(blob) {
// 创建下载链接
var downloadLink = newWindow.document.createElement('a');
downloadLink.href = URL.createObjectURL(blob); // 使用Blob对象创建URL
downloadLink.download = 'image.png'; // 设置文件名
// 添加下载链接到新窗口的文档中
newWindow.document.body.appendChild(downloadLink);
// 触发文件下载
downloadLink.click();
// 清除创建的URL和下载链接
URL.revokeObjectURL(downloadLink.href);
newWindow.document.body.removeChild(downloadLink);
});
};
以上代码中,需要替换base64Image
变量的值为实际的Base64编码图像数据。此代码将在新窗口中打开,并将Base64编码的图像保存为png格式的图片文件,并以image.png
作为文件名进行下载。
领取专属 10元无门槛券
手把手带您无忧上云