canvas-to-image extends FileSaver and simplifies way to save canvas as image.
npm install canvas-to-imageimport canvasToImage from 'canvas-to-image';
canvasToImage(canvasEl, options);
canvasEl // canvas html element or id attribute of canvas
options = {
name: 'custom name', // default image
type: 'jpg', // default png, accepted values jpg or png
quality: 0.4 // default 1, can select any value from 0 to 1 range
}Download as jpg
const canvasEl = document.getElementById('myCanvas');
canvasToImage(canvasEl, {
name: 'myImage',
type: 'jpg',
quality: 0.7
});Download as png
canvasToImage('myCanvas', {
name: 'myImage',
type: 'png',
quality: 1
});
or
canvasToImage('myCanvas');import React, { useRef, useEffect } from 'react';
import canvasToImage from 'canvas-to-image';
const Canvas = props => {
const canvasRef = useRef(null);
useEffect(() => {
const canvas = canvasRef.current;
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#000000';
ctx.beginPath();
ctx.arc(50, 100, 20, 0, 2 * Math.PI);
ctx.fill();
}, []);
const handleDownload = async () => {
canvasToImage(canvasRef.current);
};
return (
<div>
<canvas ref={canvasRef} {...props} />
<button onClick={handleDownload}>Download</button>
</div>
);
}
export default Canvas;<html>
<head></head>
<body>
<canvas id="myCanvas"></canvas>
...
<script src="./canvas-to-image/js/canvas-to-image.min.js"></script>
<script>
const canvasEl = document.getElementById('myCanvas');
canvasToImage(canvasEl, {
name: 'myJPG',
type: 'jpg',
quality: 0.5
});
canvasToImage('myCanvas', {
name: 'myPNG',
type: 'png',
quality: 1
});
canvasToImage('myCanvas');
</script>
</body>
</html>Copyright (c) 2020 Lasha Kakhidze. This code is released under the MIT license.