数据URI到图像png文件

时间:2014-07-13 01:51:49

标签: php

好的,我正在为我的应用程序使用签名板,它在javascript中的数据uri中创建签名。它确切地创建:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAhoAAABGCAYAAACKaj2DAAAOXUlEQVR4Xu2dy8skVxmHE7zkQjTBqESZxFYiqARU3ASM2AiCBMEsvSzSrszO8R8wXzZx6Shu3JgOihvRRBkRQUkLQUgMGlHUQMQeNYgQ0WhMZryg74PnHWra7umur6u/uj0HflRVd13OeU593/n1e06duvIKkwQkIAEJSEACEjgQgSsPdF5PKwEJSEACEpCABK7QaHgTSEACEpCABCRwMAIajYOhHeyJb4iSPRB6R2iyUsq/xDb6fei3ocdDT4Z MFgaFkwCEpCABC5LQKPhDVKXwDwOuLvuQbH/w8V0LDQex6DnIRKQgAR6SkCj0dOKazHbd8W1H1q5/oXY/mPo6qJX7pA/DAum46fFgOxwiLtIQAISkEDfCGg0 lZj3cjveyIb94TeHXrDmiz9LD57JnRd6I4dskx3CxEPjAfdLMsdjnEXCUhAAhLoAQGNRg8qqeNZZKzGNESk470b8so4DczEqdCtO5SH/TEdD4ZYN0lAAhKQQE8JaDR6WnEdznYaD8wHun5NXp Oz54PvSp0y5ayZLSDiMc3O1xusyYBCUhAAmsIaDS8LQ5NAOPBkyppPNheZz54SuW1IcZ5bEqajkPXlueXgAQk0DABjUbDQD3dTgQwG1Wt63JhgOlVW0zHPL63e2Un5O4kAQlIoB0CGo12uHvVSwkQ8UjjwVgPtl8Tev2OoJ6K/T4TomuFqIdJAhKQgAQ6QkCj0ZGKMBtrCeSkYJPy7e2xZP0toXXdL z249DXQ/fLVAISkIAE2ieg0Wi/DszB8QhgQmahaejta07xz/jsXOjLoW FfHrleJw9SgISkMBeBDQae Hz4I4QmEQ 6HLBdHxoQ57Ox dnQ18JMUnYsiN5NxsSkIAEBk1AozHo6h1l4fIJlzQeqxOKvRhUrgnxPpbvhXhslknCHNsxytvFQktAAocmoNE4NGHP3zaBSYl0zGJZfbrlhdh NvTy0E0hulZyrg67WdquNa8vAQkMhoBGYzBVaUF2JDCN/Yh2MMYjjccPY50xHTeGbgtV5 uwm2VHsO4mAQlIYB0BjYb3xdgJnC4RjQ/EMgeVPloiHW N5StKtGMeSx6fXY4dmOWXgAQkUIeARqMOLfcdOgGiHBgPlmk6fh7r/woR7bi5mA67WIZ J1g CUigMQIajcZQeqKBEZhUTEd2sfwiPmOqdF4ORxcL0Q1Mh7OTDqzyLY4EJNAcAY1Gcyw903AJEOGYFuORT7Gk6WAG03eFGNcxD/EEC bDJAEJSEACQUCj4W0ggXoE0nTM4rDqmA5mJH1fKAeTajrqcXVvCUhgoAQ0GgOtWIt1IgRydlKeYslIx7dj/dchHpv9SOg/oUXocyEem3W jhOpGi8iAQl0hYBGoys1YT76TmCd6aAL5Vch/s7uKSbjkVhm94qmo  1bv4lIIGtBDQaWxG5gwRqE9hkOp6IM/09xPd3V6IcRDqcJKw2Zg QgAT6QECj0YdaMo99JrBqOohiLEKM6fhT6NWh 0JEP5gcLGco7XOZzbsEJCCBiwQ0Gt4MEjg5ApsiHY9FFq4N3RJivAfjOjAe82I 7GI5uTryShKQQMMENBoNA/V0EtiRAKYDU4F4egUzQTTjuyHewfLB0DR0ffk85 tY7nh d5OABCTQCQIajU5Ug5kYOYEbiqmYxTJfc4/xOBP6d4juFb7DdGA0MB2LEFOimyQgAQl0moBGo9PVY ZGSCBNR87XwaykaS4uxPrVxZTkHB6YDsSTLOxnkoAEJNApAl0yGtMgQ9/0Lum52MlR ruQcp  E8BwTIq5oJuF TruLYV6Uyz5Pk1HDiRdFOPR97KbfwlIYAAE2jYas/KP8xOxfN0ePPkHmwPmcn0ZnzFx0vMhQs6YE34tktYZmvyOZeo4WeK65AVxzbx2fn6cc3qMBJLANFYmIQzGJ0PnQj8K/SPEdOjvLzty/2W0wy4W7x8JSKA1Am0ajVmU oHWSt7ehWkAMDJnQ7wVlHVMCIn1HBSY63yeJipznfuzjZmpHst6fr96XHul9sqHIsDfEaYjox289A1dF7q1LDUdh6LveSUgga0ENBpbEV2yA406jfiuDXiaCk5SPQYTwZMFDPKjkajulxEQlodMmZ9N5eFzlKm6zX2zOGTmPPexCEziqGkRxiPvIaJ6TImOmDDs 6FvhIh07HovHytDHiQBCUigTaMB/VmIf450ndy0R3Uw0VF2V9Agss7y6RD/ZDM6kN0jq5fKf7Z53B5ZaeTQzCdsqik/Z5nK79eVrXqebQxy3 zv37UgySwjMbkNf8L6LE3tEMDEcg9hOljm6 6ruflDbDwa4h0tOWFYO7n1qhKQwCAJtG00qlCnNQhno1bjEHfdg0CaGhor0uo2n d3NG6kakRmGdtVYUCeDHXF2O2BpneHUk/8rd0eujN0KrT6f4BZS/9a6oh6SiNPHZokIAEJ1CLQJaNRK Pu3AsCNGqpqjnhM7ZZ0nhhSh4sDVtGpjQhJ1fFHyum46Plkowdykhg5iKjfhiPRfmQJY/VmiQgAQlsJKDR8OZom0DViJAXDAihftIyRAPHI528Zj0TjZ2peQKwnxb vPSNBOtfhs6HeJx2XfdLRhipL7QI Qh68/XjGSXQSwIajV5W26gynZGPLPTp0vhNYsl3NGw0hiyzYRwVoAMWFtbTIh4Jx0CcKSYiTQn1gNYZELK2yYRQXxklOWARPLUEJNA2AY1G2zXg9fclwJiQ7JZhfRbCeGTUI9ezS2bf643xeIwEUSaEoYAp72T5TqjadZKmY1rqJLc3DTBOE1I1I4ceD8K9QtLkjPFOtsytENBotILdi54AgWzkspGkYWH9z6FFKBs0u2HqVQZmDsPBkveywBJhOFhuSrDP6FSaw1yuGhHqin0Zt0MkhfWMWi3LBeiaqZoF9sntPB5TxARmbwu9OcTcItX0VGx8uJz7Mln3KwlIYB8CGo196HlsHwnQuGUDNy3rPymN1CKWPuK5W63SsMPxqCwZ0EsDfyYEx7qDRNOETOJY1qmbNIes7zKvDINYX7pb9i/uhYF5Z81j3F0CEqhBQKNRA5a7DpYADSYNHEsaNZaPhGiEEI2mofbN1Z9RjlnswsBdEtwWoXyaaN bh/pZFTOf3hi6JXTtMS AsST/JglI4EAENBoHAutpe0 gajqmURq6XGg8Hw7ROC17X8LmC5CRiKM4dbU7BG7zEIaN9X0S1 DcvFjujtDL9jgZT9PwSO  edojCx4qgeET0GgMv44tYTMEaODuCqUBIZSP6aCRcirv/2cMp1mIF79V0yI25jWZTWJ/xlvAH21Lv4sdXggx62m1C4drE5laluW28/i9BCTQAAGNRgMQPcUoCdD40ejlkohHRjtYmv5HIA3a6VhfHfQJJ0T3yro0jQ8/HdolckGUaR7KLhv5S0ACHSGg0ehIRZiN3hPgF3xGOzAgjPGgEeUX9bL3pWumAPDBcORkYHlW JwJZWSI72eF56Yr89TJ44XxV2NJpMIkAQl0kIBGo4OVYpYGQYBGNbtaWH8oxK/uhcbjYpTjKFjk4NGsdB5n3fR/CXORURCjRoP4M7EQYyCg0RhDLVvGLhCYVowH eGRWn7BE of869xzNjXQpseS Xlbo FPh8624WKNA8SkEA9AhqNerzcWwJNEJjESaoRj2VsL0L8Ssd0jM14UN5N82RgNL4U4l03cDJJQAI9I6DR6FmFmd1BEsB4TENpQGh4MR00rEQ8hp4wXYzRIL0k9LfQbaGbVwo j20MxxiYDL3OLd ICGg0RlTZFrU3BHhSA ORg0t5ooUnMxalBGOJeNCtchRafVoFDhgOx2n05pY2o2MmoNEYc 1b9r4QwHBMQhgQEiaERnYsxoPy8rQK71apJiIbREI2PR7bl/o1nxIYNAGNxqCr18INlEBGPIhsYEBogO8rZeWz5UDLjeGahVYnAcNwzENEOUwSkEDHCGg0OlYhZkcCxyCA2chox1Gs0/BiNqo6xmk7ewhlJcKBqoNIMVkYDkzXWLqXOltJZkwCSUCj4b0ggeERoCHGfCDGORAJYAKxfNcIBmQoKQ3H6nwc2aXiwNGh1LTl6C0BjUZvq86MS6AWgWkxHSyZFGsRYmwDpmMIv/4xVJgO3olSTU/ExhdCvo m1u3izhJojoBGozmWnkkCfSEwKaaDxpn134QYXEpjjPHocyJ6cxRaHThKmSgjcvBon2vYvPeOgEajd1VmhiXQKIHsZpkV85HRjkVsM2V6X7seMByfDU3X0MJMzUMMHh1CNKfRG8KTSaBpAhqNpol6Pgn0m8CkGA4aaITxqEY7 mY8iNowXmN1DEfWEt85eLTf96y57zgBjUbHK8jsSaBlAkQGaKwxHZgQGuwvhs6HeF9LH7ohNj2lUkV7FBtGOFq 2bz8MAloNIZZr5ZKAocigOFAGJAcB0GUA VTLV2NemCU5qHVAaPJahkrnwoRwTFJQAINEdBoNATS00hgpATSdORjtMxrwbiHRRHjPFjvUtrWnUJ Px7CeJgkIIE9CWg09gTo4RKQwCUEMB6pauQgjUdGPtoehEl3ylFodZbRLAz5y/EbVrEEJLAHAY3GHvA8VAIS2EqALpY0HtVHTjPqkd0u52K/NrpcyBuGYvXFbVkw8kR0o428bYXrDhLoAwGNRh9qyTxKYDgEJlEUui5Y0sivezNrmhC6XVg/iUb KK5z72Uw82QK 5gkIIGaBDQaNYG5uwQk0DiBjHrQnYH5YJtUfY8JT7fwqC0poyCsP1e2m8jUnXGS 0ObohtvjO WTVzIc0hgTAQ0GmOqbcsqgf4QmERWMR6Yjur6pidGdinZhdjpql123LCPRmMPeB46XgIajfHWvSWXQF8JZMRjWswIRgStS5gVviM68mLommMW pk47tQxj/UwCYyawH8BROplZTLrnRIAAAAASUVORK5CYII=

