這個需求和簡書的有點(diǎn)類似但不完全一致姊途，主要是用戶點(diǎn)擊分享按鈕涉瘾，就會將頁面指定的一個區(qū)域生成圖片并允許分享到微博微信等社交平臺，并且要在 web 和 pc 瀏覽器都實(shí)現(xiàn)捷兰，而且生成的圖片一致立叛，這需求就略變態(tài)了。
app 端肯定好實(shí)現(xiàn)贡茅， webview 控件可以很簡單的將頁面捕捉為圖片囚巴，網(wǎng)上找到的也大部分是這樣。pc 瀏覽器端也好實(shí)現(xiàn)友扰，可以用 html2canvas。
html2canvas https://github.com/niklasvh/html2canvas
接下來大致思路就很清晰了庶柿，我不生產(chǎn)代碼村怪，我只是代碼的搬運(yùn)工「÷可以考慮在要分享的這個頁面上引用 html2canvas甚负，并且給定一個調(diào)用方法，例如：
function shot() {
html2canvas(document.body, {
onrendered: function (canvas) {
// TODO
}
});
}
這個方法如果是 pc 瀏覽器直接通過按鈕點(diǎn)擊調(diào)用审残，如果是 app 梭域，可以用過 webview 控件調(diào)用。
onrendered 的回調(diào)的參數(shù)是一個 canvas搅轿，可以使用toDataURL方法將它轉(zhuǎn)為圖片的 base64 字符串病涨。
var src = canvas.toDataURL("image/jpeg");
接下來服務(wù)器需要保存這個圖片了，因?yàn)榉窒砉δ芏疾荒芊窒硪粋€ canvas 或者 base64 編碼后的圖片璧坟，這個好辦既穆，用 ajax 提交 base64 字符串到服務(wù)器，讓它保存雀鹃。
$.post('/Thumb/GetImageUrl', { base64: src }, function (rs) {
console.log(rs);
});
我這里服務(wù)器用的 ASP.NET MVC幻工，C# 處理這么個簡單的功能，兩行代碼足矣黎茎。
byte[] arr = Convert.FromBase64String(base64String);
Image img = Image.FromStream(new MemoryStream(arr));
在 GetImageUrl 這個 Action 里保存 img 到文件囊颅，并返回圖片 url 即可，$.post 的 onSuccess 回調(diào)里的 rs 就是這個圖片的 url， app 端可以通過 js 調(diào)用 java 代碼踢代，下載到這個圖片分型分享盲憎，PC 瀏覽器則直接可以把這個 url 傳給微博等分享接口了。
