html2canvas 問題總結(jié)(跨域 黑邊 超時(shí))

1.首先是跨域問題

最近項(xiàng)目中有一個(gè)功能侨拦,是實(shí)現(xiàn)一個(gè)拼圖功能殊橙,然后使用到了html2canvas這個(gè)庫(kù),在使用的過程中遇到了跨域問題
主要是canvas的todataurl這個(gè)方法狱从,不能拿到別的域名下的資源

因?yàn)榫W(wǎng)站是用的php做的膨蛮,這里就記錄一下php的方式
我們需要把html2canvasproxy.php 這個(gè)腳本放到一個(gè)指定文件夾,然后配置"proxy":"/lib/html2canvas/html2canvasproxy.php"

var ele = document.getElementById('container');
    html2canvas(ele,{
        "proxy":"/lib/html2canvas/html2canvasproxy.php",//跨域支持
        background : '#ffffff',
        onrendered : function(canvas){
            var img = canvas.toDataURL("image/jpeg");
            window.open(img);

        }
    });

插件地址-php

2.如果現(xiàn)在還不行季研,可以直接在瀏覽器里面訪問這個(gè)腳本文件

例如:http://www.domain.com/html2canvasproxy.php 查看提示信息
我這邊后面把timeout改小了敞葛,改為了10

3.再一個(gè)問題就是,如果當(dāng)前要截取的區(qū)域在可視區(qū)域之外训貌,截取會(huì)丟失

例如我如果要截取的是下面的區(qū)域

如果我現(xiàn)在滾動(dòng)了滾動(dòng)條制肮,導(dǎo)致當(dāng)前區(qū)域有一部分在可視區(qū)域外了冒窍,例如下圖


截取出來(lái)的圖片就是下面這樣了,可視區(qū)域之外的地方就丟失了


為了解決這個(gè)問題豺鼻,我就手動(dòng)把滾動(dòng)條移動(dòng)到頂部了$("body,html").scrollTop(0);综液,把當(dāng)前需要截取的區(qū)域給全部顯示全,然后再執(zhí)行html2canvas方法

4.當(dāng)在生成圖片的時(shí)候儒飒,我們切換了頁(yè)面谬莹,有可能生成的圖會(huì)是一張空白

我的理解是,當(dāng)我生成的時(shí)候桩了,如果切換了頁(yè)面附帽,有可能導(dǎo)致背景色覆蓋到生成的圖片上,看起來(lái)就像是一張空白圖井誉,我是直接把背景去掉就解決了蕉扮。
html2canvas

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市颗圣,隨后出現(xiàn)的幾起案子喳钟,更是在濱河造成了極大的恐慌,老刑警劉巖在岂,帶你破解...
    沈念sama閱讀 211,743評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件奔则,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡蔽午,警方通過查閱死者的電腦和手機(jī)易茬,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)及老,“玉大人抽莱,你說(shuō)我怎么就攤上這事⌒窗耄” “怎么了岸蜗?”我有些...
    開封第一講書人閱讀 157,285評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵尉咕,是天一觀的道長(zhǎng)叠蝇。 經(jīng)常有香客問我,道長(zhǎng)年缎,這世上最難降的妖魔是什么悔捶? 我笑而不...
    開封第一講書人閱讀 56,485評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮单芜,結(jié)果婚禮上蜕该,老公的妹妹穿的比我還像新娘。我一直安慰自己洲鸠,他們只是感情好堂淡,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,581評(píng)論 6 386
  • 文/花漫 我一把揭開白布馋缅。 她就那樣靜靜地躺著,像睡著了一般绢淀。 火紅的嫁衣襯著肌膚如雪萤悴。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,821評(píng)論 1 290
  • 那天皆的,我揣著相機(jī)與錄音覆履,去河邊找鬼。 笑死费薄,一個(gè)胖子當(dāng)著我的面吹牛硝全,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播楞抡,決...
    沈念sama閱讀 38,960評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼伟众,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了召廷?” 一聲冷哼從身側(cè)響起赂鲤,我...
    開封第一講書人閱讀 37,719評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎柱恤,沒想到半個(gè)月后数初,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,186評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡梗顺,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,516評(píng)論 2 327
  • 正文 我和宋清朗相戀三年泡孩,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片寺谤。...
    茶點(diǎn)故事閱讀 38,650評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡仑鸥,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出变屁,到底是詐尸還是另有隱情眼俊,我是刑警寧澤,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布粟关,位于F島的核電站疮胖,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏闷板。R本人自食惡果不足惜澎灸,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,936評(píng)論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望遮晚。 院中可真熱鬧性昭,春花似錦、人聲如沸县遣。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至其兴,卻和暖如春鞠抑,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背忌警。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工搁拙, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人法绵。 一個(gè)月前我還...
    沈念sama閱讀 46,370評(píng)論 2 360
  • 正文 我出身青樓箕速,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親朋譬。 傳聞我的和親對(duì)象是個(gè)殘疾皇子盐茎,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,527評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,777評(píng)論 25 707
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)、插件徙赢、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,065評(píng)論 4 62
  • 真空包裝500g
    weikailizhao閱讀 199評(píng)論 0 0
  • 使用 Dispatch Source 而不使用 dispatch_async 的唯一原因就是利用聯(lián)結(jié)的優(yōu)勢(shì)字柠。 聯(lián)結(jié)...
    whlpkk閱讀 725評(píng)論 0 3