這篇文章主要介紹如何使用canvas合成海報圖片，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

目前創新互聯建站已為千余家的企業提供了網站建設、域名、雅安服務器托管、成都網站托管、企業網站設計、建鄴網站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協力一起成長，共同發展。

1、移動端canvas項目適配全屏問題

　　問題描述：由于canvas的width和height只能設置px值，不支持rem單位，所以想在移動設備屏幕分辨率繁雜的情況下達到canvas鋪滿全屏的效果很困難。

　　解決方法：通過js獲取到手機屏幕的clientWidth值，賦給canvas，以此來達到適配全屏的效果；

var clientWidth = document.documentElement.clientWidth;
var canvasWidth = Math.floor(clientWidth);
var canvasHeight = Math.floor(clientWidth*(1334/750));
$("#main").css('width',canvasWidth+'px');
$("#main").css('height',canvasHeight+'px');

2、canvas合成的圖片出現模糊現象

　　問題描述：canvas生成的圖片出現模糊問題，尤其是圖片上有二維碼需要識別的，用戶根本無法識別；

　　解決方法：1）可以引用hidpi-canvas.js插件解決此問題；

　　　　　　　2）也可以將canvas的style中的width和height值設置為你想要的大小，然后將canvas的width和height的值分別放大x倍，此處注意，當你在畫布中繪制圖片或者文字時，相應數值也應放大x倍。

3、合成圖片時部分機型圖片錯亂

　　問題描述：部分安卓手機在導出canvas的base64圖片時，只能顯示想要效果圖片的一半，初步分析是設備像素比引起的bug。

　　解決方法：獲取設備像素比pr，判斷機型，此處我只判斷了是iphone還是安卓，暫時還未出現問題，合成圖片時再將width和height值恢復到原來的大小。

//hidpi-canvas將canvas的width和height屬性放大pr倍
if (navigator.userAgent.match(/iphone/i)) {
    canvas.width = width ;//恢復為原先的大小
    canvas.height = height ;
}else{
    canvas.width = width / pr;//恢復為原先的大小
    canvas.height = height / pr;
}

4、iphone手機上傳圖片出現旋轉問題

　　問題描述：測試時發現，iPhone手機上傳照片出現旋轉情況，而上傳從網上保存的圖片則不會出現此問題，安卓正常。

　　解決方法：此問題可使用exif.js插件解決，此插件會獲取照片拍攝時的角度等信息，主要是Orientation屬性，從而進行相應操作；

　　

var file = $(this)[0].files[0];
EXIF.getData(file, function() {  
    EXIF.getAllTags(this);     
    Orientation = EXIF.getTag(this, 'Orientation');  
});

5、canvas繪制跨域圖片無法導出base64圖片

　　問題描述：當畫布中存在跨域請求來的圖片時，導出base64圖片失敗，初步分析應該是canvas本身的安全機制引起的。

　　解決方法：此bug需要前后端配合解決，首先后端設置圖片允許跨域，然后前端設置Img.crossOrigin = "Anonymous";即可。

var pageqrcodeimg = qrcodecanvas.toDataURL('image/jpg');
var qrcodeImg = new Image();
qrcodeImg.crossOrigin = "Anonymous"; 
qrcodeImg.src = pageqrcodeimg;
qrcodeImg.onload=function(){
        //繪制圖片
}

6、canvas繪制圖片時會出現白屏情況

　　問題描述：canvas繪制圖片時偶爾會出現白屏情況，初步分析是圖片還沒讀取完畢就執行了繪圖操作。

　　解決方法：給img添加onload函數，圖片讀取完畢再執行繪圖操作。

qrcodeImg.onload=function(){
        //繪制圖片
}

7、微信瀏覽中中長按圖片無法保存

　　問題描述：通過canvas生成的圖片在微信瀏覽器中長按無法保存或者識別二維碼，安卓部分圖片出現此情況，iphone正常，初步分析是圖片質量太大導致。

　　解決方法：導出base64圖片時壓縮圖片質量。

var mycanvas = document.getElementById("main");
var image = mycanvas.toDataURL("image/jpeg",0.7);

以上是“如何使用canvas合成海報圖片”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創新互聯成都網站設計公司行業資訊頻道！

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網頁題目：如何使用canvas合成海報圖片-創新互聯
本文URL：http://www.yijiale78.com/article10/ddcsgo.html

成都網站建設公司_創新互聯，為您提供微信公眾號、定制開發、做網站、網站排名、網站制作、網站導航

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