javascript - Canvas DataURL 到带有 filePath 的图像

Question

我正在使用 cordova/PhoneGap 和 IonicFramework (使用 AngularJS)创建一个移动应用程序。在应用程序中，用户可以在 Canvas 上绘制自己的签名 ( https://github.com/szimek/signature_pad )。当前 Canvas 保存为 DataURL:

数据:image/png;base64，iVBORw0KGgoAAAANS ...

保存签名后，我想使用 Cordova 的 FileTransfer 插件将图像发送到服务器 ( http://docs.phonegap.com/en/3.1.0/cordova_file_file.md.html#FileTransfer )。

我已经对从相机拍摄的常规图像执行了此操作，效果很好。这是我的上传功能:

function uploadPicture(fileURL) {

        var win = function (result) {
            console.log('Success!');
        }

        var fail = function (err) {
            console.log('Fail!');
        }

        var options = new FileUploadOptions();
        options.fileKey = 'file';
        options.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1);
        options.mimeType = 'image/jpeg';
        options.chunkedMode = true;
        options.params = {};

        var ft = new FileTransfer();
        ft.upload(fileURL, encodeURI('http://example.com/upload/'), win, fail, options);
    }

现在您可以看到 fileURL 是文件的完整路径。我发现，当我以某种方式将 dataURL 转换为实际图像时，我可以使用该插件(不能 100% 确定这是否会修复它)。

这有可能吗？我搜索了很多但找不到任何有用的东西。大多数示例都是关于将 dataURL 发送到服务器并让服务器处理它，但我不想这样做。

对此有什么想法/想法/帮助吗？我希望我想要的事情是可能的!

Answer 1

您必须将 base64 转换为设备上的图像。然后上传。不过，最好将 base64 发送到服务器并让其处理，以节省客户端的空间和时间。