本次技术调研来源于H5项目中的一个重要功能需求：实现微信长按网页保存为截图。
 
 这里有个栗子（请用微信打开，长按图片即可保存）：3分钟探索你的知识边界
 
 将整个网页保存为图片是一个十分有趣的功能，常见于H5活动页的结尾页分享。以下则是项目中调研和踩坑的一些小结和汇总。
 
 
 一、实现HTML页面保存为图片
 
 1.1 已知可行方案
 
 现有已知能够实现网页保存为图片的方案包括：
 
方案1：将DOM改写为canvas，然后利用canvas的toDataURL方法实现将DOM输出为包含图片展示的data URI
方案2：使用html2canvas.js实现（可选搭配Canvas2Image.js实现网页保存为图片）
方案3：使用rasterizeHTML.js实现
 
 1.2 解决方案的选择
 
 
方案1：需要手动计算每个DOM元素的Computed Style，然后需要计算好元素在canvas的大小位置等属性。
 
方案1难点：
 
  
相当于完全重写了整个页面的布局样式，增加了工作量。
由于canvas中没有的对象概念，对于元素丰富、布局复杂的页面，不易重构。
所有DOM元素改写进canvas会带来一些困难，例如：难以支持响应式，图片元素清晰度不佳和文字点击区域识别问题等。
 
方案2：该类功能中Github上stars最多(至今仍在维护)，Stack Overflow亦有丰富的讨论。只需简单调用html2canvas方法并设定配置项即可。
方案3：该方案的限制较多，目前仅支持3类可转为canvas的目标格式: 页面url，html字符串和document对象。
 
 小结: html2canvas是目前实现网页保存为图片功能的综合最佳选择。
 
 1.3 html2canvas的使用方法
 
 
 
官方GitHub：https://github.com/niklasvh/h...
 
 
 以下描述针对html2canvas版本是0.5.0-beta4
 
 1.3.1 实现保存为图片的第一步：html转为canvas
 
 基于html2canvas.js可将一个元素渲染为canvas，只需要简单的调用html2canvas(element[, options]);即可。下列html2canvas方法会返回一个包含有<canvas>元素的promise：
 
html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});
 
 1.3.2 实现保存为图片的第二步：canvas转image
 
 上一步生成的canvas即为包含目标元素的<canvas>元素对象。实现保存图片的目标只需要将canvas转image即可。
 
 这里的转换方案有2种：
 
方案1：基于原生canvas的toDataURL方法将canvas输出为data: URI类型的图片地址，再将该图片地址赋值给<image>元素的src属性即可
方案2：使用第三方库Canvas2Image.js，调用其convertToImage方法即可（GitHub）
 
 实际上，Canvas2Image.js也是基于canvas.toDataURL的封装，相比原生的canvas API对于转为图片的功能上考虑更为具体(未压缩的包大小为7.4KB)，适合项目使用。
 
 二、生成图片的清晰度优化方案
 
 2.1 基础的清晰度优化方案
 
 
 
最终图片的清晰度取决于第一步中html转换成的canvas的清晰度。
 
 
 现有解决方案参考；
 
html5 canvas在高倍屏下变模糊的处理办法
html5 canvas绘制图片模糊的问题
 
 其基本原理为：
 将canvas的属性width和height属性放大为2倍（或者设置为devicePixelRatio倍），最后将canvas的CSS样式width和height设置为原先1倍的大小。
 
 例如：希望在html中实际显示的<canvas>宽高分别为160px,90px则可作如下设置
 
<canvas width="320" height="180" style="width:160px;height:90px;"></canvas>
 
 参考上述文档具体的使用案例如下；
 
convert2canvas() {

    var shareContent = YourTargetElem; 
    var width = shareContent.offsetWidth; 
    var height = shareContent.offsetHeight; 
    var canvas = document.createElement("canvas"); 
    var scale = 2; 

    canvas.width = width * scale; 
    canvas.height = height * scale; 
    canvas.getContext("2d").scale(scale, scale); 

    var opts = {
        scale: scale, 
        canvas: canvas, 
        logging: true, 
        width: width, 
        height: height 
    };
    html2canvas(shareContent, opts).then(function (canvas) {
        var context = canvas.getContext('2d');

        var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);

        document.body.appendChild(img);
        $(img).css({
            "width": canvas.width / 2 + "px",
            "height": canvas.height / 2 + "px",
        })
    });
}
 
 2.2 进阶的清晰度优化方案
 
 
 
