在线一键生成国庆红旗风头像网站源码_国庆头像源码资源-CSDN下载

共32个文件

png：27个

url：2个

css：1个

版权申诉

47 浏览量 2023-12-23 16:14:16 上传评论收藏 1.74MB 7Z 举报

资源推荐

资源详情

资源评论

收起资源包目录

国庆风头像.7z （32个子文件）

国庆风头像

莆田Nike AJ精仿鞋厂家直销，天天穿名牌！.url 122B

img

hat16.png 43KB

hat13.png 19KB

hat6.png 14KB

163296214936538432.png 37KB

hat3.png 24KB

hat2.png 15KB

hat17.png 20KB

fabric.min.js 280KB

hat11.png 20KB

act-done-happy.png 79KB

hat21.png 42KB

hat0.png 226KB

hat4.png 101KB

hat20.png 53KB

hat1.png 113KB

hat15.png 16KB

hat5.png 78KB

hat10.png 35KB

hat22.png 22KB

163289263332916427.png 114KB

hat23.png 43KB

hat19.png 34KB

strap.min.css 10KB

hat14.png 14KB

hat9.png 28KB

hat18.png 25KB

hat12.png 44KB

hat7.png 507KB

hat8.png 24KB

index.html 7KB

更多免费优质资源双击进入.url 122B