我在PHP中将它转换为png文件并将其保存在我的服务器上。它正在创建一个带尺寸的空白图像。当我访问该链接时,我看到的只是一个空白屏幕。

    $data = $this->input->post('signature');

    echo $data;

    $encodedData = str_replace(' ','+',$data);
    $decodedData = base64_decode($encodedData);

    $uri = substr($data,strpos($encodedData,",")+1);

    file_put_contents('static/images/signatures/'.$this->actions->randomString('5', '').'.png', base64_decode($uri));

那么我做错了什么?为什么我的图片没有出来?我没有这个领域的经验,任何帮助都会很棒。

更新

这是我创建uri并将其发送到php的代码。这是javascript

$("#signatureCell").click(function(){
    $("#myModal").modal('show');
    var wrapper = document.getElementById("signature-pad"),
    clearButton = wrapper.querySelector("[data-action=clear]"),
    saveButton = wrapper.querySelector("[data-action=save]"),
    canvas = wrapper.querySelector("canvas"),
    signaturePad;

    signaturePad = new SignaturePad(canvas);

    clearButton.addEventListener("click", function (event) {
        signaturePad.clear();
    });

    saveButton.addEventListener("click", function (event) {
        if (signaturePad.isEmpty()) {
            alert("Please provide signature first.");
        } else {
            var signature = signaturePad.toDataURL();
            var app_id = $("#app_id").val();
            var dataString = 'signature='+signature+'&app_id='+app_id;
            $.ajax({
                type: "POST",
                url: "/admin/employees/add_signature",
                data: dataString,
                success: function() {
                    $("#signatureCell").attr('style', 'height: 70px; vertical-align: middle; text-align:right;')
                    $("#signatureCell").html('<b>Signature:</b> <img src="'+signature+'" style="width:inherit; height: 50px;"/>');
                    $("#myModal").modal('hide');
                }
            });
            return false;
        }
    });
});

2 个答案:

答案 0 :(得分:0)

看起来你在错误的字符串上执行substr()

$uri = substr($data,strpos($encodedData,",")+1);

应该是:

$uri = substr($encodedData, strpos($encodedData, ',') + 1);

答案 1 :(得分:0)

我认为您的数据uri格式不正确。

使用以下代码我可以将另一个数据uri转换为png图像。但你的数据uri不起作用。

http://codepad.org/BBNt1GkK