2

キャンバスに画像を配置し、マウスを使用してキャンバスにランダムな形状を描画し、形状内の領域をクリップし、クリップされた領域から別の画像を作成して、いくつかの変換を適用できるようにする必要があります。

たとえば、写真を読み込み、マウスで写真から人を選択すると、その人を移動したり、サイズを大きくしたりできます。

クリップされた領域内の画像を画像に変換するために必要な手順に問題があります。

ここに私のコードがあります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