画布到。Cordova PhoneGap的.jpg文件 [英] Canvas to .jpg file with Cordova Phonegap

问题描述

我试图在我的divice中存储一个画布，在互联网上读，我发现我必须转换我的画布到 Base64 ，不错，我做了...

I'm trying to store a canvas in my divice, reading in internet i found that i have to convert my canvas to Base64, nice, i did it...

然后我搜索一个函数来存储base64与cordova，并找到一个函数，存储一个Blob对象，所以我再次搜索，并发现一个函数，将我的base64转换为Blob，再次很好，它显然工作，但当我去文件浏览器，我只是得到一个文件，说在平原文本（并将其扩展名更改为.txt）：

Then i searched a function to store a base64 with cordova and just found a function that stores a Blob object, so i searched again and found a function that converts my base64 to Blob, and nice again, it apparently works, but when i go to the file explorer i'm just getting a file that says in plain text (and changing its extension to .txt ):

[object Uint8Array] [object Uint8Array]

[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);
});
}

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

I hope you can help me, the main goal of this is to store a picture with a watermark, so if you have another idea please tell me, thanks

推荐答案

由于你需要添加一个水印您可以参考以下链接

Since you need to add a water mark you may refer following links

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();

这篇关于画布到。Cordova PhoneGap的.jpg文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！