首先，我正在使用cordova。
我想做一个应用程序来获取图片并在屏幕上显示它（已经完成了！）。现在，我需要选择一些其他小图片，将它们拖放到原始图片上，保存修改并发送到服务器......
如何在拖放小图像后进行拖放并保存大图像？ （如果可能，使用插件）
我看到了这个，但我怎么能保存为新图像？ Drag and Drop functionality in PhoneGap?
答案 0 :(得分：1)
我是怎么做到的：
<!DOCTYPE html>
<html>
<head>
<!-- meta -->
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<!-- css -->
<link rel="stylesheet" type="text/css" href="css/camera.css">
<!-- js -->
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/camera.js"></script>
<script type="text/javascript" src="js/compartilhamento.js"></script>
<!-- jQuery -->
<script type="text/javascript" src="jQuery/jquery-1.10.2.js"></script>
<!--script type="text/javascript" src="jQuery/jquery.mobile-1.4.5.min.js"></script-->
<script type="text/javascript" src="jQuery/jquery-ui.min.js"></script>
<script src="jQuery/jquery.ui.touch-punch.min.js"></script>
<!-- js drag and drop -->
<script type="text/javascript" src="js/add-aderecos.js"></script>
<script type="text/javascript" src="js/salva-canvas.js"></script>
<title></title>
</head>
<body>
<div style="" id="botoes">
<p><a href="menu.html">Voltar</a></p>
<p><input type="button" onClick="tiraFoto()" value="Acessar Câmera"></p>
</div>
<!--Aqui estao os objetos disponibilizados para drag-->
<div id="objetos" style="display: none;">
<p>Clique na imagem que desejar adicionar à sua foto!</p>
<img src="img/nariz.png" id="add-nariz"></img>
<hr/>
</div>
<!--Pega as dimensoes da foto vinda da camera/galeria e posteriormente é cópia do canvas, para que possa ser compartilhado via social-x-sharing plugin-->
<img id="pegaDim" src="" style="display: none;"></img>
<!--aqui está a foto tirada, com redimensionamento via CSS. Aqui acontece a edicao da imagem-->
<div id="box-foto">
<img src="" id="imagemCamera" style="display: none;"></img>
</div>
<!--pra cá será copiada a imagem editada-->
<canvas id="myCanvas" style="display: none;"></canvas>
<!--botoes-->
<div id="compartilhamento" style="display: none;">
<p><input type="button" value="Salvar Mudanças" id="salvaImagem"/></p>
<p><input type="button" onclick="imagemTeste('pegaDim');" value="Compartilhar Imagem" /></p>
</div>
</body>
</html>
function tiraFoto() {
navigator.camera.getPicture(onSuccess, onFail,
{
destinationType : Camera.DestinationType.FILE_URI,
sourceType : Camera.PictureSourceType.CAMERA
}
);
}
function onSuccess(imageData) {
//pega DOM
var compartilha = document.getElementById('compartilhamento');
var botoes = document.getElementById('botoes');
var pegaDim = document.getElementById('pegaDim');
var image = document.getElementById('imagemCamera');
var objetos = document.getElementById('objetos');
//aparece depois da foto
objetos.style.display = 'block';
pegaDim.src = imageData;
image.src = imageData;
image.style.display = 'block';
compartilha.style.display = 'block';
botoes.style.display = 'none';
}
function onFail(message) {
alert('Erro: ' + message);
}
$(document).on('click', '#add-nariz', function(){
var a = $('#add-nariz');
var src = a.attr('src');
var elem = $('<img class="objetos" src="' + src + '" width="30px" height="30px" style="positon: relative;" />');
$('#box-foto').append(elem);
elem.draggable();
});
$(document).on('click', '#salvaImagem', function(){
//pega dimensoes originais da foto da camera/galeria
var dimensoesOriginais = document.getElementById('pegaDim');
var larguraOriginal = dimensoesOriginais.width;
var alturaOriginal = dimensoesOriginais.height;
//pega a imagem que aparece na tela e o canvas
var m = $('#imagemCamera');
var totX = parseInt(m.css('width'));
var totY = parseInt(m.css('height'));
var c = document.getElementById('myCanvas');
c.width = totX;
c.height = totY;
var ctx = c.getContext('2d');
//alert(totX + '\n' + totY);
var base = m[0];
//drawImage(imagem,comecaCorteX,comecaCorteY,paraCorteX,paraCorteY,X,Y,Largura,Altura)
ctx.drawImage(base,0,0,larguraOriginal,alturaOriginal,0,0,totX,totY);
var posicoes = [];
$(".objetos").each(function(){
var img = $(this);
x = parseInt(img.css("left"))+totX;
y = parseInt(img.css("top"))+totY;
altura = parseInt(img.css("width"));
largura = parseInt(img.css("height"));
posicoes.push([
x,
y,
largura,
altura,
]);
});
//alert( JSON.stringify(posicoes));
//pega a imagem do nariz -- palheativo
var copiasNariz = $('#add-nariz')[0];
//loop pra canvas
var j;
var numAderecos = posicoes.length;
for(j = 0; j < numAderecos; j++){
//drawImage(imagem,comecaCorteX,comecaCorteY,paraCorteX,paraCorteY,X,Y,Largura,Altura)
ctx.drawImage(copiasNariz,posicoes[j][0]-156+(j*posicoes[j][2]),posicoes[j][1],posicoes[j][2],posicoes[j][3]);
alert('posicao inicial: ' + posicoes[j][0] + '\n\nposicao final: ' + posicoes[j][0]-156+(j*posicoes[j][2]) + '\n\nvariacao de :' + (-156+(j*posicoes[j][2])));
}
//Esconde a foto original e mostra o canvas
var some = document.getElementById('box-foto');
c.style.display = "block";
some.style.display = "none";
//esconde os objetos arrastaveis
$('#objetos')[0].style.display = "none";
//faz uma copia do canvas como src de uma tag img -- vai pro pegaDim
var finalImageToShare = new Image();
var srcFinal = finalImageToShare.src;
srcFinal = c.toDataURL();
dimensoesOriginais.src = srcFinal;
});
function imagemTeste(idTag) {
var tag = document.getElementById(idTag);
var img = tag.src;
window.plugins.socialsharing.share('Imagem compartilhada via aplicativo X.', 'Assunto (caso envie por email)', img, null);
}
我真的很抱歉葡萄牙的ids，类和变量或函数的名称，但是我害怕当我改成英语忘记了什么，这就停止了。所以我在我的真实项目中复制了代码。
我相信我的代码“丑陋”而且比必要的时间长，但我对javaScript还不是很好。