上述设置可以解决通常情况下图片不清晰的问题，不过探索并没有结束。
 
 
 实际在我们的项目中，即使作出2.1节的设置后，大果粒一般的渲染结果依然尴尬。
 
 下面直接给出3条进一步的优化策略：
 
更改百分比布局为px布局（如果原先是百分比布局的话）
关闭canvas默认的抗锯齿设置
设置模糊元素的width和height为素材原有宽高，然后通过transform: scale进行缩放。这里scale的数值由具体需求决定。
 
 
 
基本原理
 
 
如果原来使用百分比设置元素宽高，请更改为px为单位的宽高，避免样式二次计算导致的模糊
默认情况下，canvas的抗锯齿是开启的，需要关闭抗锯齿来实现图像的锐化(MDN: imageSmoothingEnabled )
除了canvas可以通过扩大2倍宽高然后缩放至原有宽高来提高清晰度，对于DOM中其他的元素也可以使用css样式的scale来实现同样的缩放
 
 
 
例: html2canvas配置
 
 
convert2canvas() {

    var cntElem = $('#j-sec-end')[0];

    var shareContent = cntElem;//需要截图的包裹的（原生的）DOM 对象
    var width = shareContent.offsetWidth; //获取dom 宽度
    var height = shareContent.offsetHeight; //获取dom 高度
    var canvas = document.createElement("canvas"); //创建一个canvas节点
    var scale = 2; //定义任意放大倍数 支持小数
    canvas.width = width * scale; //定义canvas 宽度 * 缩放
    canvas.height = height * scale; //定义canvas高度 *缩放
    canvas.getContext("2d").scale(scale, scale); //获取context,设置scale 
    var opts = {
        scale: scale, // 添加的scale 参数
        canvas: canvas, //自定义 canvas
        // logging: true, //日志开关，便于查看html2canvas的内部执行流程
        width: width, //dom 原始宽度
        height: height,
        useCORS: true // 【重要】开启跨域配置
    };

    html2canvas(shareContent, opts).then(function (canvas) {

        var context = canvas.getContext('2d');
        // 【重要】关闭抗锯齿
        context.mozImageSmoothingEnabled = false;
        context.webkitImageSmoothingEnabled = false;
        context.msImageSmoothingEnabled = false;
        context.imageSmoothingEnabled = false;
        
        // 【重要】默认转化的格式为png,也可设置为其他格式
        var img = Canvas2Image.convertToJPEG(canvas, canvas.width, canvas.height);

        document.body.appendChild(img);

        $(img).css({
            "width": canvas.width / 2 + "px",
            "height": canvas.height / 2 + "px",
        }).addClass('f-full');

    });
}
 
 
 
例: DOM元素样式：

 
 
.targetElem {width: 54px;height: 142px;margin-top:2px;margin-left:17px;transform: scale(0.5)}
 
 三、含有跨域图片的配置
 
 由于canvas对于图片资源的同源限制，如果画布中包含跨域的图片资源则会污染画布，造成生成图片样式混乱或者html2canvas方法不执行等问题。
 
 以下主要解决两类跨域的图片资源：包括已配置过CORS的CDN中的图片资源和微信用户头像图片资源。
 
 3.1 针对CDN中的图片的配置
 
要求CDN的图片配置好CORS。CDN配置好后，通过chrome开发者工具可以看到响应头中应含有Access-Control-Allow-Origin的字段。
开启html2canvas的useCORS配置项。即作如下设置：

 
var opts = {useCORS: true};

