這篇文章主要介紹了如何使用canvas生成含有微信頭像的邀請海報(bào)沒有微信頭像問題，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站是一家專業(yè)提供巢湖企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站、H5高端網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為巢湖眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。

最近做了一個微信內(nèi)訪問的H5頁面，長按分享圖片發(fā)送朋友邀請的海報(bào)，網(wǎng)上搜索資料，得出解決思路，用canvas將頁面繪制生成圖片，

    問題：canvas 圖片跨域。

    解決過程（填坑歷程）：

    1.從網(wǎng)上存在如圖解決辦法     img.crossOrigin  = ""   （專業(yè)采坑，數(shù)年）。親測無效。很是不解。

    2.網(wǎng)上也存在后端服務(wù)解決

   設(shè)置header頭，或者nginx 服務(wù)配置等 允許訪問。但是，存在問題（圖片大部分為了優(yōu)化，都會存放在第三方cdn.上面。這是第三方的配置，是否允許，自己很難控制）

    3.解決辦法：采用所有圖片路徑，轉(zhuǎn)化為base64流來處理。圖片存為本地圖片。這也可以就避開了跨域問題。

    最后個人解決方法：沒有采用第3種保存本地，這樣會增加本地圖片，而且會存在本地跟微信端沒有同步更新的問題，不是用戶最新的頭像。個人是采用遠(yuǎn)程下載后直接繪制輸出圖片，這樣圖片就變成本地圖片，解決canvas繪制圖片不支持跨域問題。

   wxheadimg.aspx 頁面代碼：

if (!string.IsNullOrEmpty(Request.QueryString["data"].ToString()))
{
    HttpWebRequest request = (HttpWebRequest)WebRequest.Create(Request.QueryString["data"].ToString());
    request.Timeout = 3000;
    WebResponse response = request.GetResponse();
    Stream stream = response.GetResponseStream();
    Bitmap image = new Bitmap(stream);
    //保存為PNG到內(nèi)存流 
    MemoryStream ms = new MemoryStream();
    image.Save(ms, ImageFormat.Png);
    //重新輸出頭像
    Response.BinaryWrite(ms.GetBuffer());
    Response.End();
    ms.Close();
    response.Close();
    stream.Close();
}

   canvas繪制頁面引用：

    canvas繪制代碼也順便弄出來：

window.onload = function ()
{
    var IMAGE_URL;
    function takeScreenshot(){
        var shareContent = document.getElementById('shareMember');//需要截圖的包裹的（原生的）DOM 對象
        var width = shareContent.offsetWidth; //獲取dom 寬度
        var height = shareContent.offsetHeight; //獲取dom 高度
        var canvas = document.createElement("canvas"); //創(chuàng)建一個canvas節(jié)點(diǎn)
       var scale = 1; //定義任意放大倍數(shù) 支持小數(shù)
        canvas.width = width * scale; //定義canvas 寬度 * 縮放
        canvas.height = height * scale; //定義canvas高度 *縮放
        canvas.getContext("2d").scale(scale, scale); //獲取context,設(shè)置scale
       //var rect = shareContent.getBoundingClientRect();//獲取元素相對于視察的偏移量
        //canvas.getContext("2d").translate(-rect.left, -rect.top);//設(shè)置context位置，值為相對于視窗的偏移量負(fù)值，讓圖片復(fù)位
        var opts = {
            scale:scale, // 添加的scale 參數(shù)
            canvas:canvas, //自定義 canvas
            logging: true, //日志開關(guān)
            width:width, //dom 原始寬度
            height:height, //dom 原始高度
            backgroundColor: 'transparent',
        };
        html2canvas(shareContent, opts,{useCORS:true,logging:true}).then(function (canvas)
        {
            IMAGE_URL = canvas.toDataURL("image/png");
            $('.copyImage').attr('src',IMAGE_URL);
        })
    }
    takeScreenshot();
}

   頁面代碼 ：