画布到。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
已修改
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屋!