html5画布中的Clip方法_Html_Canvas_Clip

html5画布中的Clip方法

html canvas

html5画布中的Clip方法,html,canvas,clip,Html,Canvas,Clip,我需要在画布上放置一个图像，然后使用鼠标在画布上绘制一个随机形状，剪裁形状内的区域，并从剪裁区域创建另一个图像，以便对其应用som变换例如，加载一张照片，用鼠标从照片中选择一个人，然后可以移动该人，或增大其大小我在将剪辑区域内的图像转换为图像时遇到了问题这是到目前为止我的代码 <!doctype> <html> <head> <script type="text/javascript"> function most

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

例如，加载一张照片，用鼠标从照片中选择一个人，然后可以移动该人，或增大其大小

我在将剪辑区域内的图像转换为图像时遇到了问题

这是到目前为止我的代码

<!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>