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 成功。

 

转载于:https://www.cnblogs.com/wpp12345/p/6560155.html