html2canvas(element, opts);
 
 注意：
 如果没有开启html2canvas的useCORS配置项，html2canvas会正常执行且不会报错，但是不会输出对应的CDN图片
 （已测试同时包含CDN的图片和本地图片的资源的页面，但是只有本地图片能够被正常渲染出来）
 
 3.2 针对微信用户头像的配置
 
 如果需要将微信平台中的用户头像一并保存为图片，3.1的方案无能为力。可通过配置服务端代理转发(forward)实现，此处不赘述。
 
 其他注意事项
 
 1. margin的遮挡问题
 
 微信中，唤出长按保存图片的菜单要求长按的对象直接是<image>元素，如果<image>元素上方存在遮挡，则不会唤出菜单。
 而事实上，引发遮挡的并不只是非<image>元素，还可能是margin属性。例如：若在页面底部，对一个绝对定位的元素设置了数值很大的margin-top，则margin-top所涉及的区域，均无法长按唤出菜单。解决方案：将margin-top改用为top即可。
 
 2. 安卓版微信保存图片失败的问题
 
 canvas2img默认保存图片的格式为png，而在安卓版微信中所生成的图片尽管能长按唤出保存图片的菜单，但是无法正确保存到本地相册。 解决方案：设置canvas2img的生成图片格式配置项为jpeg即可。
 
 3. JPEG的黑屏问题
 
 设置canvas2img输出格式为jpeg，会有一定几率导致生成的图片包含大量的黑色块。可能的解决方案：缩减部分图片元素的体积和尺寸大小。
 
 4. 不能保留动效
 
 在图片的转化前，必须停止或者删除动效后才能正确渲染出图片，否则生成的图片是破裂的。
 
 出处 
 
 参考文献
 
CanvasRenderingContext2D.drawImage()
Add dpi/scale options for custom resolution
HTMLCanvasElement.toDataURL()
html5 canvas在高倍屏下变模糊的处理办法
Canvas实现保存图片到本地
html2canvas截图如何解决跨域的问题

需要把网页保存为图片，实现原理：在Web项目中引用System.Windows.Forms,使用WebBrowser嵌入任意网页，通过WebBrowser可以把网页截成图片流，再保存为各种图片格式就实现了。
 
　　注意：网页中有一些脚本不支持，只截取网页中的BODY，用XLST技术实现或其它相应的方式生生成的网页不支持。
 
　　代码如：
 
1.在WEB项目添加引用System.Windows.Forms。
 
2.添加类WebSiteThumbnail：
 
类WebSiteThumbnail的代码如下：
 
 
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Drawing;
using System.Threading;
using System.Windows.Forms;

/// <summary>
///WebSiteThumbnail 的摘要说明
/// </summary>
public class WebSiteThumbnail
{
    Bitmap m_Bitmap;
    string m_Url;
    int m_BrowserWidth, m_BrowserHeight, m_ThumbnailWidth, m_ThumbnailHeight;

    public WebSiteThumbnail(string Url, int BrowserWidth, int BrowserHeight, int ThumbnailWidth, int ThumbnailHeight)
    {
        m_Url = Url;
        m_BrowserHeight = BrowserHeight;
        m_BrowserWidth = BrowserWidth;
        m_ThumbnailWidth = ThumbnailWidth;
        m_ThumbnailHeight = ThumbnailHeight;
    }
    public static Bitmap GetWebSiteThumbnail(string Url, int BrowserWidth, int BrowserHeight, int ThumbnailWidth, int ThumbnailHeight)
    {
        WebSiteThumbnail thumbnailGenerator = new WebSiteThumbnail(Url, BrowserWidth, BrowserHeight, ThumbnailWidth, ThumbnailHeight);
        return thumbnailGenerator.GenerateWebSiteThumbnailImage();
    }
    public Bitmap GenerateWebSiteThumbnailImage()
    {
        Thread m_thread = new Thread(new ThreadStart(_GenerateWebSiteThumbnailImage));
        m_thread.SetApartmentState(ApartmentState.STA);
        m_thread.Start();
        m_thread.Join();
        //_GenerateWebSiteThumbnailImage();
        return m_Bitmap;
    }
    private void _GenerateWebSiteThumbnailImage()
    {
        WebBrowser m_WebBrowser = new WebBrowser();
        m_WebBrowser.ScrollBarsEnabled = false;
        m_WebBrowser.Navigate(m_Url);
        m_WebBrowser.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(WebBrowser_DocumentCompleted);
        while (m_WebBrowser.ReadyState != WebBrowserReadyState.Complete)
            Application.DoEvents();
        m_WebBrowser.Dispose();
    }
    private void WebBrowser_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
    {
        WebBrowser m_WebBrowser = (WebBrowser)sender;
        m_WebBrowser.ClientSize = new Size(this.m_BrowserWidth, this.m_BrowserHeight);
        m_WebBrowser.ScrollBarsEnabled = false;
        m_Bitmap = new Bitmap(m_WebBrowser.Bounds.Width, m_WebBrowser.Bounds.Height);
        m_WebBrowser.BringToFront();
        m_WebBrowser.DrawToBitmap(m_Bitmap, m_WebBrowser.Bounds);
        m_Bitmap = (Bitmap)m_Bitmap.GetThumbnailImage(m_ThumbnailWidth, m_ThumbnailHeight, null, IntPtr.Zero);
    } 
}
在后代的调用方法如下： 
 
 
Bitmap m_Bitmap = WebSiteThumbnail.GetWebSiteThumbnail("http://www.google.cn/", 600, 600, 600, 600); //Bitmap需引用using System.Drawing
MemoryStream ms = new MemoryStream();
m_Bitmap.Save(ms, System.Drawing.Imaging.ImageFormat.Png);//JPG、GIF、PNG等均可       
//byte[] buff = ms.ToArray();       
//Response.BinaryWrite(buff);
System.Drawing.Image postImage = System.Drawing.Image.FromStream(ms);
postImage.Save("D:\\Test\\test.Png", System.Drawing.Imaging.ImageFormat.Png); 

 
  

