IOS canvas drawImage img 取不到 src
需求:现在需要一个签名版,用户可以分多次签名字的姓和名。 多次签名平合成一个图片 传递给后台。
现象:pc,安卓显示均正确,但ios上 合成的图片总是显示不出来。
html:
<div> <canvas id="single"></canvas> <img id="singleImg"> <canvas id="compose"></canvas> <img id="composeImg"> </div>
JS:使用了jSignature.js 插件
var data = $('#single').jqSignature('getDataURL');//获取单次签名的base64 var img = document.getElementById("singleImg"); img .prop("src",data);//显示给用户 $('#single').jqSignature('clearCanvas'); var c = document.getElementById("compose"); var ctx = c.getContext("2d"); img.onload = function(){ ctx.drawImage(img,w,0,100,100); w+=100; var data2 = c.toDataURL(); $("#composeImg").prop("src",data2); };
查出问题所在的思路:
一开始并没有将代码写在
img.onload 方法里
===========================================================================
一开始上网查看有的说是跨域的问题,额。。。
1. data2 没有取到 alert出来是有的,base64的一大串
2. 既然src是有的,那就是合成时没画上去?
于是把data2的内容写到页面上,赋值出来,直接赋值到html的img src属性上 哭~ 空白
3. drawImage的问题? 把img 的src 写到页面上, 竟然和2 的base64 字符串一样, 空白~~~
4.好吧好吧,问题尝试尝试着就清晰了,把 img onload 的时候 打印出 img src 出来了~~~
问题的根源就是图片还没有load 成功。