zoukankan      html  css  js  c++  java
  • 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 成功。

  • 相关阅读:
    HTTP与HTTPS的区别
    为什么我们越努力 越不安
    最可怕的是牛人还那么努力
    Canvas、Paint、的简单使用及辅助类(Path、Shader、简介)
    创建style和修改style
    Drawable类及XMLDrawable的使用
    反射机制
    Gesture(手势)浅析
    在外部存储器上写入或读取文件(Environment类、File类的使用)
    存储、读取——Android应用程序内置的文件夹
  • 原文地址:https://www.cnblogs.com/wpp12345/p/6560155.html
Copyright © 2011-2022 走看看