js擷取html元素生成圖片

阿新 • • 發佈：2019-01-26

使用html2canvas將html元素擷取到canvas顯示，再由canvas轉換為圖片。注意：要擷取的元素裡面不能使用跨域名的圖片連結，否則會汙染canvas。
html2canvas的github連結：https://github.com/niklasvh/html2canvas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .my-div 
{
            background-color: antiquewhite;
        }
    </style>
    <script type="application/javascript" src="html2canvas.js"></script>
</head>
<body>
<div class="my-div">
    this is source
    <img src="girls%20day.jpg"/>
</div>
<div class="content" 
>
    <span>next node is a img tag</span>
    <img id="img"/>
</div>
<script>

    //要轉換為圖片的dom物件
    var element = document.querySelector('.my-div');
    //要顯示圖片的img標籤
    var image = document.querySelector('#img');
    //呼叫html2image方法
    html2image(element,image);

    /**
     * create by lrj
     * @param source    要轉換為圖片的dom物件
     * @param image     要顯示圖片的img標籤
     */ 

    function html2image(source,image) {
        html2canvas(source).then(function(canvas) {
            var imageData = canvas.toDataURL(1);
            image.src = imageData;
    });
    }
</script>
</body>
</html>

js擷取html元素生成圖片

使用html2canvas將html元素擷取到canvas顯示，再由canvas轉換為圖片。注意：要擷取的元素裡面不能使用跨域名的圖片連結，否則會汙染canvas。 html2canvas的githu

使用 html2cavas js外掛將HTML頁面生成圖片儲存至本地(pc端)

一, 匯入html2canvas.min.js 大家可以去html2canvas官網看看 http://html2canvas.hertzen.com/ 二，把html頁面生成base64碼 //把html生成圖片 htmltoimg()

JS控制HTML元素的顯示和隱藏

inline 顯示空白 http str 是否 ava .get ntb tel 利用來JS控制頁面控件顯示和隱藏有兩種方法，兩種方法分別利用HTML的style中的兩個屬性，兩種方法的不同之處在於控件隱藏後是否還在頁面上占空位。方法1：　　document.getEl

D3.js 的頁面元素生成

靜態生成元素程式碼---------------------------------------------- <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>

html頁面生成圖片並下載

<body> <div id="shareBody"> <div id="code"></div> <p>一些文字..</p> <p>菜鳥教程，學的不僅是技術，更是夢想！！

使用js實現html首頁圖片輪播效果

第一步：確定事件(onload)併為其繫結一個函式瀏覽器是邊載入邊執行的，先載入head 再載入body。瞭解body的onload事件的執行時間是非常重要的。onload事件是在網頁載入完畢時執行的。當我們在JavaScript中想要操作某元素時而此元素還沒有載入完成（

利用canvas將網頁元素生成圖片並保存在本地

process 500px 綁定查看來源優先 target () amp 利用canvas將網頁元素生成圖片並保存在本地首先引入三個文件： 1、<script type="text/javascript" s

利用canvas將網頁元素生成圖片並儲存在本地

利用canvas將網頁元素生成圖片並儲存在本地首先引入三個檔案： 1、<script type="text/javascript" src="js/html2canvas.js"></script> 2、&a

JS調整html元素大小

想在頁面上實現拖動兩個元素分界位置可以改變元素的大小，基本思路是：在兩個元素之間增加一個分界元素，監聽該元素的mousedown事件，事件觸發時立刻設定監聽頁面mousemove事件以及mouseup事件，mousemove事件處理元素大小修改，mouseup

通過JS給HTML元素增加、刪除和獲取屬性內容

1.通過ID或者其他元素找到要處理的HTML物件：（舉例通過ID） var obj=document.getElementById('id'); 2.操作此物件新增屬性：obj

js將HTML匯出生成word文件

在專案開發中中，遇到將HTML匯出生成word文件，剛開始在網上找了很多資料，基本都是jQuery中的外掛jquery.wordexport.js，剛開始是不想用這個的，這個要引用另一個外掛FileSaver.js;但是沒有找到更好的方法，所以在這裡記錄下js將HTML匯出生成word文件的方法；如

js將html儲存成圖片，pdf

div介面元素生成圖片

首先明確一下需求，介面上擷取部分元素，生成圖片，使用者可以長按儲存。主要是在微信裡，所以設計到生成二維碼的問題。 1、連結生成二維碼，這裡用qrcode生成，搜尋可以搜到相關的js檔案 var myUrl = 'http://test.....'; $(".share_qrcode div.code").q

JS設定HTML元素float樣式問題

用JS設定一個元素的float樣式 div.style.float = 'left'; 這句話在谷歌瀏覽器或許沒問題,但是在IE,火狐下會無效正確寫法是 div.style.styleFloat = 'left'; //ie div.style.cssFloat = 'l

js獲取Html元素的實際寬度高度（offsetWidth）

第一種情況就是寬高都寫在樣式表裡，就比如#div1{width:120px;}。這中情況通過#div1.style.width拿不到寬度，而通過#div1.offsetWidth才可以獲取到寬度。第二種情況就是寬和高是寫在行內中，比如style="width:120px;

html2canvas.js擷取網頁儲存為圖片

<!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8"> &l

JS 獲取html元素寬高及設定寬高

獲取瀏覽器的寬高： var width = window.innerWidth || document.documentElement.clientWidth || document.body.cl

js實現html截圖生成圖片

creat url 風格 then 朋友 ctx str 推薦 pre 　沒有華麗的開場，直入主題，這就是題主隨筆風格。隨筆既是日常工作積累，也可理解是個工作筆記，方便日後用到之處快速的有方可尋。　先講一個需求場景：定制網頁截圖傳給服務器端保存，用戶關註公眾號後

JS將html生成為圖片並下載（適用於大多數瀏覽器，包含手機瀏覽器等（需配合後臺處理））(筆記)

（1）html程式碼 <div id="id="content""> //此處放置需要生成圖片的程式碼 <div class="order_payCon"> <div class="submit_pay_success"

js將html生成為圖片，並儲存在本地

html生成圖片的方式有很多種，有的需要下載安裝外掛，如phantomjs 。顯得未免麻煩了些，有的又是通過後臺來實現的，但個人感覺沒必要做這種互動，也沒必要在服務端生成這些零時檔案，那麼問題來了，有沒有什麼方法，能直接在頁面生成圖片然後儲存在本地呢，答案是肯定的。在這裡我為

js擷取html元素生成圖片

相關推薦