html2canvas在vue下的巨坑

20171112 發(fā)布于2019-08-23 11:39 / 1645人閱讀

摘要：公司有個(gè)需求就是要在前端生成圖片首先想到的是用生成圖片，自己畫這也太耗時(shí)間了吧后面在上一查有個(gè)的框架可以用這里附上地址使用起來也特別簡單，官網(wǎng)是這么描述的如果你要配置一些參數(shù)可以在傳入的后面進(jìn)行傳參官網(wǎng)文檔可查官網(wǎng)文檔我自己的工程環(huán)境是會(huì)

公司有個(gè)需求就是要在前端生成圖片首先想到的是用canvas生成圖片，自己畫這也太耗時(shí)間了吧！后面在npm上一查有個(gè)html2canvas的框架可以用這里附上地址
html2canvas
使用起來也特別簡單，官網(wǎng)是這么描述的

html

    Hello world!


js
html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

html2canvas(document.querySelector("#capture")  {
    async: true
}).then(canvas => {
    document.body.appendChild(canvas)
});

如果你要配置一些參數(shù)可以在傳入dom的后面進(jìn)行 object 傳參官網(wǎng)文檔可查
官網(wǎng)文檔
我自己的工程環(huán)境是vue-cli會(huì)進(jìn)行webpack打包在ios下運(yùn)行的時(shí)候會(huì)出現(xiàn)錯(cuò)誤因?yàn)槲乙梢粡垐D片是的canvas api 是 toDataURL
這錯(cuò)誤在ios一直顯示是權(quán)限問題在ios 和safari 上的問題是一致的原因是canva繪制dom上的圖片的時(shí)候是 base64的格式（webpack會(huì)對(duì)asstes目錄下的圖片進(jìn)行壓縮）花費(fèi)了幾個(gè)小時(shí)才解決這個(gè)問題，感覺很不值所以分享給大家希望大家別踩進(jìn)去了！解決方法是可以 static目錄或者同域下的文件地址

GPU云服務(wù)器云服務(wù)器 webrtc 在mac下的編譯在iis下的網(wǎng)站都打不開 RDLC報(bào)表在IE10下的問題巨坑

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

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

相關(guān)文章

html2canvas在vue下的巨坑

摘要：公司有個(gè)需求就是要在前端生成圖片首先想到的是用生成圖片，自己畫這也太耗時(shí)間了吧后面在上一查有個(gè)的框架可以用這里附上地址使用起來也特別簡單，官網(wǎng)是這么描述的如果你要配置一些參數(shù)可以在傳入的后面進(jìn)行傳參官網(wǎng)文檔可查官網(wǎng)文檔我自己的工程環(huán)境是會(huì) 公司有個(gè)需求就是要在前端生成圖片首先想到的是用canvas生成圖片，自己畫這也太耗時(shí)間了吧！后面在npm上一查有個(gè)html2canvas的框架可以用...

raledong 2019-08-29 16:36 評(píng)論0 收藏0
html2canvas在vue下的巨坑

摘要：公司有個(gè)需求就是要在前端生成圖片首先想到的是用生成圖片，自己畫這也太耗時(shí)間了吧后面在上一查有個(gè)的框架可以用這里附上地址使用起來也特別簡單，官網(wǎng)是這么描述的如果你要配置一些參數(shù)可以在傳入的后面進(jìn)行傳參官網(wǎng)文檔可查官網(wǎng)文檔我自己的工程環(huán)境是會(huì) 公司有個(gè)需求就是要在前端生成圖片首先想到的是用canvas生成圖片，自己畫這也太耗時(shí)間了吧！后面在npm上一查有個(gè)html2canvas的框架可以用...

wow_worktile 2019-08-02 11:24 評(píng)論0 收藏0
iframe onload事件被block的巨坑

摘要：于是關(guān)鍵詞求助百度，給出的答案要不說是的問題，要不是說客戶端的問題，都嘗試了一下，發(fā)現(xiàn)一點(diǎn)用處都沒有。但是仍然有點(diǎn)奇怪，也是使用，后來回憶，在換百度這個(gè)鏈接之前殺了一次進(jìn)程，應(yīng)該是這個(gè)因素導(dǎo)致的。寫在前面最近接手了一個(gè)古舊的項(xiàng)目，跟客戶端、服務(wù)器端一起調(diào)一個(gè)支付相關(guān)的app內(nèi)嵌H5頁面，這個(gè)頁面有兩部分組成，主頁面A加上一個(gè)最終支付頁面B，B頁面是通過iframe嵌入到A頁面中的，...

darryrzhong 2019-08-26 10:56 評(píng)論0 收藏0
vue2實(shí)踐（持續(xù)更新）

摘要：記錄一些小技巧和踩過的坑由于本篇文章內(nèi)容太多，導(dǎo)致編輯器有點(diǎn)卡，所以新開辟了一篇實(shí)踐二，后續(xù)再這里更新。組件的生命周期函數(shù)是在標(biāo)簽里的數(shù)據(jù)發(fā)生變化時(shí)候觸發(fā)數(shù)據(jù)可能更新了，但是沒有綁定到上面的話，不會(huì)調(diào)用鉤子函數(shù)。記錄一些小技巧和踩過的坑由于本篇文章內(nèi)容太多，導(dǎo)致SF編輯器有點(diǎn)卡，所以新開辟了一篇 vue2實(shí)踐（二），后續(xù)再這里更新。 1. props 帶不帶冒號(hào)的區(qū)別 ...

n7then 2019-08-20 15:05 評(píng)論0 收藏0
JWT、OAuth 2.0、session 用戶授權(quán)實(shí)戰(zhàn)

摘要：為用戶提供授權(quán)以允許用戶操作非公開資源，有很多種方式。具體的代碼根據(jù)不同的授權(quán)方案而有所不同。使用授權(quán)原理利用來驗(yàn)證用戶，有兩種機(jī)制實(shí)現(xiàn)。使用來實(shí)現(xiàn)用戶授權(quán)主要用于簽發(fā)如果有將異步的簽名。 ? 在很多應(yīng)用中，我們都需要向服務(wù)端提供自己的身份憑證來獲得訪問一些非公開資源的授權(quán)。比如在一個(gè)博客平臺(tái)，我們要修改自己的博客，那么服務(wù)端要求我們能夠證明我是我，才會(huì)允許我們修改自己的...

zhaot 2019-05-22 15:14 評(píng)論0 收藏0