帆布與科爾多瓦的PhoneGap .jpg文件

我試圖存儲帆布我divice，閱讀網上我發現我有我的畫布轉換爲Base64，可愛的，我做到了......帆布與科爾多瓦的PhoneGap .jpg文件

然後我搜索了一個函數來存儲一個base64與科爾多瓦，並發現一個function，存儲一個Blob對象，所以我再次搜索，發現function，將我的base64轉換成Blob，又好，它顯然工作，但是當我去文件瀏覽器我剛開始在純文本說，一個文件（並更改其擴展名爲.txt）：

[對象Uint8Array] [對象UIN t8Array]

這是我的最終代碼：

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

我希望你能幫助我，這樣做的主要目的是存儲圖片有水印，因此，如果您有其他想法，請告訴我，謝謝

來源

2016-06-07 user3891850

既然你需要添加一個water mark您可以參考以下鏈接

W3School Link
Jsfiddle Link

EDITED

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

來源

2016-06-07 18:47:10

謝謝您的回答@Charitha Goonewardena，但我已經在做這...問題是存儲該canvas元素作爲一個PNG或JPEG文件 – user3891850

你可以簡單地轉換您的畫布到base64字符串。我編輯了我的答案。希望它有幫助。任何需要嗡嗡我=）好運 –

再次感謝@Charitha Goonewardena，這是在上面的代碼中，我需要的是一個函數來存儲該base64字符串作爲.jpg或.png，我在cordova文檔中搜索，但不能找到適合它的東西，我會非常感激，如果你能幫助我 – user3891850

帆布與科爾多瓦的PhoneGap .jpg文件

回答

相關問題