前端程序員墓志銘:永遠(yuǎn)不要使用Alpha版的插件
最近寫(xiě)一個(gè)活動(dòng)項(xiàng)目需要將一個(gè)HTML頁(yè)面轉(zhuǎn)為圖片,之前一直是后臺(tái)采用拼接的方式完成,然而現(xiàn)在遇到一個(gè)問(wèn)題,Java拼接的HTML在生成圖片時(shí)由于里面的文字太長(zhǎng)沒(méi)法自動(dòng)換行,想使用css的強(qiáng)制換行
#wrap{word-break:break-all; width:200px;}
或者
#wrap{word-wrap:break-word; width:200px;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
均沒(méi)有實(shí)現(xiàn)想要的換行效果,不知道有沒(méi)有哪位朋友遇到過(guò)類(lèi)似的情況,歡迎分享一下.
總之我使用css是沒(méi)有走通,于是選擇使用html2canvas.js這個(gè)插件在前端生成圖片.
在介紹這個(gè)插件前先科普一下軟件的版本號(hào).
Alpha：是內(nèi)部測(cè)試版,一般不向外部發(fā)布,會(huì)有很多Bug.一般只有測(cè)試人員使用铭若。
Beta：也是測(cè)試版奶栖，這個(gè)階段的版本會(huì)一直加入新的功能。在Alpha版之后推出。
α礼旅、β、λ常用來(lái)表示軟件測(cè)試過(guò)程中的三個(gè)階段缘琅，α是第一階段，一般只供內(nèi)部測(cè)試使用褒颈；β是第二個(gè)階段，已經(jīng)消除了軟件中大部分的不完善之處励堡，但仍有可能還存在缺陷和漏洞谷丸，一般只提供給特定的用戶群來(lái)測(cè)試使用；λ是第三個(gè)階段应结，此時(shí)產(chǎn)品已經(jīng)相當(dāng)成熟刨疼，只需在個(gè)別地方再做進(jìn)一步的優(yōu)化處理即可上市發(fā)行。
這款插件最坑的地方就是將Alpha版放了出來(lái),而我剛好就選擇了最新的版本
以后使用插件就應(yīng)該看官網(wǎng)demo引入哪個(gè)版本的插件我們就使用哪個(gè),要不這坑進(jìn)去了真的很難出來(lái).
行了,廢話不多說(shuō)了,直接進(jìn)入正題
使用哪種語(yǔ)法
首先我們整體了解一下html2canvas.js這個(gè)插件,大家可以到官網(wǎng)上查閱文檔
http://html2canvas.hertzen.com/documentation.html
或者參閱這篇文章
http://www.reibang.com/p/6a07e974a7e8
引入html2canvas.js文件,我這里使用的是0.4.1版本(從1.0版降下來(lái)的),
上面兩個(gè)鏈接分別對(duì)應(yīng)兩種語(yǔ)法格式
html2canvas(document.getElementById('id'))
.then(function(canvas) {document.body.appendChild(canvas);});
但是我在使用這種語(yǔ)法報(bào)錯(cuò),然后參考官網(wǎng)的文檔寫(xiě)法
html2canvas(document.getElementById("target"), {
allowTaint: true, //允許污染
taintTest: true, //在渲染前測(cè)試圖片(沒(méi)整明白有啥用)
useCORS: true, //使用跨域(當(dāng)allowTaint為true時(shí)這段代碼沒(méi)什么用,下面解釋)
background: "#fff",
onrendered: function (canvas) {
imgBlob = canvas.toDataURL('image/jpeg', 1.0); //將圖片轉(zhuǎn)為base64
imgBlob = imgBlob.toString().substring(imgBlob.indexOf(",") + 1);//截取base64以便上傳
}
});
有關(guān)允許canvas污染的問(wèn)題可以參考此文
https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_enabled_image
其實(shí)這里的代碼很好理解,傳參數(shù)進(jìn)去,剩下的就交給插件去完成,我們只要拿到base64流就可以了.
上文中說(shuō)useCORS沒(méi)有起作用我們看看源碼就明白為什么沒(méi)起作用了
...
} else if ( isSameOrigin( src ) || options.allowTaint === true ) {
...
} else if ( supportCORS && !options.allowTaint && options.useCORS ) {
...
};
...
這里我們看到這兩個(gè)判斷是互相矛盾的options.allowTaint為true那么!options.allowTaint永遠(yuǎn)為false
allowTaint該設(shè)置成true還是false
點(diǎn)擊查看
因?yàn)?code>allowTaint表示是否允許被污染,而被污染的canvas是沒(méi)法使用toDataURL()轉(zhuǎn)base64流的,但是我們這需要base64,所有allowTaint需要被設(shè)置為false
當(dāng)設(shè)置為true時(shí),會(huì)報(bào)這樣的錯(cuò)誤
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
at Object.onrendered (http://127.0.0.1:8080/:142:32)
at Object.options.complete (http://127.0.0.1:8080/js/html2canvas.js:2711:15)
at start (http://127.0.0.1:8080/js/html2canvas.js:2215:17)
at Image.img.onload (http://127.0.0.1:8080/js/html2canvas.js:2352:7)
useCORS是干嘛的
當(dāng)useCORS為false時(shí)我們發(fā)現(xiàn)
這是什么鬼?圖片去哪了?不過(guò)已經(jīng)有突破了,圖片出來(lái)了,現(xiàn)在我們需要找到圖片不加載的問(wèn)題
我們把
useCORS設(shè)置成true時(shí)是什么效果呢?然鵝效果還是和上圖一樣,但是這次控制臺(tái)出現(xiàn)了錯(cuò)誤
Access to Image at 'http://web.rrzuzu.com/WebStatic/rry-activity/target/images/bj.jpg' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8080' is therefore not allowed access.
...
由于公司里面將圖片資源放在OSS里,這里涉及到跨域的問(wèn)題造成圖片沒(méi)法加載,好了,找到問(wèn)題的所在我們就能很快的解決了,將資源放到同一域名下(OSS設(shè)置允許跨域不知道能不能解決,后期會(huì)再次嘗試一下)
再來(lái)看看解決后的效果
哈哈,大功告成!
哦,對(duì)了,關(guān)于布局的坑我還得提議下
布局
布局一開(kāi)始想到的是使用display: none讓元素隱藏,當(dāng)使用這種方法后發(fā)現(xiàn)生成的什么也沒(méi)有.
沒(méi)辦法,使用position: absolute讓元素跑到視野之外總行了吧top: -9999px;
納尼,一片漆黑,查了些資料發(fā)現(xiàn)生成視野內(nèi)圖片,那么top: 9999px行不行?事實(shí)證明是可以的,這樣設(shè)置總感覺(jué)心理不踏實(shí),萬(wàn)一body的高度為100000px怎么辦?接著有嘗試使用left和right,均沒(méi)什么卵用,這時(shí)想到使用圖層高度,OK,那就試試吧,top: 0px; z-index: -1;完美解決
等等,我們現(xiàn)在只是在模擬器里面測(cè)試,還沒(méi)有在真機(jī)上測(cè)試,當(dāng)在真機(jī)上看到的效果時(shí)我的內(nèi)心是崩潰的,手機(jī)不支持overflow: hidden;屬性WTF,還得想辦法此時(shí)查到了一些資料:
禁止蒙層底部頁(yè)面跟隨滾動(dòng)http://mp.weixin.qq.com/s/704rUV3U0BwQuVea1Iwe4Q
最簡(jiǎn)單的方法時(shí)使用position: fixed;這方法很好,解決了下層頁(yè)面沒(méi)被隱藏和軟鍵盤(pán)彈出后頁(yè)面的問(wèn)題,然而生成的圖片沒(méi)法顯示,依舊是一片漆黑,總之試了很多次,只要在body使用fixed就別想生成圖片,最后發(fā)現(xiàn)只用css是沒(méi)法實(shí)現(xiàn)的了,于是結(jié)合js一起操作
最后使用fixed操作同級(jí)的container讓其在軟件盤(pán)彈出或消失的時(shí)候始終將元素保持bottom: 0;,再讓頁(yè)面沒(méi)法滾動(dòng)
$('.container')[0].addEventListener('touchmove', e => {
e.preventDefault()
}, false)
總結(jié)一句需要生成的元素得在fixed的上層,并且不能讓頁(yè)面滾動(dòng)
至此,功能算是完成了,改踩的坑也踩得差不多了,以后遇到問(wèn)題再繼續(xù)更新
小插曲
當(dāng)時(shí)我在生成圖片的時(shí)候獲取了返回的圖片地址,但是有時(shí)候服務(wù)器并沒(méi)有返回圖片地址,而我需要將圖片地址傳遞到另外的一個(gè)頁(yè)面,所以需要判斷一下,在有地址的時(shí)候再執(zhí)行ajax傳遞并跳轉(zhuǎn)
success: function (res) {
imgUrl = res;
//提交表單
if (imgUrl) {
$(".form").ajaxSubmit({
...
success: function (data) {
if (data.code == 12000) {
debugger;
window.location. + imgUrl;
}
}
});
}
}
如果有朋友對(duì)html2canvas.js有興趣,想查看我的項(xiàng)目源碼的可以到github上拉取,如果大家對(duì)此插件有更深刻的理解歡迎留言
最后再多說(shuō)一句:人人搖是個(gè)啥?掃碼你就知道啦
