总结一下svg转canvas踩的坑

原创 2016年11月26日 15:52:12

最近在做项目的一个需求,用canvas实现落花效果,花的颜色可变;首先我的想法是:花是svg图片,我们动态改变样式即可得到不同的颜色的花.然后绘制在canvas上.网上有很多做法是:svg->blob->createObjectURL();如如下图:(截图自:http://javascript.ruanyifeng.com/htmlapi/svg.html#toc6)
这里写图片描述


因为我所做的项目也是面向现代浏览器,万恶的IE系列我们不起做兼容,所以我就照这种方式去做,在pc端,安卓手机上可正常工作,可是到苹果手机上,那就死活了,不能正常运行.下面附上我的部分源代码:

 var image = new Image();
        try{
            var svgString = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 133 121" style="enable-background:new 0 0 133 121;" xml:space="preserve"> <style type="text/css">.st0{fill:'+color+';}.st1{opacity:0.2;fill:#FFFFFF;enable-background:new    ;} </style> <path class="st0" d="M7,121c-0.3,0.2-4.1-9.4-4.3-10C0.9,105.1,0,99,0,92.9C0,75.7,7.6,60,19.4,47.7C32.1,34.5,48,24.4,65.2,18.1c8.6-3.1,17.6-5.4,26.6-6.6c12.7-1.7,24.7-0.4,33.6-11.5c0.6-0.8,4.6,8.1,4.9,8.9&#10;&#9;c1.3,3.8,2.1,7.9,2.3,11.9c0.6,9.1-2,18-5.3,26.3c-3.1,7.8-7.1,15.2-12,22.1C108,79.6,98.7,88.4,88.2,95.7&#10;&#9;c-6.3,4.4-13.1,8.2-20,11.5C33.8,123.7,26.9,106.7,7,121z"/> <path class="st1" d="M21,110.9c0,0,25.6,5.9,48.6-5.6s59.1-44,61.7-80.9c0,0-4.4,30.1-61.7,67.8C51.4,104.1,41.7,111.5,21,110.9z"/></svg>'

            var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
            var DOMURL = window.URL || window.webkitURL || window;
            var url = DOMURL.createObjectURL(svg);
            image.src= svgString;
        }catch(e){
            image.src= Flyer._resRoot+"/image/flower.svg";
            console.log("canvas"+e)
        }
        image.onload = function(){
                //执行canvas操作
        }
        image.onerror = function(){
                //错误
        }

在苹果手机下面会执行image.onerror函数;为什么会这样,我还没找到答案,知道的亲,请告诉我一下.谢谢


看看效果还是可以的嘛,但是在苹果手机上不行…..这就非常尴尬啦,怎么办怎么办;别怕,我们有stack overflow,有什么坑去上面看看,准能找到答案(戳我看答案)
这里写图片描述

其实解决的方式是:把用blob对象方式,改为用data:image/svg+xml的格式去读图片就可以了;方式如图

这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

d3高级应用专题(一):canvas与SVG之间的转换

在第4版中,d3新增了d3.path包,可用于将canvas绘制的路径转换为SVG的路径,提高了代码的可移植性,能适应更多应用场景,无论是发挥canvas的高性能特点,还是发挥SVG的高控制性,都能轻...
  • yiifaa
  • yiifaa
  • 2016年08月07日 13:08
  • 2156

javascript 导出div为图片PNG,div转svg,svg转canvas

关于这个功能需求,目前比较多实现是两种方法: 1、将div相关数据传到后台服务器端,通过服务器语言生成图形,发送至前端下载 2、完全通过前端实现,实现几个转换过程,div为图片PNG,首先div转sv...

html5中svg,canvas和图片之间的相互转化

最近有个需求,需要把网页转成pdf格式,

前端绘图 svg和canvas

前端绘图的技术到目前为止有很多种:canvas、SVG、VML、Flash、Java Applet等。这么多方式,他们之间有什么区别,选择的时候该在什么情形下选择什么方式 比较合适?看了很多文章,简单...

三天学会HTML5——SVG和Canvas的使用

在第一天学习了HTML5的一些非常重要的基本知识,今天将进行更深层学习首先来回顾第一天学习的内容,第一天学习了新标签,新控件,验证功能,应用缓存等内容。第2天将学习如何使用Canvas 和使用SVG ...

经典面试题(讨论canvas与svg的区别)

讨论关于canvas和svg的区别。首先canvas是html5提供的新元素,而svg存在的历史要比canvas久远,已经有十几年了。svg并不是html5专有的标签,最初svg是用xml技术(超文本...

Canvas与SVG

CanvasCanvas最初由苹果在Mac操作系统上用Safari浏览器渲染用户界面组件和其他图形而开发的。Canvas是一个底层、立即模式(immediate mode)的应用程序编程接口(API)...

HTML5 绘制图形 Canvas 与 SVG 的基本用法

HTML5 绘制图形 Canvas 与 SVG 的基本用法(笔记)Canvas和SVG是HTML5中主要的2D图形技术,前者提供画布标签和绘制API,后者是一整套独立的矢量图形语言,二者有各自的优势和...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

div转svg svg转canvas svg生成图片及图片下载

svg相关操作 div转svg  svg转canvas svg/canvas生成图片及图片下载 HTML: div id="div"> p>Just have a span sty...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:总结一下svg转canvas踩的坑
举报原因:
原因补充:

(最多只允许输入30个字)