將 HTML 生成圖片

—— Liter

項目需求

1.前端添加管理員信息包括（姓名，年齡，頭像等） 2.將管理員信息顯示在具體背景圖片上，將其生成圖片的形式上傳後臺服務器（base64格式或者文件的格式）

實現思路

1.將管理員信息使用定位將其設置在指定背景圖片上。 2.使用html2canvas將指定div生成canvas 3.將生成的canvas進行base64編碼 或者生成文件 上傳（建議base64上傳）

附加功能

本地上傳圖片 進行base64編碼以後回顯 生成canvas以後支持本地下載

壓縮圖片

使用canvas API quality 值越小，所繪製出的圖像越模糊 對應圖片越小 根據需求設置相對應的數值

var base64 = canvas.toDataURL('image/jpeg', quality );
複製代碼

點擊訪問Demo地址

下面筆記簡單介紹html2canvas的使用
html2canvas官網 github

1. 使用方法

html2canvas(document.getElementById('diploma'), {
        onrendered: function(canvas) {
            $('#view').html(canvas);  // 容器
        },
        width: 547,
        height: 398
    });
複製代碼

diploma html容器 view放置將要生成圖片的容器，設置固定寬高（547 * 398）

注意： 在生成圖片的時候diploma容器不能被遮擋, 不然不能生成完整的canvas

2. 基本經常使用API

參數名稱	類型	默認值	描述
background	string	#fff	若是使用的是png背景圖片這裏但是使用若是沒有 默認透明
height	number	null	須要手動設置
width	number	null	須要手動設置
timeout	number	0	圖片加載延時 默認爲0
timeout	number	0	圖片加載延時 默認爲0

其餘API參看官網手冊

3. 本地上傳頭base64編碼（回顯）

FileReader接口提供了讀取文件的方法和包含讀取結果的事件模型 主要是將上傳的圖片文件轉換成base64

var r = new FileReader()  
    r.readAsDataURL(file)  
    r.onload = function(e){
        $('.avatar img').attr('src', e.target.result)  // 將img  src設置base64
 }
複製代碼

附上FileReader對象詳細文檔

4.canvas轉base64上傳

將html2canvas生成的canvas轉換成base64進行上傳

var canvas = document.querySelector("#view canvas")
    var dataURL = canvas.toDataURL("image/png");
    dataURL = dataURL.split(",")[1];
    return dataURL
複製代碼

附上canvas API文檔

注意事項

轉換base64的時候須要必定時間能夠使用promise函數異步去執行,在沒有base64產生的時候執行會報錯

組後點擊下載 使用js將canvas轉換成文件進行下載

function Download(){
    //cavas 保存圖片到本地  js 實現
    //------------------------------------------------------------------------
    //1.肯定圖片的類型  獲取到的圖片格式 data:image/Png;base64,......
    var type ='png';//你想要什麼圖片格式 就選什麼吧
    var d=document.querySelector('#view canvas');
    var imgdata=d.toDataURL(type);
    //2.0 將mime-type改成image/octet-stream,強制讓瀏覽器下載
    var fixtype=function(type){
        type=type.toLocaleLowerCase().replace(/jpg/i,'jpeg');
        var r=type.match(/png|jpeg|bmp|gif/)[0];
        return 'image/'+r;
    };
    imgdata=imgdata.replace(fixtype(type),'image/octet-stream');
    //3.0 將圖片保存到本地
    var savaFile=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);
    };
    var filename=''+new Date().getDate()+'.'+type;
    //直接用當前幾號作的圖片名字
    savaFile(imgdata,filename);
};
複製代碼

只是個Demo 僅供參考 代碼較亂 有待提升