今天我们来学习一波怎么将一个网页生成一张图片的，主要的应用场景在，分享，截图等
 我主要使用的是一个js库 html2canvas ,下面来了解一下他的详细用法吧。
 
大家可以去这里https://download.csdn.net/download/qq_20343517/10739325下载这个库
 然后直接通过script标签引入或者通过其他方式导入也可以。
 
基于html2canvas.js 可将一个元素渲染为canvas，只需要简单的调用，html2canvas(element[,options]);即可，下列html2canvas方法会返回一个包含有canvas元素的promise：
 
html2canvas(document.body,{useCORS: true}).then(function(canvas) {
   document.body.appendChild(canvas);
});
 
由于canvas对于图片资源的同源限制，经测试，同时包含cdn图片和本地图片的资源的页面，只有本地图片能够被渲染出来。
canvas转img
 
方案一：基于原生canvas的 toDataURL 方法将canvas输出为 data:url 类型的图片地址，再将该图片的地址赋值给 image 元素的src属性即可，
 
方案二：使用第三方库 Canvas2Image.js 调用其 convertToImage 方法即可
 
<div id="box">
    <h1>hello world</h1>
    <img style="width:100px;" src="abc.png" alt="">
    <p style="background-color:#000;color:#fff;border:1px solid red;">我是一只大灰狼</p>
</div>
<a href="#" id="a" download>点击下载图片</a>
 
html2canvas(document.getElementById("box"),{useCORS: true}).then(function(canvas) {
    url=canvas.toDataURL();
    a=document.querySelector('#a');
    a.href=url;
});
 
高保真图片
 
可以参考这个链接https://segmentfault.com/a/1190000011478657

phantomjs截取网页截图
 
 
场景
 有一个视频播放地址，需要对该网页进行截图
 
 
解决思路：
 1.将视频下载到本地，使用ffmpeg进行处理
 2.使用phantomjs，phantomjs内置了webkit浏览器引擎，phantomjs可以模拟浏览器打开视频地址，然后进行整个网页的截图。
 
 
 
WebKit 是一个开源的浏览器引擎，与之相对应的引擎有Gecko（Mozilla Firefox 等使用）和Trident（也称MSHTML，IE 使用）
 
 
 
选择
 第一个方案，ffmpeg只能处理本地视频或者处理RTCP直播流，同时要求的视频直播地址中有部分是直播流，有部分是组件渲染，所以该方案不可行。
 因此选择第二个方案。
 
 
phantomjs进行网页截图，这里以window平台为例
 1.首先，去phantomjs官网下载页面下载phantomjs程序，支持window、mac os、linux、freebsd平台。
 2.将下载下来的phantomjs添加系统环境变量里
 3.编写js文件capture.js
 
"use strict";  //严格模式

var page = require('webpage').create();
var system = require('system');
page.viewportSize = {
    width : 1024,
    height : 720
};

if (system.args.length < 3) {
    console.log('param must greater 2');
    phantom.exit();
} else{
    var url = system.args[1];  //远程视频地址
    var saveFile = system.args[2];  //保存截图的文件路径
    page.open(url, function(status) {
        if (status == 'success'){
            // 通过在JS获取页面的渲染高度
            var rect = page.evaluate(function () {
              return document.getElementsByTagName('html')[0].getBoundingClientRect();
            });
            // 按照实际页面的高度，设定渲染的宽高
            page.clipRect = {
              top:    rect.top,
              left:   rect.left,
              width:  rect.width,
              height: rect.height
            };
            setTimeout(function() {
                var result = page.render(saveFile);
                page.close();
                console.log(result);
                phantom.exit();
            }, 1000);  //延迟截图时间
        }
    })
}
 
