<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<meta name="keywords" content="img">
</head>
<body>
<script>
canvasConfig = {
id:'test',
width:'200',
height:'200',
bgColor:'pink'
}
class method {
//canvas转图片
canvasToImage (canvas) {
let image = new Image();
image.src = canvas.toDataURL('image/png');
return image;
}
//图片转canvas
imageToCanvas (image) {
let canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext('2d').drawImage(image, 0, 0)
}
//图片下载
imageDownLoad (image) {
let aLink = document.createElement('a');
aLink.href = image.src;
aLink.download = 'test.png';
document.body.appendChild(aLink);
aLink.click();
document.body.removeChild(aLink)
}
}
Object.assign(method.prototype,{
test (content) {
console.log(content);
}
})
var canvasMethod = new method();
var canvasDom = document.createElement('canvas');
canvasDom.id = canvasConfig.id;
canvasDom.width = canvasConfig.width;
canvasDom.height = canvasConfig.height;
canvasDom.style.background = canvasConfig.bgColor;
document.body.appendChild(canvasDom);
var ctx = canvasDom.getContext("2d");
ctx.fillStyle='red';
ctx.fillRect(50,50,100,100);
canvasMethod.test('success');
var getImg = canvasMethod.canvasToImage(canvasDom);
document.body.appendChild(getImg);
canvasMethod.imageDownLoad(getImg)
</script>
</body>
</html>