简单的图片可以通过原生canvas绘制

原生

案例展示

  1.     <canvas id='mycanvas' width="500" height="500"></canvas>
  1.     window.onload = function(){
  2.             var mycanvas = document.getElementById('mycanvas')
  3.             var ctx = mycanvas.getContext('2d')
  4.             // 内存中先加载，然后当内存加载完毕时，再把内存中的数据填充到我们的 dom元素中，这样能够快速的去
  5.             // 反应，比如网易的图片
  6.             var img = new Image();
  7.             img.onload = function(){
  8.                 alert('加载完毕')
  9.                 // 将图片画到canvas上面上去！
  10.                 ctx.drawImage(img,100,100);
  11.             }
  12.             img.src = "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1537549551&di=3f8d4d76679adcae225387f7d6b199aa&src=http://gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/lvpics/h=800/sign=b49dc48f8718367ab28972dd1e728b68/9922720e0cf3d7ca7f0736d0f31fbe096a63a9a6.jpg";
  13.         }

总结

  1.  /*绘制图片的三种方式*/
  3.         /*3参数*/
  4.         /*图片对象*/
  5.         /*绘制在画布上的坐标 x y*/
  6.         ctx.drawImage(image,100,100);
  9.         /*5个参数*/
  10.         /*图片对象*/
  11.         /*绘制在画布上的坐标 x y*/
  12.         /*是图片的大小  不是裁剪  是缩放*/
  13.         ctx.drawImage(image,100,100,100,100);
  16.         /*9个参数*/
  17.         /*图片对象*/
  18.         /*图片上定位的坐标  x y */
  19.         /*在图片上截取多大的区域  w h*/
  20.         /*绘制在画布上的坐标 x y*/
  21.         /*是图片的大小  不是裁剪  是缩放*/
  22.         ctx.drawImage(image,400,400,400,400,200,200,100,100);

推荐依赖-html2canvas

原生使用

demo1

  1. <script type="text/javascript">
  2. function takeScreenshot() {
  3.     html2canvas(document.getElementById('view'), {
  4.         onrendered: function(canvas) {
  5.             document.body.appendChild(canvas);
  6.         },
  7.       // width: 300,
  8.     // height: 300
  9.     });
  10. }
  11. </script>
  12. <body>
  13.     <div id="view" style="background:url(test.jpg) 50%; width: 700px; height: 500px;">
  14.         <input type="button" value="截图" onclick="takeScreenshot()">
  15.     </div>
  16. </body>

demo2

  1. <canvas width="400" height="200" style="width: 200px; height: 100px"></canvas>
  2. html2canvas(document.body, {
  3.         useCORS : true,
  4.         foreignObjectRendering : true,
  5.         allowTaint :false
  6.     }).then((canvas) =>{
  7.         //相关操作，同上
  8.         canvas.id = 'demo=canvas'
  9.         document.body.appendChild(canvas)
  10.     });

Html2Canvas-脱坑解释

allowTait： true

Html2Canvas 受限于浏览器的同源策略， 若是使用非同源的图片会taint（污染）画布， 画布污染后将不能读取，默认allowTaint 为false， 不允许污染画布，同时图片也不能画在画布上。
其属性allowTaint: true , 可以设置成允许画布被污染， 则可以直接绘制出跨域图片；
使用 allowTait： true 虽然可以将跨域的图片的html 转为canvas ，但是当想读取此Canvas具体信息时，如 getImageData， toDataUrl 方法却会报错，原因是被污染的画布 因为同源策略而存在安全问题。
解决办法 ：
1） 使用 crossOrigin 属性。具体分析 ：解决canvas图片getImageData,toDataURL跨域问题
2）设置 useCORS： true ， 原理相同，但使用以上跨域方法， 若同时设置为 allowTaint： true ， 仍然会认为画布已被污染而不可用；

foreignObjectRendering: true

浏览器支持ForeignObject（借助标签，我们可以直接在SVG内部嵌入XHTML元素）就可使用，有兼容性问题，高版本浏览器可用（SVG 元素可以让DOM变图片）
字体图标不支持Unicode，支持svg方式
有滚动条的div，截图时会回到了初始化top位置