HTML / JavaScript Canvas - how to draw an image between source and destination points?

前端 未结 1 1278
忘了有多久
忘了有多久 2020-12-10 22:18

I\'ve tried to use the drawImage function of the canvas.

In the documentation (http://msdn.microsoft.com/en-us/library/ie/ff975414(v=vs.85).aspx) I thought the last

相关标签:
1条回答
  • 2020-12-10 22:59
    context.drawImage( 
        sourceImage, 
        sourceX, sourceY, sourceWidthToClip, sourceHeightToClip, 
        canvasX, canvasY, scaledWidth, scaledHeight );
    

    In context.drawImage the first parameter is the source image.

    The next 4 parameters are the x,y,width & height rectangular sub-image to clip from that source

    The last 4 parameters are the x,y,scaledWidth & scaledHeight rectangular scaled image to draw on the canvas.

    Annotated drawImage:

    context.drawImage(
    
        sourceImage,  // the source image to clip from
    
        sX,           // the left X position to start clipping 
        sY,           // the top Y position to start clipping
        sW,           // clip this width of pixels from the source
        wH,           // clip this height of pixels from the source
    
        dX,           // the left X canvas position to start drawing the clipped sub-image
        dY,           // the top Y canvas position to start drawing the clipped sub-image
        dW,           // scale sW to dW and draw a dW wide sub-image on the canvas
        dH            // scale sH to dH and draw a dH high sub-image on the canvas
    
    }
    

    Visual drawImage:

    ![enter image description here][1]

    Code example for drawImage:

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var canvas1=document.getElementById("drawImage");
    var ctx1=canvas1.getContext("2d");
    
    var img=new Image();
    img.onload=start;
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/avatars.jpg";
    function start(){
    
      canvas.width=img.width;
      canvas.height=img.height;
      ctx.drawImage(img,0,0);
    
      var scale=2;
      canvas1.width=471/5*3;
      canvas1.height=255/2*3;
    
      ctx1.drawImage(img,
                     94,0,94,120,
                     50,50,94*scale,120*scale
                    );
    }
    body{ background-color: ivory; padding:10px; }
    canvas{border:1px solid red;}
    <h4>The original image</h4>
    <canvas id="canvas" width=300 height=300></canvas><br>
    <h4>The clipped & scaled sub-image drawn into the canvas</h4>
    <canvas id="drawImage" width=300 height=300></canvas>

    Example Illustration for drawImage:

    enter image description here

    [ Addition: How to control dx,dy with html range controls ]

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var canvas1=document.getElementById("drawImage");
    var ctx1=canvas1.getContext("2d");
    
    var $dx=$('#dx');
    var $dy=$('#dy');
    var scale=2;
    
    var img=new Image();
    img.onload=start;
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/avatars.jpg";
    function start(){
    
      canvas.width=img.width;
      canvas.height=img.height;
      ctx.drawImage(img,0,0);
    
      canvas1.width=471/5*3;
      canvas1.height=255/2*3;
    
      draw();
    
      $dx.change(function(){draw();});
      $dy.change(function(){draw();});
    
    }
    
    function draw(){
      ctx1.clearRect(0,0,canvas1.width,canvas1.height);
      ctx1.drawImage(img,94,0,94,120,$dx.val(),$dy.val(),94*scale,120*scale);
    }
    body{ background-color: ivory; padding:10px; }
    canvas{border:1px solid red;}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <h4>The original image</h4>
    <canvas id="canvas" width=300 height=300></canvas><br>
    <h4>The clipped & scaled sub-image drawn into the canvas</h4>
    dx:<input id=dx type=range min=0 max=280 value=0><br>
    dy:<input id=dy type=range min=0 max=380 value=0><br>
    <canvas id="drawImage" width=300 height=300></canvas>
    [1]: http://i.stack.imgur.com/9paHM.jpg

    0 讨论(0)
自定义标题
段落格式
字体
字号
代码语言
提交回复
热议问题