很久前写了关于把html转成图片的一个例子，最近有出了新的问题。利用html2canvas.js文件把html转成base64位的图片是没什么问题的，但也不是绝对的，比如这时候不能碰见svg这个鬼，html2canvas碰见svg就不好用了，svg的元素会不能出现在生成的图片中。这时候我看到了html2canvas.svg.min.js这个文件，奈何我没找到正确的使用方式。所以选择了canvg.js 这个goole发明的方法，原理是把svg装成canvas，再利用canvas的toDataURL，转成base64位的图片形式。好了，看例子吧。

canva.js 需要依赖于rgbcolor.js。这个应该都比较容易下载到。

附上下载地址：https://github.com/canvg/canvg

看例子啦，很简单的（引用git中的一个例子）：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

     <head>

         <title>canvg.js callback test</title>

         <!--[if IE]>

         <script type="text/javascript" src="flashcanvas.js"></script>

         <![endif]-->

         <script type="text/javascript" src="../rgbcolor.js"></script>

         <script type="text/javascript" src="../canvg.js"></script>

         <script type="text/javascript">

         var context;

         var redraw = false;

         function resize() {

             var c = document.getElementById('container');

             c.style.width = (window.innerWidth || document.body.clientWidth)+'px';

             c.style.height = (window.innerHeight || document.body.clientHeight)+'px';

             redraw = true;

         }

         function bodyonload() {

             if (typeof(FlashCanvas) != 'undefined') context = document.getElementById('canvas').getContext;

             var svg = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="none" viewBox="0 0 100 100" style="width:100%; height:100%;">'

                      +'<linearGradient id="background_gradient_black" x1="0%" y1="10" x2="0%" y2="90" gradientUnits="userSpaceOnUse">'

                      +'<stop offset="0%"   stop-color="#000" stop-opacity="1" />'

                      +'<stop offset="35%"  stop-color="#200" stop-opacity="1" />'

                      +'<stop offset="65%"  stop-color="#600" stop-opacity="1" />'

                      +'<stop offset="100%" stop-color="#ff0" stop-opacity="1" />'

                      +'</linearGradient>'

                      +'<rect x="0" y="0" width="100" height="100" fill="url(#background_gradient_black)" />'

                      +'</svg>';

             resize();

             canvg('canvas', svg, {

                 ignoreMouse: true,

                 ignoreAnimation: true,

                 renderCallback: function() { alert('done rendering!'); },

                 forceRedraw: function() { var update = redraw; redraw = false; return update; }

             });

         }

         window.onresize = resize;

         </script>

     </head>

     <body onload="bodyonload();">

         <div id="container"><canvas id="canvas"></canvas></div>

     </body>

 </html>

svg转化成canvas以便生成base64位的图片的更多相关文章

  1. 生成base64位图片验证码

    import org.springframework.util.Base64Utils; import javax.imageio.ImageIO; import java.awt.*; import ...

  2. base64位 解码图片

    jar包是commons-codec.jar. pnuts //base64解码成图片 function gldBase64ToImage(imgStr,imgFilePath) { // 对字节数组 ...

  3. Canvas 生成base64的PNG图片快照，So Amazing!!!

    function canvasSupport(){     return Modernizr.canvas;}function callCanvasApps(){  var canvasOne=doc ...

  4. H5如何用Canvas画布生成并保存带图片文字的新年快乐的海报

    摘要:初略算了算大概有20天没有写博客了,原本是打算1月1号元旦那天写一个年终总结的,博客园里大佬们都在总结过去,迎接将来,看得我热血沸腾,想想自己也工作快2年了,去年都没有去总结一下,今年势必要总结 ...

  5. springMVC返回Base64位编码图片验证码

    import java.awt.Color;import java.awt.Font;import java.awt.Graphics;import java.awt.Graphics2D;impor ...

  6. php保存canvas导出的base64图片

    代码如下: <?php $img='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABxCAYAAABoUdWRAAAAAXNSR0IAr ...

  7. js 生成二维码图片

    1.用纯JavaScript实现的微信二维码图片生成器 QRCode.js是javascript实现二维码(QRCode)制作生成库. QRCode.js有着良好的跨浏览器兼容性(高版本使用HTML5 ...

  8. 绘制SVG内容到Canvas的HTML5应用

    SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术,两种绘制图形方式各有优缺点,但两者并非水火不容,尤其是SVG内容可直接绘制在Canvas上的功能,使得两者可以完美的融合在一起, ...

  9. 根据图片的路径（绝对路径/相对路径都可以），生成base64的

    根据图片的路径(绝对路径/相对路径都可以),生成base64的 <!DOCTYPE html> <html> <head> <meta charset=&qu ...

随机推荐

  1. 技术之余。。。电吉他自弹 魂斗罗 solo

    测试一下 ---恢复内容开始--- ---恢复内容结束---

  2. Java面试宝典系列之基础排序算法

    本文就是介绍一些常见的排序算法.排序是一个非常常见的应用场景,很多时候,我们需要根据自己需要排序的数据类型,来自定义排序算法,但是,在这里,我们只介绍这些基础排序算法,包括:插入排序.选择排序.冒泡排 ...

  3. Dynamics AX 2012 R2 AIF No Endpoint Behavior Named 'clientEndpointBehavior'

          最近,Reinhard在使用Http Adapter类型的AIF入站端口时,总是报以下错误: Server Error in '/MicrosoftDynamicsAXAif60' App ...

  4. 当call/apply传的第一个参数为null/undefined的时候js函数内执行的上下文对象是什么呢？

    如题:在js中我们都知道call/apply,还有比较少用的bind;传入的第一个参数都是改变函数当前上下文对象;call/apply区别在于传的参数不同,一个是已逗号分隔字符串,一个以数组形式.而b ...

  5. Java Bean Validation 最佳实践

    参数校验是我们程序开发中必不可少的过程.用户在前端页面上填写表单时,前端js程序会校验参数的合法性,当数据到了后端,为了防止恶意操作,保持程序的健壮性,后端同样需要对数据进行校验.后端参数校验最简单的 ...

  6. Mac > MacBook Pro的移动硬盘方案

    灵感来自:http://cone.cc/2012/12/30/Macbook-Air-HD/ 主要为了解决:如果让移动硬盘,无缝地,安全地,同时应用在苹果电脑系统和微软的系统. 除了储存文件,我还想用 ...

  7. vs远程发布

    安装IIS管理服务Web Management Service 在IIS中,选择服务器结点,然后在内容里面打开[管理服务],右边操作栏里面停止服务,把[启用远程连接]前面复选框选上.然后选在下面的使用 ...

  8. 通过sharedpreferences实现记住密码功能

    通过sharedpreferences实现记住密码功能

  9. Swift_2基础

    mport Foundation // MARK: - ?和!的区别// ?代表可选类型,实质上是枚举类型,里面有None和Some两种类型,其实nil相当于OPtional.None,如果非nil相 ...

  10. 用Excel制作热图(heatmap)的方法

    http://jingyan.baidu.com/article/64d05a0240ec75de55f73bd8.html 利用Excel 2010及以上版本的"条件格式"--& ...