html2canvas在vue下的巨坑

raledong 發(fā)布于2019-08-29 16:36 / 1695人閱讀

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

公司有個需求就是要在前端生成圖片首先想到的是用canvas生成圖片，自己畫這也太耗時間了吧！后面在npm上一查有個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會進(jìn)行webpack打包在ios下運行的時候會出現(xiàn)錯誤因為我要生成一張圖片是的canvas api 是 toDataURL
這錯誤在ios一直顯示是權(quán)限問題在ios 和safari 上的問題是一致的原因是canva繪制dom上的圖片的時候是 base64的格式（webpack會對asstes目錄下的圖片進(jìn)行壓縮）花費了幾個小時才解決這個問題，感覺很不值所以分享給大家希望大家別踩進(jìn)去了！解決方法是可以 static目錄或者同域下的文件地址

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

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

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

相關(guān)文章

html2canvas在vue下的巨坑

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

20171112 2019-08-23 11:39 評論0 收藏0
html2canvas在vue下的巨坑

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

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

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

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

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

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

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

zhaot 2019-05-22 15:14 評論0 收藏0