国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

使用html2canvas實現(xiàn)瀏覽器截圖

bergwhite / 1656人閱讀

使用html2canvas實現(xiàn)瀏覽器截圖,必須在服務(wù)器環(huán)境下才能實現(xiàn)。

作用

html2canvas可以通過純JS對瀏覽器端經(jīng)行截屏，但截圖的精確度還有待提高，部分css不可識別，所以在canvas中不能完美呈現(xiàn)原畫面樣式

/*多行溢出省略就不行，只能超出隱藏了*/
     .book_inf{
            position: relative; 
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
支持的瀏覽器

Firefox 3.5+

Google Chrome

Opera 12+

IE9+

Safari 6+

基本語法 
/*參數(shù)：
* #screenshots 所需要截圖的元素id，截圖后要執(zhí)行的函數(shù)，
* backgroundColor 配置項背景色
* canvas為截圖后返回的最后一個canvas
*/
function screenshotsImg(){
       html2canvas(document.querySelector("#screenshots"),{
            backgroundColor: "transparent",// 設(shè)置背景透明
        }).then(canvas => {
            canvasTurnImg(canvas) //保存的圖片格式轉(zhuǎn)換方法
        });
    }
可用配置項
參數(shù)名稱 類型 默認(rèn)值 描述
allowTaint boolean false Whether to allow cross-origin images to taint the canvas---允許跨域
background string #fff Canvas background color, if none is specified in DOM. Set undefined for transparent---canvas的背景顏色，如果沒有設(shè)定默認(rèn)白色此處被坑，我改為backgroundColor可用
height number null Define the heigt of the canvas in pixels. If null, renders with full height of the window.---canvas高度設(shè)定
letterRendering boolean false Whether to render each letter seperately. Necessary if letter-spacing is used.---在設(shè)置了字間距的時候有用
logging boolean false Whether to log events in the console.---在console.log()中輸出信息
proxy string undefined Url to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won"t be loaded.---代理地址
taintTest boolean true Whether to test each image if it taints the canvas before drawing them---是否在渲染前測試圖片
timeout number 0 Timeout for loading images, in milliseconds. Setting it to 0 will result in no timeout.---圖片加載延遲，默認(rèn)延遲為0，單位毫秒
width number null Define the width of the canvas in pixels. If null, renders with full width of the window.---canvas寬度
useCORS boolean false Whether to attempt to load cross-origin images as CORS served, before reverting back to proxy--跨域代理
設(shè)置圖片格式 1、從canvas中直接提取圖片元數(shù)據(jù) 
  // 圖片導(dǎo)出為 png 格式
        var type = "png";
        var imgData = canvas.toDataURL(type);
2、將mime-type改為image/octet-stream，強制讓瀏覽器直接download 
/**
 * 獲取mimeType
 * @param  {String} type the old mime-type
 * @return the new mime-type
 */
var _fixType = function(type) {
    type = type.toLowerCase().replace(/jpg/i, "jpeg");
    var r = type.match(/png|jpeg|bmp|gif/)[0];
    return "image/" + r;
};
   
// 加工image data，替換mime type
imgData = imgData.replace(_fixType(type),"image/octet-stream");
3、圖片download到本地 
/**
 * 在本地進行文件保存
 * @param  {String} data     要保存到本地的圖片數(shù)據(jù)
 * @param  {String} filename 文件名
 */
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);
};
   
// 下載后的文件名
var filename = "baidufe_" + (new Date()).getTime() + "." + type;
// download
saveFile(imgData,filename);
案例

案例

參考資料

html2canvas
html2canvas
如何使用js將canvas保存為圖片文件，并且可以自定義文件名

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/92753.html

相關(guān)文章

  • 使用html2canvas.js實現(xiàn)功能中遇到的一些問題

    摘要：這個功能在我的瀏覽器和谷歌瀏覽器時可以實現(xiàn)功能的。但是發(fā)現(xiàn)華為自帶的瀏覽器不支持。 [1]我要實現(xiàn)的功能是用戶填寫完表單后，點擊提交按鈕，截圖。截圖放在一個彈層里面，給一句提示長按圖片保存至手機。 showImg(https://segmentfault.com/img/bVbtFCW?w=324&h=578); js引入的是bluebird.min.js和html2canvas.js...

    Alliot 評論0 收藏0

  • 使用html2canvas.js實現(xiàn)功能中遇到的一些問題

    摘要：這個功能在我的瀏覽器和谷歌瀏覽器時可以實現(xiàn)功能的。但是發(fā)現(xiàn)華為自帶的瀏覽器不支持。 [1]我要實現(xiàn)的功能是用戶填寫完表單后，點擊提交按鈕，截圖。截圖放在一個彈層里面，給一句提示長按圖片保存至手機。 showImg(https://segmentfault.com/img/bVbtFCW?w=324&h=578); js引入的是bluebird.min.js和html2canvas.js...

    zhisheng 評論0 收藏0

  • JS中實現(xiàn)網(wǎng)頁截圖

    摘要：前端頁面中可以使用將整個網(wǎng)頁或一部分區(qū)域截取成圖片并導(dǎo)出。目前比較好用的處理方式是先將轉(zhuǎn)換成，再從中導(dǎo)出圖片。調(diào)用，現(xiàn)在我們有了一個對象，下一步是保存到文件中。至此，對網(wǎng)頁中的一部分進行截圖并保存成文件就完成了。 前端頁面中可以使用JS將整個網(wǎng)頁或一部分區(qū)域截取成圖片并導(dǎo)出。 今天剛做了一次這個功能，和大家分享一下經(jīng)驗。 使用html2canvas將dom轉(zhuǎn)換成canvas 網(wǎng)頁截圖的...

    xiaowugui666 評論0 收藏0

  • 實現(xiàn)Google帶截圖功能的web反饋插件

    摘要：谷歌是通過來實現(xiàn)這個組件的，比較復(fù)雜谷歌的工具加載文件和截圖文件有興趣的同學(xué)可以看一下。高亮區(qū)域核心部分截圖搞定了，接下來就是高亮區(qū)域了。 幾乎所有的APP應(yīng)用包括Web應(yīng)用都需要一個意見反饋，這樣才能了解用戶對產(chǎn)品的意見和建議，以便于不斷提升完善自己的產(chǎn)品。目前的反饋組件一般有兩種，一種是打開一個反饋頁面填寫表單，另一種則是通過彈窗來完成，相比較而言第二種更加方便，而且更加容易組件化...

    freecode 評論0 收藏0

發(fā)表評論

0條評論

bergwhite

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<