將 HTML 生成圖片

Liter_發表於2017-12-25
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 僅供參考 程式碼較亂 有待提高

相關文章