小視頻系統源碼js生成二維碼,並將頁面轉爲圖片同時下載

<body >
    <div class="bg">
        <div class="text">輸入網址,點擊按鈕生成二維碼</div>
        <input type="text" class="inp" value="http:www.baidu.com?id=1">
        <button type="button" class="erweima">生成二維碼</button>
        <div id="qrcode"></div>
        <div class="text">點擊生成圖片,將圖片分享給別人可以領獎利</div>
        <button type="button" class="picture">生成圖片</button>
    </div>
    <div class="need .clearfix" ></div>
</body>
<script src="./api/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="./api/jquery.qrcode.min.js"></script>
<script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js" type="text/javascript" charset="utf-8" async defer></script>
<script src="./api/canvas2image.js" type="text/javascript" charset="utf-8" async defer></script>
<script>
    var inp=$(".inp").val();
    var info=$(".title");
    var save = $(".save");
    let w = $(window).width(); //圖片寬度
    let h = $(window).height(); //圖片高度
    console.log(w+"    "+h);
    console.log("操作系統"+getOS());
	//選擇需要生成圖片的標籤, 將jQuery對象轉換爲dom對象, 
    var need = $("body").get(0); 
    // 生成二維碼
    $('.erweima').click(function() {
        jQuery('#qrcode').qrcode("http://www.baidu.com");
    })
    // 點擊轉成canvas,最後用於生成圖片
    $('.picture').click(function(e) {
        // 調用html2canvas插件
        html2canvas(need).then(function(canvas) {
            // canvas寬度
            var canvasWidth = canvas.width;
            // canvas高度
            var canvasHeight = canvas.height;
            // 控制檯查看繪製區域的寬高
            console.log('canvas:'+ canvasWidth+"    "+canvasHeight);
            // 渲染canvas,這個時候將我們用於生成圖片的區域顯示出來
             $(".need").show();
            // 將canvas轉爲圖片
            var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
            // 渲染圖片,並且加到頁面中查看效果
            $(".need").html(img);
            // 保存
            // console.log(img.src)
            downloadFile('測試.png', img.src);
        });
    });
    // 下載圖片
    function downloadFile(fileName, content) {
        let aLink = document.createElement('a');
        let blob = base64ToBlob(content); //new Blob([content]);

        let evt = document.createEvent("HTMLEvents");
        evt.initEvent("click", true, true);//initEvent 不加後兩個參數在FF下會報錯  事件類型,是否冒泡,是否阻止瀏覽器的默認行爲
        aLink.download = fileName;
        aLink.href = URL.createObjectURL(blob);
        // aLink.dispatchEvent(evt);
        aLink.click()
    }
    //base64轉blob
    function base64ToBlob(code) {
        let parts = code.split(';base64,');
        let contentType = parts[0].split(':')[1];
        let raw = window.atob(parts[1]);
        let rawLength = raw.length;

        let uInt8Array = new Uint8Array(rawLength);

        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {type: contentType});
    }
</script>
<style type="text/css" media="screen">
        body {
            margin: 0;
            padding: 20px;
        }
        .bg{
            width: 100%;
            min-height: 100%;
            height: 100vh;
            background: url('./image/timg.jpg');
            text-align: center;
            padding-top: 15px;
            text-align: center;
        }
        .text{
            color: #fff;
            width: 80%;
            margin: 15px;
            font-weight: 700;
            padding: 0 15px;
            line-height: 50px;
            border: 1px solid #b7c092;
            border-radius: 10px;
            outline: none;
        }
        .inp {
            width: 80%;
            display: block;
             margin-left: 30px;
             margin-bottom: 15px;
            line-height: 40px;
            border: 1px solid pink;
            font-size: 20px;
            border-radius: 10px;
        }
        .save, .picture, .erweima{
            border-radius: 10px;
            border: none;
            margin-bottom: 15px;
            width: 150px;
            padding: 15px;
            color: #fff;
            font-size: 22px;
            font-weight: 700;
            background: skyblue;
            outline: none;
        }
        .title{
            /* margin-top: 100px; */
        }
        .need{
            width: 100%;
            /* background: url(20.jpg) no-repeat; */
            position: fixed;
            left: 0;
            top: 0;
            display: none;
            
        }
        .need img {
            width: 90%;
            display: block;
            position: absolute;
            left: 5%;
            top: 20px;
            /*transform: translate(-50%, -50%);*/
            border: 1px solid #000;
        }
        .clearfix::before,
        .clearfix::after {
          content: "";
          display: table;
        }

        .clearfix::after {
          clear: both;
        }
    </style>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章