手機端點擊下載按鈕將頁面保存成圖片到本地

時間 2019-11-19

標籤手機端點下載按鈕頁面保存圖片本地简体版

原文原文鏈接

連接: https://pan.baidu.com/s/1bmZuTF84zl8C2mcQuk4Gtw 提取碼: zbeq javascript

直接上代碼：php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html元素轉canvas並一鍵生成png圖片(支持img圖片元素)</title>
    <!-- html2canvas將Dom節點在Canvas裏邊畫出來 -->
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/html2canvas.min.js"></script>
 
    <!-- 將canvas圖片保存成圖片 -->
    <script src="js/canvas2image.js"></script>
    <script src="js/base64.js"></script>
    <style>
        p{
            font-size: 15px;
            font-family: 'Microsoft YaHei', 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'STHeiti', 'WenQuanYi Micro Hei', 'SimSun', sans-serif;
        }
        #content{
            border-radius: 3px;
        }
        #btnSave,#Download{
            position: absolute;
            left: 180px;
            top: 540px;
            width: 78px;
            height: 30px;
            background-color: #22b4f6;
            color: #fff;
            text-align: center;
            border-radius: 3px;
            border: none;
        }
        #Download{
            margin-left: 560px;
        }
        .tx,.bt{
            border: 1px solid #999;
            width: 100px;
            height: 20px;
            border-radius: 3px;
        }
        .bt{
            background-color: #22b4f6;
            color: #fff;
            text-align: center;
            border: none;
        }
    </style>
</head>
<body>

<div>注意：html2canvas 只能在服務器中抓取img</div>
    <div id="content" style="width:500px;height:500px;border:1px solid #22b4f6;float:left;text-align:center; background: #fff;">
        
        <p>暱稱：馬雲雲</p>
        <p>技能：前端 + 後端 + 小程序 + webapp</p>
        <p>語言：html五、php、mysql</p>
        <p>腳本：javascript</p>
        <p>框架：vue.js、smarty、thinkphp、MUI、WeUI、Bootstrap</p>
        <p><input type="text" class="tx" placeholder="微信公衆號開發"></p>
        <p><input type="button" class="bt" value="網站微站開發"></p>
    </div>
    <div style="width:60px;height:302px;float:left;text-align:center;line-height:302px;font-size:30px;color:#22b4f6;">==></div>


    <div id="images" style="width:190px;height:302px;float:left;text-align:center;line-height:302px">圖片預覽區</div>


    <button id="btnSave">抓取圖片</button><button id="Download">下載圖片</button>
</body>
<script>
/*生成canvas圖形*/
 
// 獲取按鈕id
var btnSave = document.getElementById("btnSave");
// 獲取內容id
var content = document.getElementById("content");
// 進行canvas生成
btnSave.onclick = function(){
    html2canvas(content, {
        onrendered: function(canvas) {
            //添加屬性
            canvas.setAttribute('id','thecanvas');
            //讀取屬性值
            // var value= canvas.getAttribute('id');
            document.getElementById('images').innerHTML = '';
            document.getElementById('images').appendChild(canvas);
        }
    });
}
</script>
<script>
/*
 * 說明
 * 不支持跨域圖片
 * 不能在瀏覽器插件中使用
 * 部分瀏覽器上不支持SVG圖片
 * 不支持Flash
 */

var Download = document.getElementById("Download");

Download.onclick = function(){

    var oCanvas = document.getElementById("thecanvas");
    var img_data1 = Canvas2Image.saveAsPNG(oCanvas, true).getAttribute('src');
    
    //由於手機端沒法下載base64圖片地址，須要用後臺 代碼轉換爲圖片而後發送回前端
    //判斷是否手機瀏覽器
    if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i))) {
        //img_data1  圖片路徑
        $.ajax({
            type : "post",
                url : "/baseimg.php",
                data : {
                    "strImg":img_data1
                },
                success : function(data) {
                    console.log(data);
                    saveFile(data, 'richer.png');
                } 
            });
    }else {
        saveFile(img_data1, 'richer.png');
    }
}



// 保存文件函數
var saveFile = function(data, filename){
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = data;
    save_link.download = filename;
   
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);
};
</script>

</html>

baseimg.phphtml

<?php

$image = $_POST['strImg'];
$imageName = date("His",time())."_".rand(1111,9999).'.png';
if (strstr($image,",")){
  $image = explode(',',$image);
  $image = $image[1];
}
$path = "./".date("Ymd",time());
if (!is_dir($path)){ //判斷目錄是否存在 不存在就建立
  mkdir($path,0777,true);
}
$imageSrc= $path."/". $imageName; //圖片名字
$r = file_put_contents($imageSrc, base64_decode($image));//返回的是字節數
if (!$r) {
 $tmparr1="圖片生成失敗";
 echo json_encode($tmparr);
}else{

$uril = "https://".$_SERVER['SERVER_NAME'];  //獲取當前域名（不含端口號）
$imageSrc = substr($imageSrc,1);
$paths = $uril.$imageSrc;
 echo $paths;

}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。