亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

bergwhite / 1737人閱讀

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

作用

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

/*多行溢出省略就不行，只能超出隱藏了*/
     .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+

基本語(yǔ)法 
/*參數(shù)：
* #screenshots 所需要截圖的元素id，截圖后要執(zhí)行的函數(shù)，
* backgroundColor 配置項(xiàng)背景色
* canvas為截圖后返回的最后一個(gè)canvas
*/
function screenshotsImg(){
       html2canvas(document.querySelector("#screenshots"),{
            backgroundColor: "transparent",// 設(shè)置背景透明
        }).then(canvas => {
            canvasTurnImg(canvas) //保存的圖片格式轉(zhuǎn)換方法
        });
    }
可用配置項(xiàng)
參數(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的背景顏色，如果沒(méi)有設(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è)置了字間距的時(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---是否在渲染前測(cè)試圖片
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，強(qiáng)制讓瀏覽器直接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到本地 
/**
 * 在本地進(jìn)行文件保存
 * @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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/92753.html

相關(guān)文章

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

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

    Alliot 評(píng)論0 收藏0

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

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

    zhisheng 評(píng)論0 收藏0

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

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

    xiaowugui666 評(píng)論0 收藏0

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

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

    freecode 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<