使用 Cordova Phonegap 将画布转为 .jpg 文件

Question

我正在尝试在我的设备中存储一个画布，在互联网上阅读我发现我必须将我的画布转换为 Base64，很好，我做到了......

然后我用cordova搜索了一个存储base64的函数，发现了一个存储Blob对象的function，所以我再次搜索并找到了一个function，它可以将我的base64转换为Blob，又很好，显然有效，但是当我转到文件资源管理器时，我只是得到一个以纯文本形式显示的文件（并将其扩展名更改为 .txt ）：

[object Uint8Array][object Uint8Array]

这是我的最终代码：

   function draw() {
        window.requestFileSystem(window.TEMPORARY, 5 * 1024 * 1024, function (fs) {
        console.log('file system open: ' + fs.name);
        getSampleFile(fs.root);
        }, errorHandler);
   }


  function getSampleFile(dirEntry) {

  var canvas = document.getElementById("mycanvas");
   if (canvas.getContext) {
     var ctx = canvas.getContext("2d");
     //...some code to customize the canvas

     //var mURI = canvas.toDataURL();
     var mURI = canvas.toDataURL().replace(/data:image\/png;base64,/,'');

     var x = Math.floor((Math.random() * 100000) + 1);
     saveFile(dirEntry, b64toBlob(mURI,"image/png","512") , x+".png");
            }

  }

  function b64toBlob(b64Data, contentType, sliceSize) {
    contentType = contentType || '';
    sliceSize = sliceSize || 512;
    console.log('Estoy en B64');

    var byteCharacters = atob(b64Data);
    var byteArrays = [];

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
    }
    console.log('ByteArrays'+byteArrays);
    var blob = new Blob(byteArrays, {type: contentType});

    return blob;
  }


function saveFile(dirEntry, fileData, fileName) {
    console.log('1. DIRENTRY:'+dirEntry+', 2 FILEDATA:'+fileData+',3 FILENAME:'+fileName);
      dirEntry.getFile(fileName, { create: true, exclusive: false }, function (fileEntry) {

          writeFile(fileEntry, fileData);

      }, errorHandler);
  }

  function writeFile(fileEntry, dataObj, isAppend) {

fileEntry.createWriter(function (fileWriter) {

    fileWriter.onwriteend = function() {
        console.log("Successful file write...");
    };

    fileWriter.onerror = function(e) {
        console.log("Failed file write: " + e.toString());
    };

    fileWriter.write(dataObj);
});
}

希望你能帮帮我，这个的主要目的是存储一张带水印的图片，所以如果你有其他想法请告诉我，谢谢

Answer 1

由于您需要添加water mark，您可以参考以下链接

W3School Link
Jsfiddle Link

已编辑

var yourCanvas = document.getElementById('yourCanvasId');
var context = yourCanvas.getContext('2d');
var waterMarkImg = document.getElementById("waterMarkImageId");
context.drawImage(waterMarkImg, 0, 0, yourCanvas.width, yourCanvas.height);
var basse64 = yourCanvas.toDataURL();