효과 사진
코드 업로드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="display: flex;">
<canvas id="myCanvas" width="520" height="720" style="border:1px solid #d3d3d3;">
这是浏览器不支持canvas时展示的信息
</canvas>
<img id="img" width="400px" height="400px" />
</div>
<div>
<input accept=".png,.jpg,.jpeg" type="file" id="file" onchange="myFile(file)" />
<button onclick="window.close()">关闭窗口</button>
</div>
<script>
const img = document.getElementById("img")
// 把图片转base64
function myFile(file) {
const imgsize = file.files[0]
const render = new FileReader()
render.readAsDataURL(imgsize)
render.onload = (e) => {
// console.log(e, 'e')
const src = e.target.result
// console.log(src)
img.src = src
srcImg = src
canvasPart(src)
}
}
function canvasPart(srcImg) {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image()
// 这里可以放 图片路径 "./test.jpg" || base64图片 || 图片链接
img.src = srcImg || 'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1589884154&di=9b0f36e95282f61005aa4b7dc6a7698b&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg'
console.log(img, 'SRC', srcImg)
img.onload = function () {
// 设置图片在canvas上 前面两个0,0是边距, 后面是宽高
ctx.drawImage(img, 0, 0, 520, 720);
// 添加文字 后面两个数字是坐标
ctx.font = "20px sans-serif"
ctx.fillStyle = '#e22018'
ctx.fillText("添加文字", 125, 137);
// 画矩形 前两个数字是坐标, 后面是矩形的宽高 fillRect是填充的
ctx.strokeStyle = '#e22018'
ctx.strokeRect(125, 137, 115, 108);
ctx.strokeStyle = 'pink'
ctx.strokeRect(240, 245, 248, 248);
}
}
canvasPart('')
</script>
</body>
</html>