<html lang="en"> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width,maximum-scale=1.0,minimum-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='ie=edge'> <title>国庆节红旗专属头像一键生成网页-我爱资源网提供源码www.12580sky.com</title> <meta name="keywords" content="在线一键生成国庆红旗风头像网站"> <meta name="description" content="在线一键生成国庆红旗风头像网站"/> <link rel="shortcut icon" href="https://www.52zyw.com/favicon.ico" type="image/x-icon"/> <style> a:link{color:#fff;text-decoration: none;} a:visited{color:#fff;} #export{display:none;margin:0 auto;width:250px;height:250px;margin-top:50px;margin-bottom:50px} .operation-btns .o-btn1{background-size:11.6rem 4.325rem} .operation-btns .o-btn2{background-size:11.6rem 3.75rem} center{color: #fff;} </style> <link rel="stylesheet" type="text/css" href="img/strap.min.css"> </head> <body> <div class="wrapper"> <img src="" alt="" class="img-load" style="width: 9.5rem; position: fixed; top: 0px; left: -9999px;"> <div class="operation-header"> <div class="h-title"> </div> </div> <div class="operation-box"> <a class="prev" onClick='changeHat()'></a> <div class="operation-img"> <div class="cropper-content" id="content"> <canvas class="" id='cvs'></canvas> </div> </div> <a class="next" onClick='changeHat()'></a> </div> <img id='export' alt='国庆专属头像' src='' /> <div class="operation-btns"> <a class="o-btn1"> <input class="o-btn1" id='upload' type='file' onchange='viewer()' style='opacity: 0;'> </a> <a class="o-btn2" onClick='exportFunc()' style="display: none;"> </a> </div> <div class="operation-done"> <img src="img/act-done-happy.png" class="act-done-happy"> </div> <div> <center> <a href="http://zhongwangpp.com/" target="_blank"><img src="img/163296214936538432.png" style="margin-bottom:1.5rem;height:2rem;"></a> </center> </div> <div> <center> <a href="http://52zyw.com" target="_blank"><img src="img/163289263332916427.png" style="margin-bottom:1.5rem;height:2rem;"></a> </center> </div> </div> <div style='display: none'> <img id='img' src='' alt='' /> <img class='hide' id='hat0' src='img/hat6.png' /> <img class='hide' id='hat1' src='img/hat0.png' /> <img class='hide' id='hat2' src='img/hat2.png' /> <img class='hide' id='hat3' src='img/hat3.png' /> <img class='hide' id='hat4' src='img/hat1.png' /> <img class='hide' id='hat5' src='img/hat4.png' /> <img class='hide' id='hat6' src='img/hat5.png' /> <img class='hide' id='hat7' src='img/hat7.png' /> <img class='hide' id='hat8' src='img/hat8.png' /> <img class='hide' id='hat9' src='img/hat9.png' /> <img class='hide' id='hat10' src='img/hat10.png' /> <img class='hide' id='hat11' src='img/hat11.png' /> <img class='hide' id='hat12' src='img/hat12.png' /> <img class='hide' id='hat13' src='img/hat13.png' /> <img class='hide' id='hat14' src='img/hat14.png' /> <img class='hide' id='hat15' src='img/hat15.png' /> <img class='hide' id='hat16' src='img/hat16.png' /> <img class='hide' id='hat17' src='img/hat17.png' /> <img class='hide' id='hat18' src='img/hat18.png' /> <img class='hide' id='hat19' src='img/hat19.png' /> <img class='hide' id='hat20' src='img/hat20.png' /> <img class='hide' id='hat21' src='img/hat21.png' /> <img class='hide' id='hat22' src='img/hat22.png' /> <img class='hide' id='hat23' src='img/hat23.png' /> </div> <script src="img/fabric.min.js"></script> <script> var cvs = document.getElementById("cvs"); var ctx = cvs.getContext("2d"); var exportImage = document.getElementById("export"); var img = document.getElementById("img"); var hat = "hat0"; var canvasFabric; var hatInstance; //var screenWidth = window.screen.width < 500 ? window.screen.width : 300; var screenWidth = document.getElementById("content").scrollHeight; function viewer() { var file = document.getElementById("upload").files[0]; console.log(file); var reader = new FileReader; if (file) { reader.readAsDataURL(file); reader.onload = function(e) { img.src = reader.result; img.onload = function() { img2Cvs(img) } } } else { img.src = "" } } function img2Cvs(img) { cvs.width = img.width; cvs.height = img.height; cvs.style.display = "block"; canvasFabric = new fabric.Canvas("cvs", { width: screenWidth, height: screenWidth, backgroundImage: new fabric.Image(img, { scaleX: screenWidth / img.width, scaleY: screenWidth / img.height }) }); changeHat(); document.getElementsByClassName("o-btn1")[0].style.display = "none"; document.getElementsByClassName("o-btn2")[0].style.display = "block"; //document.getElementById("tip").style.opacity = 1 } function changeHat() { document.getElementById(hat).style.display = "none"; var hats = document.getElementsByClassName("hide"); hat = "hat" + (+hat.replace("hat", "") + 1) % hats.length; var hatImage = document.getElementById(hat); hatImage.style.display = "block"; if (hatInstance) { canvasFabric.remove(hatInstance) } console.log(hatImage.width); console.log(100 / hatImage.width); hatInstance = new fabric.Image(hatImage, { top: 0, left: 0, scaleX: screenWidth / hatImage.width, scaleY: screenWidth / hatImage.height, cornerColor: "#0b3a42", cornerStrokeColor: "#fff", cornerStyle: "circle", transparentCorners: false, rotatingPointOffset: 30 }); hatInstance.setControlVisible("bl", false); hatInstance.setControlVisible("tr", false); hatInstance.setControlVisible("tl", false); hatInstance.setControlVisible("mr", false); hatInstance.setControlVisible("mt", false); canvasFabric.add(hatInstance) } function exportFunc() { document.getElementsByClassName("operation-box")[0].style.display = "none"; document.getElementsByClassName("operation-btns")[0].style.display = "none"; /*document.getElementById("exportBtn").style.display = "none"; document.getElementById("tip").innerHTML = "长按图片保存或分享"; document.getElementById("change").style.display = "none";*/ cvs.style.display = "none"; exportImage.style.display = "block"; exportImage.src = canvasFabric.toDataURL({ width: screenWidth, height: screenWidth }); alert('长按图片保存或分享'); } </script> </body> </html>

评论收藏

内容反馈

版权申诉