2

我需要在画布上放置一个图像，然后使用鼠标在画布上绘制一个随机形状，剪切形状内部的区域并从剪切区域创建另一个图像，以便我可以对其应用 som 变换。

例如，加载一张照片，用鼠标从图片中选择一个人，然后可以移动这个人，或者增加它的大小。

我在将剪辑区域内的图像转换为图像的步骤中遇到问题。

到目前为止，这是我的代码http://jsfiddle.net/PB3rR/2/

<!doctype>
<html>
<head>


    <script type="text/javascript">
        function mostrarImagenInicial() {
        var codigo = document.getElementById("codigobase").value;
        document.getElementById("miCanvas").style.backgroundImage = "url("+codigo+")";

        }
        function mostrarImagen() {
            var codigo = document.getElementById("codigobase").value;
            var elementoCanvas = document.getElementById("miCanvas");
            var cxt = elementoCanvas.getContext("2d");
            var img = new Image();
            img.src = codigo;
            img.onload = function() {
                cxt.drawImage(img, 0, 0, 150, 94);
            }

        }
        var pizarra_canvas;
        var pizarra_context;
        var top = 0;
        var left = 0;
        var right = 0;
        var bottom = 0;
        var posx;
        var posy;
        var imageData;

        /*function seleccionar(){
            var posx = e.clientX-pizarra_canvas.offsetLeft;
            var posy = e.clientY-pizarra_canvas.offsetTop;
            var imgData=pizarra_context.getImageData(posx,posy);
            alert(posx);
        }*/

    function empezar(){
        pizarra_canvas = document.getElementById("miCanvas");
        pizarra_context = pizarra_canvas.getContext("2d");
        pizarra_context.strokeStyle = "#000";
        pizarra_canvas.addEventListener("mousedown",empezarPintar,false);
        pizarra_canvas.addEventListener("mouseup",terminarPintar,false);
        //seleccionar();
    }

    function empezarPintar(e){
        pizarra_context.beginPath();
        pizarra_context.moveTo(e.clientX-pizarra_canvas.offsetLeft,e.clientY-pizarra_canvas.offsetTop);
        pizarra_canvas.addEventListener("mousemove",pintar,false);
    }

    function terminarPintar(e) {
        pizarra_context.closePath();
        pizarra_context.stroke();
        pizarra_context.clip();
        mostrarImagen();
        pizarra_canvas.removeEventListener("mousemove",pintar,false);
        //alert(posx+ " " +posy);
        document.getElementById("miCanvas").style.backgroundImage = "url()";
    }

    function pintar(e) {
    pizarra_context.lineTo(e.clientX-pizarra_canvas.offsetLeft,e.clientY-pizarra_canvas.offsetTop);
    pizarra_context.stroke();
    }

    </script>
</head>
<body onload="empezar();">

    <input type="text" placeholder="aqui va el codigo en base 64" name="codigobase" id="codigobase" value="data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw=="/>
    <input type="submit" value="Mostrar imagen" onClick="mostrarImagenInicial()" /> <br>
    <canvas id="miCanvas" width="500px" height="200px" style="border:1px solid black;background-repeat:no-repeat;background-size:150px 94px;"></canvas>

</html>
4

0 回答 0