javascript - 在从 Phonegap 相机捕获的图像上绘制文本(自定义文本)

Question

如果重复此问题，请告诉我原始问题的链接，因为我能够找到解决当前问题的好链接。

我正在开发 phonegap(cordova2.7) 相机 并为android 4.2 制作应用程序。我可以从我的应用程序中获取多张照片。所有图像都保存在sd 卡中。但我想在拍摄的照片的顶部写上名字。我能够找出如何解决这个问题。

我只想使用 javascript、phonegap 方法或插件。我不需要任何 java 代码。我尝试使用 Canvas

var CAM = {};
window.n = 0;
CAM.changePicture = function() {
navigator.camera.getPicture(CAM.onPhotoDataSuccess, CAM.onFail, {
    quality : 100,
    destinationType : Camera.DestinationType.FILE_URI,
    sourceType : Camera.PictureSourceType.CAMERA,
    encodingType : 0,
    saveToPhotoAlbum : true
});

};
CAM.onPhotoDataSuccess = function(imageURI) {

 var c=document.createElement('canvas');
 var ctx=c.getContext("2d");
 ctx.font = "20px arial";
 ctx.drawImage(imageURI,10,10);
 ctx.fillText("Hello",30,30);
var gotFileEntry = function(fileEntry) {

    var gotFileSystem = function(fileSystem) {
        alert(3);
        fileSystem.root.getDirectory("AndroidClinic11/"
                + CAMFUNC.folderName(), {
            create : true
        }, function(dataDir) {
            n++;
            var newFileName = CAMFUNC.folderName() + " " + n + ".jpg";
            fileEntry.moveTo(dataDir, newFileName, null, CAM.onFail);

        }, CAM.onFail);

    };

    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFileSystem,
            CAM.onFail);

};

window.resolveLocalFileSystemURI(imageURI, gotFileEntry, CAM.onFail);

CAM.changePicture();
 };
 CAM.onFail = function() {
console.log("failure");
 };

Answer 1

您可以使用类似 fabric 的 javascript 库这将允许您保存图像/文本等，只要您使用的是 phonegap 中可能的 Canvas 。这是 documentation用于处理图像。根据 phonegap 如何处理来自相机的图像，您可能需要从驱动器加载图像。