JavaScript - canvas - 将图片保存到本地-编程知识

JavaScript - canvas - 将图片保存到本地

效果

在这里插入图片描述

示例

项目结构：

在这里插入图片描述

源码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>将图片保存到本地</title></head><body><canvas id="canvas"></canvas><br /><input type="button" id="button-save-as" value="Save as..." /><script type="text/javascript">window.onload = function(event) {main();}function main() {const canvas = document.querySelector("#canvas");const canvasContext = canvas.getContext("2d");{// 先在 canvas 上面画一张图片const image = new Image();image.onload = (event) => {// console.log(event);canvas.width = image.width;canvas.height = image.height;canvasContext.drawImage(image, 0, 0);}image.src = "img/transformers.jpg";}{const buttonSaveAs = document.getElementById('button-save-as');buttonSaveAs.onclick = (event) => {canvas.toBlob(function (blob) {// https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blobconst objectURL = URL.createObjectURL(new Blob([ blob ], { type: "image/png" }));const anchor = document.createElement('a');anchor.href = objectURL;anchor.download = "Filename.png";anchor.click();URL.revokeObjectURL(objectURL);}, "image/png", 1);};}}</script></body>
</html>