近期開發(fā)在vue中引用了html2Canvas后，使用時遇到一些常見問題，簡單總結(jié)下：

簡單代碼使用格式：

 html2Canvas(document.getElementById("posterHide" + num), {
                // 轉(zhuǎn)換為圖片
                useCORS: true, // 解決資源跨域問題
                scale: 2, // 處理模糊問題
                //dpi: 300, // 處理模糊問題
                // width:document.documentElement.clientWidth,
                height:screen.availHeight //解決下方白邊問題
            }).then((canvas) => {
                let dataURL = canvas.toDataURL("image/jpeg");
                setTimeout(() => {
                    let a = document.getElementById("hidden-pic");
                    let img = document.createElement("img");
                    img.src = dataURL;
                   
                    img.style.width = "1080px";
                    img.style.height = "2340px";
                    img.style.display = "none";
                    img.id = "my_poster" + num;
                    a.appendChild(img);
                }, 100);
               
                    let link = document.createElement("a");
                    link.download = data.imgArr[parseInt(num)].title + ".jpeg";
                    link.href = dataURL;
                    link.click();

            });

1、下載時，微信或者企業(yè)微信不能直接下載圖片

闡述：生成圖片后，圖片下載通過添加a標(biāo)簽，添加download屬性進(jìn)行圖片下載

但是在微信開發(fā)里面失效了，理由很簡單，微信環(huán)境下不兼容download屬性，解決辦法，圖片可以通過長按下載

下面附上環(huán)境判斷代碼（判斷是否是微信或是企業(yè)微信環(huán)境判斷）

const isWx = /micromessenger/i.test(navigator.userAgent); // 是否微信
const isComWx = /wxwork/i.test(navigator.userAgent); // 是否企業(yè)微信
    if (isWx || isComWx) {
        //是否電腦微信或者微信開發(fā)者工具
           showDialog({ message: "請用瀏覽器打開，微信端和企業(yè)微信端不提供下載服務(wù)" 
       });

   

既然寫到這里了，附加判斷是否是PC端環(huán)境判斷

data.text = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent) ? "mobile_web端頁面" : "PC端頁面"

2、生成圖片模糊問題

圖片模糊問題我遇到好多次了，先說下網(wǎng)上常見手法

利用這倆原始屬性

但這倆我都試了。作用不大，最那啥的是dpi在新版本里被改掉了

然后想了下，可能是因為：生成圖片區(qū)域大小<放置圖片區(qū)域大小 像素不夠了導(dǎo)致的，那我初始圖片大點不就好了

解決辦法：將原來的圖片放大（放大到比生成圖片區(qū)域大小 大），然后將放大的圖生成圖片，這樣把一張大的圖放到小的區(qū)域里，就不會模糊了

來了

?生成圖片的大小，原始圖片大小要不要控制下

寫了一個空的div專門存放原來的圖片

為了頁面不顯示出來原始的高清大圖，嘗試了把圖片置于底層：z-index

然后，很ok，雖然感覺不是這么玩的，但是下載圖片清晰！

3、生成圖片變形或者四周帶白邊

遇到過生成圖片變形的問題，底色如果是白的就會帶白邊

方法一：更改背景色

這個從網(wǎng)上看到的，很搞笑，你不是下面有個白邊嗎，那就把背景圖也改成白的

然后你就看不到白邊了。。但是你下載下來還是有啊

方法二：控制生成圖片大小

這里

有個height和width屬性，他的值是數(shù)字類型的，然后這個值越大，生成圖片占據(jù) 背景反而越小

底色就漏出來了，值越小，占據(jù)背景反而越大，導(dǎo)致圖片顯示不全

那么如何控制這個合適的值

靈活一點，自己看自己用多少

固定區(qū)域直接寫固定值

我這個是項目需求，我是手機(jī)端，沒有用window，使用screen.availHeight來控制可視區(qū)域

4、html2Canvas使用網(wǎng)絡(luò)圖片跨域問題

本地圖片，項目里靜態(tài)文件夾圖片沒有問題，但是用網(wǎng)絡(luò)圖片就會出現(xiàn)跨域問題無法轉(zhuǎn)化的問題

嘗試一：?

?這里有兩個屬性，一個是在img后面添加 crossorigin="anonymous"

下面配置屬性有個useCORS

嘗試二：檢查圖片格式

要保持一致

如果不行繼續(xù)嘗試三：

更改圖片來源

我嘗試將圖片放ftp上，圖片還是有跨域問題，這就需要服務(wù)器配置了

我當(dāng)然沒配，我嘗試將圖片放到oss上，結(jié)果跨域問題解決了

所以先嘗試添加屬性，不行就檢查圖片來源，換個環(huán)境試試

我目前遇到這些問題，持續(xù)更新吧。。。文章來源地址http://www.zghlxwxcb.cn/news/detail-759243.html

到了這里，關(guān)于html2Canvas常見問題以及解決的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！