Download the images captured by canvas to the local location
1. Overview
Ordinary image (not required) => canvas image => converted to base64 string => assigned to a tag => click event triggering a tag => Download
2. Specific steps
First, you need to have a canvas image.
If you only have a normal picture, please convert it to a canvas image (refer to drawImage method)
This image may be drawn by you using canvas's brush. Or maybe you draw a picture to canvas by drawing image method. Even a screenshot of the Video tag, Or turn html into canvas images in some way (such as svg) But you have to. You can get it through the above methods.
Second, you need to get the dom of canvas, and then use the method of canvas. toData URL ("image / png") to get the base64 string in the corresponding format.
You can change the parameters to a string of pictures in png or other formats.
var canvas = document.querySelector('canvas');
var src = canvas.toDataURL("image/png");Third, you need to have an a tag in the page, which can be created temporarily, without having to be in the dom tree.
Then set his href attribute to the base64 string you obtained earlier, and set the download attribute to it (it can be empty, the function is as the file name when downloading);
var dom = document.createElement("a");
dom.href = this.canvas.toDataURL("image/png");
dom.download = new Date().getTime() + ".png";Fourth, you need to trigger the click event of this a tag, either by manually clicking or by calling its click method directly by js.
dom.click();Step 5, the download box has popped up, and the picture can be downloaded locally.
3,DEMO
Subsidiary cameras take pictures and download them to local source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>take canvas Get the picture and download it locally</title>
</head>
<body>
<style>
video, canvas {
outline: 1px solid red;
}
</style>
<p>Here, take a picture to get your image, and then download it locally. If there is a prompt when you turn on the camera, please click Allow</p>
<button onclick="startVideo()">Click on Enable Camera</button>
<button onclick="Shoot()">Click to take photos</button>
<button onclick="download()">Click to download</button>
<br>
<p>On the left is the area in which the camera is currently taking pictures, on the right is the captured image, and on the right is the downloaded image.</p>
<video width="640" height="480" autoplay></video>
<canvas width="640" height="480"></canvas>
<script>
var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
//Turn on the camera and start shooting
function startVideo() {
// Vieo Captures Camera Pictures
navigator.mediaDevices.getUserMedia({
video: true,
}).then(success).catch(error)
function success(stream) {
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}
function error(err) {
alert('video error: ' + err)
}
}
function Shoot() {
var context = canvas.getContext('2d');
//Rendering the current video frame content onto the canvas
context.drawImage(self.video, 0, 0, 640, 480);
}
//Download pictures to local locations
function download() {
var dom = document.createElement("a");
dom.href = this.canvas.toDataURL("image/png");
dom.download = new Date().getTime() + ".png";
dom.click();
}
</script>
</body>
</html>