Dicas simples podem resolver estes problemas e vou buscar postar tudo que aprendi e continuo aprendendo com o desenvolvimento Mobile além de publicações .Net, C#, HTML5, CSS.. ou seja,
todos os bugs que me tirarem o sono vou posta resoluções para tentar salvar o sono de alguém.
Já de cara deixo uma dica bem interessante aos desenvolvedores Web/Mobile:
Referências de imagens:
Ao utilizar uma referência de imagens com uma pasta por ex.. "/images/image.jpg" o navegador vai aceitar e debugando você não terá problemas, mas já na geração da apk você vai chorar até descobrir que não existe a barra inicial..
Ou seja:
Web: "/images/image.jpg"
Mobile: "images/image.jpg"
Simples né? mas me tirou o sono...
Já que estamos falando de imagens então fica o código de conversão Image to Byte64 e armazenamento SQLITE.
$("#addButton").click(function () {
//Utilizando CANVAS HTML5 para gerar a image em Byte
//Imagens adicionadas manualmente (poderia alterar para buscar local)
var imageSave = new Image();
imageSave.onload = function () {
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var dataURL;
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL("image/jpg"); //Gera o Blob da img
if (dataURL != "data:,") {
db.transaction(function (transaction) {
transaction.executeSql('insert into Rating (Img, Value, Rate) VALUES ("' + dataURL + '", "' + imageSave.name + '", 0);', []);
});
}
canvas = null;
};
$(imageSave).attr("name", "card1");
$(imageSave).attr("src", "images/card1.jpg");
});
O que o código acima faz?
Gera um Canvas (HTML5) e adiciona os dados da imagem selecionada buscando o .toDataURL que irá gerar o BLOB da imagem, simplesmente deve ser inserido como dataURl no DB Blob.
Complementando:
'<img style="display:inline-block; width: 80%;" src="'+blob+'" />
Fácil né?
