最近做了一個(gè)微信內(nèi)訪問(wèn)的H5頁(yè)面，長(zhǎng)按分享圖片發(fā)送朋友邀請(qǐng)的海報(bào)，網(wǎng)上搜索資料，得出解決思路，用canvas將頁(yè)面繪制生成圖片，
問(wèn)題：canvas 圖片跨域。
解決過(guò)程（填坑歷程）：
1.從網(wǎng)上存在如圖解決辦法 img.crossOrigin = "" （專(zhuān)業(yè)采坑，數(shù)年）。親測(cè)無(wú)效。很是不解。
2.網(wǎng)上也存在后端服務(wù)解決
設(shè)置header頭，或者nginx 服務(wù)配置等 允許訪問(wèn)。但是，存在問(wèn)題（圖片大部分為了優(yōu)化，都會(huì)存放在第三方cdn.上面。這是第三方的配置，是否允許，自己很難控制）
3.解決辦法：采用所有圖片路徑，轉(zhuǎn)化為base64流來(lái)處理。圖片存為本地圖片。這也可以就避開(kāi)了跨域問(wèn)題。
最后個(gè)人解決方法：沒(méi)有采用第3種保存本地，這樣會(huì)增加本地圖片，而且會(huì)存在本地跟微信端沒(méi)有同步更新的問(wèn)題，不是用戶最新的頭像。個(gè)人是采用遠(yuǎn)程下載后直接繪制輸出圖片，這樣圖片就變成本地圖片，解決canvas繪制圖片不支持跨域問(wèn)題。
wxheadimg.aspx 頁(yè)面代碼：
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繪制頁(yè)面引用：<img src="wxheadimg.aspx?data=headimgurl" />
canvas繪制代碼也順便弄出來(lái)：
<script type="text/javascript">
window.onload = function ()
{
var IMAGE_URL;
function takeScreenshot(){
var shareContent = document.getElementById('shareMember');//需要截圖的包裹的（原生的）DOM 對(duì)象
var width = shareContent.offsetWidth; //獲取dom 寬度
var height = shareContent.offsetHeight; //獲取dom 高度
var canvas = document.createElement("canvas"); //創(chuàng)建一個(gè)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();//獲取元素相對(duì)于視察的偏移量
//canvas.getContext("2d").translate(-rect.left, -rect.top);//設(shè)置context位置，值為相對(duì)于視窗的偏移量負(fù)值，讓圖片復(fù)位
var opts = {
scale:scale, // 添加的scale 參數(shù)
canvas:canvas, //自定義 canvas
logging: true, //日志開(kāi)關(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();
}
</script>
頁(yè)面代碼 ：
<div class="shareBox" id="shareMember">
<div class="top">
<div class="logo"><img src="wxheadimg.aspx?data=微信頭像網(wǎng)址"/></div>
</div>
<div class="middle">
<img src="makeQRCode.aspx?data=二維碼內(nèi)容" class="qrcode" />
</div>
<img src="" class="copyImage">
</div>
jpg.shareBox{position:relative}
.shareBox .copyImage{position:absolute;top:0px;left:0px;z-index:999;opacity:0;height:666px;width:666px;}
總結(jié)
以上所述是小編給大家介紹的使用canvas生成含有微信頭像的邀請(qǐng)海報(bào)沒(méi)有微信頭像問(wèn)題,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
