// canvas工具类
// 画图片 参数：图片地址 x坐标 y坐标 宽 高 回调函数
// 回调函数：如果传了回调函数会返回图片的dom 第二个参数为next-不执行不会往下走
// next可穿绘制图片的宽度和高度-不传为默认传的宽度和高度,都不传为默认的图片宽高
可以制作类似微信为头像添加党徽的功能，案例在下方
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input id="inputFile" accept="image/*" type="file" />
<input id="inputFile2" accept="image/*" type="file" />
<div>
<canvas id="mycanvas"></canvas>
</div>
<script src="./utilityClass.js"></script>
<script type="text/javascript">
const color = new ColorProcessing('#46a6ff')
console.log(color)
const canvasHandler = new CanvasHandler('#mycanvas')
const fileHandler = new FileHandler()
inputFile.addEventListener('change', async function () {
const imgArr = await fileHandler.fileToBase64(this.files)
canvasHandler.drawImage(imgArr[0], 0, 0, 0, 0, (info, next) => {
let width = info.width
let height = info.height / (width / 200)
canvasHandler.canvas.width = 200
canvasHandler.canvas.height = height
next(200, height)
})
})
inputFile2.addEventListener('change',async function () {
const imgArr = await fileHandler.fileToBase64(this.files)
canvasHandler.drawImage(imgArr[0], 0, 0, 0, 0, (info, next) => {
let height = info.height
let width = info.width / (height / mycanvas.height)
next(width, canvasHandler.canvas.height)
})
})
</script>
</body>
</html>
网友评论