小麦子 发表于 2024-12-5 10:44:43

canvasusercard 电子名片(原创)





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生成名片</title>
    <link rel="stylesheet" href="https://www.jq22.com/demo/canvas-user-card202401172357/css/index1.css?x=3">
</head>
<body>
<div class="box">
    <divid="container">
      <div class="container-border">
            <div class="flex">
                <img id="img" style="width: 180px;height: 180px;" src="img/img.png" alt="">
                <div class="detail font-color">
                  <div>姓名:<span class="x-nam">樱桃小丸子</span></div>
                  <div>性别:<span class="x-sex">女</span></div>
                  <div>年龄:<span class="x-age">18</span></div>
                  <div>手机:<span class="x-tel">199 3214 6789</span></div>
                </div>
            </div>
            <div class="introduce font-color">
                个人简介:<span class="x-desc">在这个世界上,我们不是孤立的存在,而是相互联系的整体。我们要学会与他人相互尊重、理解和支持,共同创造一个更加美好的世界。此外,我们还要注重内心的修炼和成长,不断提升自己的境界和智慧。</span></span>
            </div>
      </div>
    </div>
    <div class="rightConent">
      <div style="position: relative">
            <input class="file-input" type="file" name="myfile">
            <div class="file-font">上传头像</div>
      </div>

      <div class="inputBox">
            <input class="nam" type="text" value="" placeholder="请输入姓名">
            <input class="sex" type="text" value="" placeholder="请输入性别">
            <input class="age" type="text" value="" placeholder="请输入年龄">
            <input class="tel" type="text" value="" placeholder="请输入手机">
            <input class="desc" type="textarea" value="" placeholder="请输入简介">
            <!-- <input class="picname" type="text" value="" placeholder="图片名"> -->
      </div>
      <div class="bg-style">
            <div class="green bg" data="green">绿色</div>
            <div class="purple bg" date="purple">紫色</div>
            <div class="black bg" data="black">黑色</div>
      </div>
      <div id="saveBtn">下载保存名片</div>
    </div>
</div>
</body>
</html>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/html2canvas/1.4.1/html2canvas.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
      // canvas生成图片
      $("#saveBtn").on("click", function () {
            let getPixelRatio = function (context) { // 获取设备的PixelRatio
                let backingStore = context.backingStorePixelRatio ||
                  context.webkitBackingStorePixelRatio ||
                  context.mozBackingStorePixelRatio ||
                  context.msBackingStorePixelRatio ||
                  context.oBackingStorePixelRatio ||
                  context.backingStorePixelRatio || 0.5;
                return (window.devicePixelRatio || 0.5) / backingStore;
            };
            let nam = $('.nam').val()
            let sex = $('.sex').val()
            let age = $('.age').val()
            let tel = $('.tel').val()
            let desc = $('.desc').val()

            if (nam) {
                $('.x-nam').text(nam)
            }
            if (sex) {
                $('.x-sex').text(sex)
            }
            if (age) {
                $('.x-age').text(age)
            }
            if (tel) {
                $('.x-tel').text(tel)
            }
            if (desc) {
                $('.x-desc').text(desc)
            }
            let generateName = $('.picname').val() ? $('.picname').val() + ".jpg" : '默认' + ".jpg"//图片名
            let ImageContainer = document.getElementById("container");
            let width = ImageContainer.offsetWidth;
            let height = ImageContainer.offsetHeight;
            let canvas = document.createElement("canvas");
            let context = canvas.getContext('2d');
            let scale = getPixelRatio(context);
            canvas.width = width * scale;
            canvas.height = height * scale;
            canvas.style.width = width + 'px';
            canvas.style.height = height + 'px';
            context.scale(scale, scale);

            let opts = {
                scale: scale,
                canvas: canvas,
                width: width,
                height: height,
                dpi: window.devicePixelRatio
            };
            html2canvas(ImageContainer, opts).then(function (canvas) {
                context.imageSmoothingEnabled = false;
                context.webkitImageSmoothingEnabled = false;
                context.msImageSmoothingEnabled = false;
                context.imageSmoothingEnabled = false;
                let dataUrl = canvas.toDataURL('image/jpeg', 1.0);
                dataURIToBlob(generateName, dataUrl, callback);
            });
      });
    })
    $(".bg").on("click", function (e) {
      console.log(e.currentTarget.classList)
      $('.container-border').removeClass('green')
      $('.container-border').removeClass('purple')
      $('.container-border').removeClass('black')
       $('.container-border').addClass(e.currentTarget.classList)
    })
    let dataURIToBlob = function (generateName, dataURI, callback) {
      let binStr = atob(dataURI.split(',')),
            len = binStr.length,
            arr = new Uint8Array(len);

      for (let i = 0; i < len; i++) {
            arr = binStr.charCodeAt(i);
      }
      callback(generateName, new Blob());
    }
    let callback = function (generateName, blob) {
      let triggerDownload = $("<a>").attr("href", URL.createObjectURL(blob)).attr("download", generateName).appendTo("body").on("click", function () {
            if (navigator.msSaveBlob) {
                return navigator.msSaveBlob(blob, generateName);
            }
      });
      triggerDownload.click();
      triggerDownload.remove();
    };

    function changeImgFile(input) {
      let file = input.files;
      if (window.FileReader) {
            let fr = new FileReader();
            fr.readAsDataURL(file);
            fr.onloadend = function () {
                document.getElementById("img").src = fr.result;
            }
      }
    };
</script>

页: [1]
查看完整版本: canvasusercard 电子名片(原创)