仿简书将网页生成图片分享

这个需求和简书的有点类似但不完全一致，主要是用户点击分享按钮，就会将页面指定的一个区域生成图片并允许分享到微博微信等社交平台，并且要在 web 和 pc 浏览器都实现，而且生成的图片一致，这需求就略变态了。

app 端肯定好实现， webview 控件可以很简单的将页面捕捉为图片，网上找到的也大部分是这样。pc 浏览器端也好实现，可以用 html2canvas。

html2canvas https://github.com/niklasvh/html2canvas

接下来大致思路就很清晰了，我不生产代码，我只是代码的搬运工。可以考虑在要分享的这个页面上引用 html2canvas，并且给定一个调用方法，例如：

function shot() {
    html2canvas(document.body, {
        onrendered: function (canvas) {
            // TODO
        }
    });
}

这个方法如果是 pc 浏览器直接通过按钮点击调用，如果是 app ，可以用过 webview 控件调用。

onrendered 的回调的参数是一个 canvas，可以使用toDataURL方法将它转为图片的 base64 字符串。

var src = canvas.toDataURL("image/jpeg");

接下来服务器需要保存这个图片了，因为分享功能都不能分享一个 canvas 或者 base64 编码后的图片，这个好办，用 ajax 提交 base64 字符串到服务器，让它保存。

$.post('/Thumb/GetImageUrl', { base64: src }, function (rs) {
    console.log(rs);
});

我这里服务器用的 ASP.NET MVC，C# 处理这么个简单的功能，两行代码足矣。

byte[] arr = Convert.FromBase64String(base64String);
Image img = Image.FromStream(new MemoryStream(arr));

在 GetImageUrl 这个 Action 里保存 img 到文件，并返回图片 url 即可，$.post 的 onSuccess 回调里的 rs 就是这个图片的 url， app 端可以通过 js 调用 java 代码，下载到这个图片分型分享，PC 浏览器则直接可以把这个 url 传给微博等分享接口了。