Question

晚上好，

所以，我一直在研究一个项目，我必须将图像从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/）的很好的例子，但是如何将图像上传到画布，然后将图像添加到同一图像的脚本？

非常感谢任何帮助。

将图像上载到画布并添加额外元素

0 个答案: