頭像加個小圖標是如何制作的？
<!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函數(shù)的使用</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觸發(fā)的 -->
? ? <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(); //也有可能是它觸發(fā)的
? ? ? ? filename = document.getElementById("upload");
? ? ? ? console.log(filename);
? ? ? }
? ? ? function loadImageFile() {
? ? ? ? console.log(this); //確實是windows，以后不知道是就輸出一下
? ? ? ? //這里的this應(yīng)該是指向的是那個按鈕,假如我這里寫this指的是windows調(diào)用
? ? ? ? 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>