4.在php中进行调用
 
$url = 'http://xxx';
$savePath = 'c:\test.png';
$jsPath = 'c:\phantomjs.js';
$command = "phantomjs {$jsPath}  {$url}  {$savePath}";
$result = @exec($command );
 
这样就对网页进行截图，保存截图在指定路径中。
 
另外：有大神在github上提交了个操作phantomjs的php类库，可以参考使用:
 
  
 
   
https://github.com/jonnnnyw/php-phantomjs
http://jonnnnyw.github.io/php-phantomjs/4.0/2-installation/
 
  
 
参考自：
http://phantomjs.org/download.html
http://phantomjs.org/api/webpage/method/render.html
 
代码实例：

 phantomjs和slimerjs，两款都是服务器端的js，简单说来，都是封装了浏览器解析引擎，不同是phantomjs封装的 webkti，slimerjs封装的是Gecko（firefox）。 权衡利弊，决定研究下phantomjs，于是就用phantomjs实现了网 站快照生成。phantomjs的项目地址是：http://phantomjs.org/

 代码涉及两个部分，一个是设计业务的index.php，另一个是生成快照的js脚本snapshot.js。代码比较简单，仅仅是实现了功能，没有做过多的修饰。代码分别如下所示：
 
php：
 
<?php
    if (isset($_GET['url']))
    {
       set_time_limit(0);

       $url = trim($_GET['url']);
       $filePath = "./cache/".md5($url).'.png';

       if (is_file($filePath))
       {
           exit($filePath);
       }

       $command = "phantomjs/bin/phantomjs snapshot.js {$url} {$filePath}";
       exec($command);

       exit($filePath);
    }
?>
 
html
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>快照生成</title>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style>
* {
    margin: 0;
    padding: 0;
}

form {
    padding: 20px;
}

div {
    margin: 20px 0 0;
}

input {
    width: 200px;
    padding: 4px 2px;
}

#placeholder {
    display: none;
}
</style>
</head>

<body>
   <form action="" id="form">
       <input type="text" id="url" />
       <button type="submit">生成快照</button>

       <div>
           <img src="" alt="" id="placeholder" />
       </div>
   </form>

   <script>
   $(function(){
       $('#form').submit(function(){
           if (typeof($(this).data('generate')) !== 'undefined' && $(this).data('generate') === true)
           {
               alert('正在生成网站快照，请耐心等待...');
               return false;
           }

           $(this).data('generate', true);
           $('button').text('正在生成快照...').attr('disabled', true);

           $.ajax({
               type: 'GET',
               url: '?',
               data: 'url=' + $('#url').val(),
               success: function(data){
                   $('#placeholder').attr('src', data).show();
                   $('#form').data('generate', false);
                   $('button').text('生成快照').attr('disabled', false);
               }
           });

           return false;
       });
    });
   </script>
</body>
</html>
 
php利用CutyCapt实现网页高清截图 ：
 
     网页截图功能，必须安装IE+CutyCapturl:要截图的网页out：图片保存路径path：CutyCapt路径cmd:CutyCapt执行命令比如:http://你php路径.php?url=http://XX.com
 
 
 
<?php
/* 
网页截图功能，必须安装IE+CutyCapt
url:要截图的网页
out：图片保存路径
path：CutyCapt路径
cmd:CutyCapt执行命令
比如:http://你php路径.php?url=http://niutuku9.com/
*/
$url=$_GET["url"];
$imgname=str_replace('http://','',$url);
$imgname=str_replace('https://','',$imgname);
$imgname=str_replace('.','-',$imgname);
$out = 'D:/webroot/test/'.$imgname.'.png';
$path = 'D:/webserver/CutyCapt.exe';
$cmd = "$path --url=$url --out=$out";
echo $cmd;
system($cmd);
?>
CutyCapt下载地址：http://sourceforge.net/projects/cutycapt/files/cutycapt/

windows的不用安装的，直接下载解压放到相对应的路径即可

linux安装CutyCapt教程：http://niutuku9.com/tech/php/273578.shtml
 
整理参考来自：软盟网