Of Stack

canvas realizes image interception function

  • 2021-07-16 01:41:22
  • OfStack

In this paper, we share the specific code of canvas image interception for your reference. The specific contents are as follows 


<!DOCTYPE html> 
<html> 
<head lang="en"> 
  <meta charset="UTF-8"> 
  <title>canvas- Image interception </title> 
  <style> 
    canvas{ 
      border: 1px dashed red; 
      float: left; 
      position: relative; 
 
    } 
  </style> 
  </head> 
<body> 
  <div id="cantox" style="position: relative"> 
    <canvas id="oldcanvas" width="500px" height="300px"> 
    </canvas> 
    <div id="cliptox" style="position: absolute;display:none"></div> 
  </div> 
  <button id ="btnclip" style="float: left"> Intercept the area </button> 
  <canvas id="nowcanvas" width="500px" height="300px" > 
  </canvas> 
 
  <script> 
    // Get div Element  
    var cantox = document.getElementById("cantox"); 
    var cliptox = document.getElementById("cliptox"); 
    var btnclip = document.getElementById("btnclip"); 
    // Get to canvas Element  
    var oldcanvas = document.getElementById("oldcanvas"); 
    var nowcanvas = document.getElementById("nowcanvas"); 
    // Get canvas Drawing environment in  
    var oldcontext = oldcanvas.getContext('2d'); 
    var nowcontext = nowcanvas.getContext('2d'); 
 
    var img = new Image(); 
    img.src = "./image/liuyifei.jpg"; 
 
    // Load an image to the canvas In the canvas  
    window.onload = function (){ 
      oldcontext.drawImage(img,0,0,oldcanvas.width,oldcanvas.height); 
    } 
    var startPoint;// Start coordinates of intercepted image  
    var endPoint;// End coordinates of screenshot image  
    var w; // Width of intercepted image  
    var h; // Height of intercepted image  
    var flag = false; // Matter control for judging moving events  
    // Mouse press event  
    cantox.onmousedown = function (e){ 
      flag = true; 
      cliptox.style.display = 'block'; 
      startPoint = windowToCanvas(oldcanvas, e.clientX, e.clientY); 
      cliptox.style.left = startPoint.x+'px'; 
      cliptox.style.top = startPoint.y+'px'; 
    } 
 
    // Mouse movement event  
    cantox.onmousemove = function (e){ 
      if(flag){ 
        cliptox.style.background = 'rgba(0,0,0,0.5)'; 
        endPoint = windowToCanvas(oldcanvas, e.clientX, e.clientY); 
        w = endPoint.x - startPoint.x; 
        h = endPoint.y - startPoint.y; 
        cliptox.style.width = w +'px'; 
        cliptox.style.height = h+'px'; 
      } 
    } 
    // Mouse release event  
    cantox.onmouseup = function (e){ 
      flag = false; 
    } 
 
    // Button interception event  
    btnclip.onclick = function (){ 
      imgCut(nowcontext,img,oldcanvas.width,oldcanvas.height,startPoint.x,startPoint.y,w,h); 
    } 
 
    /* 
    *  Image truncation function  
    * context: Drawing Environment Objects  
    * image Image object  
    * imgElementW Width of image display  
    * imgElementH Height of image display  
    * sx: The beginning of intercepting an image X Coordinates  
    * sy: The beginning of intercepting an image Y Coordinates  
    * w: Width of intercepted image  
    * h: Height of intercepted image  
    * */ 
    function imgCut(context,image,imgElementW,imgElementH,sx,sy,w,h){ 
      // Clean the canvas for redrawing  
      context.clearRect(0,0,imgElementW,imgElementH); 
      // Calculation   : Proportion  =  Original image / Display image  
      var ratioW = image.width/imgElementW; 
      var ratioH = image.height/imgElementH; 
      // According to the position and size of the captured image, the position and size of the original image are calculated  
      //.drawImage( Image object , Initiation of original image interception X Coordinates , Initiation of original image interception Y Coordinates , Width of original image interception , The height of the original image interception,  
      //  Start of drawing an image X Coordinates , Start of drawing an image Y Coordinates , Width required to draw an image , The height required to draw the image ); 
      context.drawImage(image,ratioW*sx,ratioH*sy,ratioW*w,ratioH*h,0,0,w,h); 
    } 
 
    /* 
     *  Coordinate transformation: set the window To the coordinates in the element box and returns the coordinates in the (x,y) Coordinates  
     * element : canvas Element object  
     * x: The mouse is in the current window X Coordinate value  
     * y: The mouse is in the current window Y Coordinate value  
     * */ 
    function windowToCanvas(element,x,y){ 
      // Gets the current mouse in the window Coordinate values in  
      // alert(event.clientX+"-------"+event.clientY); 
      // Gets the coordinate attribute of an element  
      var box = element.getBoundingClientRect(); 
      var bx = x - box.left; 
      var by = y - box.top; 
      return {x:bx,y:by}; 
    } 
  </script> 
</body> 
</html>
Related articles: