rqrcode生成的二维码在IE中如何正确的显示

 在rails中生成二维码,由于有现成的gem可用,还是很方便的,基本套路这里就不赘述了,大家有兴趣请参考此文

按照文中所述,发现在chrome和ff下一切ok,但是在ie下,二维码没有正确的缩放,遍寻网上达人解决方案无果,无奈放弃此方法。

 

但是也不愿意使用临时图片文件的方法,并且我调用to_img的时候报错,没有dark? 方法,还未找到原因。看文档的时候发现rqrcode有as_svg的方法,请观察发现其生成的结果去掉xml标记之后就是HTML5 svg标记所需的格式。

"<?xml version=\"1.0\" standalone=\"yes\"?>\n<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns:ev=\"http://www.w3.org/2001/xml-events\" width=\"539\" height=\"539\" shape-rendering=\"crispEdges\">\n<rect width=\"11\" height=\"11\" x=\"0\" y=\"0\" style=\"fill:#000\"/><rect width=\"11\" height=\"11\" x=\"11\" y=\"0\" style=\"fill:#000\"/><rect width=\"11\" height=\"11\" x=\"22\" y=\"0\" style=\"fill:#000\"/><rect width=\"11\" height=\"11\" x=\"33\" y=\"0\" style=\"fill:#000\"/><rect width=\"11\" ......"
@qr = RQRCode::QRCode.new( "#{punch_in_url(@punch_in_code)}", :size => 8, :level => :h )
@qrcode_str = Base64.encode64( @qr.as_svg )

s=@qr.as_svg;
p=s.index('<svg');    
@svg = s[p..]

通过以上代码截取后,即可在html中直接显示svg

<%= @svg.html_safe %>此时

此时发现,不能控制其大小,遂用正则替换svg字符串中的宽度和高度数字

wr = /width="(\d+)"/
hr = /height="(\d+)"/
@svg = @svg.sub(wr, 'width="96"').sub(hr, 'height="96"')

替换后,发现网页中不是对svg进行了缩放显示,而是只显示了左上角一小块内容。经在网上搜索发现,需要设置其viewbox属性,通俗的说viewbox设置取景范围,width和height设置缩放后的大小。于是修改代码。

    @svg = s[p..]        
    wr = /width="(\d+)"/
    hr = /height="(\d+)"/
    @svg.match wr
    size = $1.to_i
    
    @svg = @svg.sub(wr,'width="96"').sub(hr,"height=\"96\" viewbox=\"0 0 #{size} #{size}\" ");

代码中只是取用了width的值,因为二维码生成的是正方形,所以没必要在取高度值。

到此时已经能够正确缩放大小显示生成的二维码了!

 

posted @ 2020-06-29 11:48  佣工7001  阅读(339)  评论(0编辑  收藏  举报