캔버스

Question

나는 내가 Base64, 좋은, 내가 그것을했다 ...

내 캔버스를 변환 할 필요가 있음을 발견 인터넷에서 읽고, 내 divice에 캔버스를 저장하기 위해 노력하고있어 그런 다음 cordova와 함께 base64를 저장하는 함수를 검색하여 Blob 객체를 저장하는 function을 찾았습니다. 다시 검색하여 Blob에 내 base64를 변환하는 function을 찾았습니다. 다시 멋지게 작동하지만, 내가 갈 때는 분명히 작동합니다. 파일 탐색기 그냥 일반 텍스트 (그리고 .txt 확장명을 변경하는 파일) 가져 오는 중입니다 :

[개체 Uint8Array] [개체 Uin8Array] 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); 
}); 
} 

, 이것의 주요 목표는 워터 마크와 함께 사진을 저장하는 것입니다, 그래서 당신이 다른 생각이 있으면 알려주세요 나, 감사

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