svg转化成canvas以便生成base64位的图片
很久前写了关于把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位的图片的更多相关文章
- 生成base64位图片验证码
import org.springframework.util.Base64Utils; import javax.imageio.ImageIO; import java.awt.*; import ...
- base64位 解码图片
jar包是commons-codec.jar. pnuts //base64解码成图片 function gldBase64ToImage(imgStr,imgFilePath) { // 对字节数组 ...
- Canvas 生成base64的PNG图片快照,So Amazing!!!
function canvasSupport(){ return Modernizr.canvas;}function callCanvasApps(){ var canvasOne=doc ...
- H5如何用Canvas画布生成并保存带图片文字的新年快乐的海报
摘要:初略算了算大概有20天没有写博客了,原本是打算1月1号元旦那天写一个年终总结的,博客园里大佬们都在总结过去,迎接将来,看得我热血沸腾,想想自己也工作快2年了,去年都没有去总结一下,今年势必要总结 ...
- springMVC返回Base64位编码图片验证码
import java.awt.Color;import java.awt.Font;import java.awt.Graphics;import java.awt.Graphics2D;impor ...
- php保存canvas导出的base64图片
代码如下: <?php $img='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABxCAYAAABoUdWRAAAAAXNSR0IAr ...
- js 生成二维码图片
1.用纯JavaScript实现的微信二维码图片生成器 QRCode.js是javascript实现二维码(QRCode)制作生成库. QRCode.js有着良好的跨浏览器兼容性(高版本使用HTML5 ...
- 绘制SVG内容到Canvas的HTML5应用
SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术,两种绘制图形方式各有优缺点,但两者并非水火不容,尤其是SVG内容可直接绘制在Canvas上的功能,使得两者可以完美的融合在一起, ...
- 根据图片的路径(绝对路径/相对路径都可以),生成base64的
根据图片的路径(绝对路径/相对路径都可以),生成base64的 <!DOCTYPE html> <html> <head> <meta charset=&qu ...
随机推荐
- 卓越精Forsk.Atoll.v3.3.2.10366无线网络
卓越精Forsk.Atoll.v3.3.2.10366无线网络 Atoll是法国 FORSK 公司开发的,是一个全面的.基于Windows的.支持2G.3G.4G多种技术,用户界面 友好的无线网络规划 ...
- Comparable和Comparator的区别
Comparable Comparable可以认为是一个内比较器,实现了Comparable接口的类有一个特点,就是这些类是可以和自己比较的,至于具体和另一个实现了Comparable接口的类如何比较 ...
- 【转】Tomcat版本是32位、64位问题
转载地址:http://www.cnblogs.com/greensleeves/p/3168541.html 最近遇到一个Tomcat windows安装版本是32位还是64位问题.由于一系列原因, ...
- 一个ubuntu phper的自我修养(workbench)
workbench从此和navicat的激活码说再见 workbench是一个免费易用功能强大的mysql图形化管理软件,navicat上用到的功能,workbench上都能找到. 一.workben ...
- JS调用JCEF方法
坐下写这篇文章的时候,内心还是有一点点小激动的,折腾了一个多星期,踩了一个又一个的坑,终于找到一条可以走通的路,内心的喜悦相信经历过的人都会明白~~~~~今儿个老百姓啊,真呀个真高兴啊,哈哈,好了,废 ...
- js手风琴
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- 蓝屏 Dump文件分析方法
WinDbg使用有点麻烦,还要符号表什么的.试了下,感觉显示很乱,分析的也不够全面... 试试其他的吧!今天电脑蓝屏了,就使用其dump文件测试,如下: 1.首先,最详细的,要属Osr Online这 ...
- git 设置不需要输入密码
https方式每次都要输入密码,按照如下设置即可输入一次就不用再手输入密码的困扰而且又享受https带来的极速 设置记住密码(默认15分钟): git config --global credenti ...
- tomcat 7+ 启动慢 熵池阻塞变慢详解
原因: Tomcat 7/8都使用org.apache.catalina.util.SessionIdGeneratorBase.createSecureRandom类产生安全随机类SecureRan ...
- C#导出csv文件
/// <summary> /// 将DataTable中数据写入到CSV文件中 /// </summary> /// <param name="dt" ...