头像加个小图标是如何制作的？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>click函数的使用</title>
</head>
<body>
<button onclick="dj()" id="anniu">上传图片</button>
<button id="bctp" onclick="bctp()">保存图片</button>
<canvas style="display: none"></canvas>
<img id="preview" src="" alt="" />
<!-- 从这里看出可以是windows触发的 -->
<input
type="file"
onchange="loadImageFile()"
id="upload"
style="visibility: hidden"
/>
<div id="uploadBox"></div>
<script>
function dj() {
// console.log("nihaoshijie");
// document.getElementById("haha").click();
// 可能这是一个动作所以输出的是未定义
// console.log(document.getElementById("haha").click());
filenamedz = document.getElementById("upload").click(); //也有可能是它触发的
filename = document.getElementById("upload");
console.log(filename);
}
function loadImageFile() {
console.log(this); //确实是windows，以后不知道是就输出一下
//这里的this应该是指向的是那个按钮,假如我这里写this指的是windows调用
var file = filename.files;
console.log(file);
var reader = new FileReader();
reader.readAsDataURL(file[0]);
reader.onload = function () {
draw(reader.result);
};
}
var draw = function (src) {
var base64 = [];
var c = document.querySelector("canvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#fff";
c.width = 290;
c.height = 290;
ctx.rect(0, 0, c.width, c.height);
ctx.fill();
// 画底图,这个底图就是图像
var img = new Image();
img.src = src;
img.onload = function () {
ctx.drawImage(img, 0, 0, 290, 290);
// 画红旗
var icon = new Image();
icon.src = "icon.png";
icon.onload = function () {
ctx.drawImage(icon, 0, 0, 290, 290);
document.querySelector("#preview").src = c.toDataURL(
"image/jpeg",
0.8
);
//读完以后赋值给图片的src，就是这么简单
// document.getElementById("uploadBox").innerHTML +=
// "<div id='uploadImg'><img src='" +
// draw(reader.result) +
// "' style='height:200px'></div>";
};
};
};
function haha() {
console.log("lj");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
canvas {
background-color: yellow;
}
img {
width: 100px;
}
</style>
</head>
<body>
<!-- <img src="icon.png" alt="" id="gq_icon" /> -->
<img src="icon.png" alt="" id="gq_icon2" />
<img src="preview.png" alt="" id="gq_icon" />
<canvas id="canvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// var img = document.getElementById("gq_icon");
var img2 = document.getElementById("gq_icon2");
var img = document.getElementById("gq_icon");
// 把图片加载到画布里面;
img.onload = function () {
console.log("haha");
// ctx.drawImage(img, 0, 0, 100, 100);
ctx.drawImage(img, 0, 0, 200, 200);
ctx.drawImage(img2, 0, 0, 100, 100);
// console.log(ctx.drawImage(img, 0, 0, 100, 100));
};
var dataURL = canvas.toDataURL();
console.log(dataURL);
</script>
</body>
</html>
