晚上好,
所以,我一直在研究一个项目,我必须将图像从pc上传到画布上,当图像在那里时,我必须在画布上添加元素,这些元素可以通过画布获得。
到目前为止我得到的是可拖动的画布元素(example),这里是代码:
<script type="text/javascript">
contador = 0;
function start(e) {
e.dataTransfer.effecAllowed = 'copyMove';
e.dataTransfer.setData("Data", e.target.id);
e.dataTransfer.setDragImage(e.target, 10, 10);
e.target.style.opacity = '0.4';
}
function end(e){
e.target.style.opacity = '';
e.dataTransfer.clearData("Data");
}
function enter(e) {
e.target.style.border = '3px dotted #555';
}
function leave(e) {
e.target.style.border = '';
}
function over(e) {
var elemArrastrable = e.dataTransfer.getData("Data");
var id = e.target.id;
if (id == 'cuadro1'){
return false;
}
if (id == 'cuadro2'){
return false;
}
if (id == 'papelera')
return false;
}
function drop(e){
var elementoArrastrado = e.dataTransfer.getData("Data");
e.target.appendChild(document.getElementById(elementoArrastrado));
e.target.style.border = '';
tamContX = $('#'+e.target.id).width();
tamContY = $('#'+e.target.id).height();
tamElemX = $('#'+elementoArrastrado).width();
tamElemY = $('#'+elementoArrastrado).height();
posXCont = $('#'+e.target.id).position().left;
posYCont = $('#'+e.target.id).position().top;
x = e.layerX;
y = e.layerY;
if (posXCont + tamContX <= x + tamElemX){
x = posXCont + tamContX - tamElemX;
}
if (posYCont + tamContY <= y + tamElemY){
y = posYCont + tamContY - tamElemY;
}
document.getElementById(elementoArrastrado).style.position = "absolute";
document.getElementById(elementoArrastrado).style.left = x + "px";
document.getElementById(elementoArrastrado).style.top = y + "px";
}
function eliminar(e){
var elementoArrastrado = document.getElementById(e.dataTransfer.getData("Data"));
elementoArrastrado.parentNode.removeChild(elementoArrastrado);
e.target.style.border = '';
}
function clonar(e){
var elementoArrastrado = document.getElementById(e.dataTransfer.getData("Data"));
elementoArrastrado.style.opacity = '';
var elementoClonado = elementoArrastrado.cloneNode(true);
elementoClonado.id = "ElemClonado" + contador;
contador += 1;
elementoClonado.style.position = "static";
e.target.appendChild(elementoClonado);
e.target.style.border = '';
}
</script>
现在,我已经看到了将图像上传到画布(http://jsfiddle.net/influenztial/qy7h5/)的很好的例子,但是如何将图像上传到画布,然后将图像添加到同一图像的脚本?
非常感谢任何帮助。