html2canvas截取图片总结（包含，图片，视频截取 PHP方式实现）

效果图：

需要实现效果图ppt使用效果

1.中间画布插入图片或视频，音频，左边列表同时显示中间画布缩略图（如下为ppt截图）

2.实现代码

插件引入 ：https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js（如果引入js使用报错，可以自行找资源下载，可以给我留言，我发给你）

html 如下:

<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<div class="edit_area">
  <div class="kj_ppt" id="suo_ppt">
    {{--中间PPT内容区域--}}
    <img src="abc.jpg" crossorigin="anonymous">
  </div>
</div>

js部分：
//缩略图
var kkkk = 0;
function htmltoimage(){
   clearTimeout(kkkk);//处理多次调用
   kkkk = setTimeout(function () {
      // 截屏
      html2canvas(document.getElementById('suo_ppt'), {
         useCORS: true,
      }).then(function (canvas) {
         var imgData = canvas.toDataURL("image/jpeg");/**此处是生成base64图片**/
         //以下是处理左边缩略图显示
        $(this).find('img').attr('src', imgData);//给需要显示缩略图的img 传base64图片属性
      });
   },0);
}

3.实现缩略图过程中，遇到问题及问题解决方式

1.  图片跨域设置 

                参考：1. https://blog.csdn.net/Mrbignose/article/details/107445163 

                           2. 阿里云跨域设置 https://help.aliyun.com/document_detail/31903.htm?spm=a2c4g.11186623.2.7.66912dff812sKm#concept-pbw-4df-vdb

1.  html 代码设置跨域 <img src="abc.jpg" crossorigin="anonymous"> 每个图片需 加 crossorigin="anonymous" 属性
2. 图片来源阿里云oss 如果是 http:// 开头的图片地址 替换为https://开头
3. 缩略图里面的图片有时显示有时不显示问题（刷新就显示）浏览器缓存导致 解决方式：再图片地址后面加随机值 如：abc.jpg？t=.rand(0,time());
4. 视频截取问题 （视频播放方式我使用的有如下两种：）:

              1. new Aliplayer  阿里云自带视频播放器  设置了视频第一帧为背景图片，默认截图截的是背景图片，

              但是视频播放中，默认的背景图片会隐藏，截取到效果图是黑色 黑色部分是播放本身的设置，为了

              方便使用，给播放器的新增加了另外的背景图片，相当于在video 外套了一层衣服，如第二种操作。

               以下图片展示是 播放器加载完成之后生成的html效果

                   

             2.html 视频展示： <video controls="controls" loop="loop" controlslist="nodownload" src="abc.mp4" height="100%" width="100%"><source src="abc.mp4"><img src="/image/mvideoi.png?v=3" class="videoweizhi_img" /></video>

             解决方式如下红色部分 给video 增加默认背景 （video加载的视频，截图显示的是空白，临时处理方式是给video增加背景图片）

            3.第三中解决方式 是 html :canvas 例子参考：https://www.runoob.com/try/try.php?filename=tryhtml5_canvas_drawimage_video

以上就是所以解决方式。

如果是只是图片截图 也可以考虑使用domtoimage 查资料过程中发现的，没有具体实现，以供参考。

为了完成缩略图的功能，查找了很多资料，也看了很多朋友写的帖子，对我的帮助很大，同时也发现不是很完善，也没有（应该是我查找的资料不够多）视频截图的好的解决方式，现在功能完成了。

总结一下开发中遇到的问题，希望能帮到有需要的人。如果确实帮到你记得点赞。有需要帮助的地方可以评论，我看到了我回复。