Jak wyciąć obraz/płótno HTML na pół przez javascript?

Question

Używam html2canvas do przekształcania interfejsu API map javascript google z niestandardowymi funkcjami w płótno, a następnie obraz.

Działa dobrze we wszystkich przeglądarkach, z wyjątkiem IE 11 generuje obraz z dodatkową pustą przestrzenią po prawej stronie obrazu, równą szerokości okna przeglądarki (szerokość mapy). Im szersze jest moje okno, tym więcej miejsca po prawej i odwrotnie.

Jak mogę podzielić ten obraz (lub HTMLcanvas) dokładnie na krawędź rzeczywistego obrazu (szerokość 768 pikseli)?

znalazłem ten kod tutaj, ale nie wiem, jak zmodyfikować go do tego zadania:

var image = new Image(); 
image.onload = cutImageUp; 
image.src = 'myimage.png'; 

function cutImageUp() { 
    var imagePieces = []; 
    for(var x = 0; x < numColsToCut; ++x) { 
     for(var y = 0; y < numRowsToCut; ++y) { 
      var canvas = document.createElement('canvas'); 
      canvas.width = widthOfOnePiece; 
      canvas.height = heightOfOnePiece; 
      var context = canvas.getContext('2d'); 
      context.drawImage(image, x * widthOfOnePiece, y * heightOfOnePiece, widthOfOnePiece, heightOfOnePiece, 0, 0, canvas.width, canvas.height); 
      imagePieces.push(canvas.toDataURL()); 
     } 
    } 

    // imagePieces now contains data urls of all the pieces of the image 

    // load one piece onto the page 
    var anImageElement = document.getElementById('myImageElementInTheDom'); 
    anImageElement.src = imagePieces[0]; 
} 

Answer 1

Oto żniwiarz płótno, które tworzy obraz. Musisz dostosować wymiary kadrowania mapy.

// initialize the test canvas and wireup cut button. 
 
(function() { 
 
    var can = document.getElementById('test'); 
 
    var w = can.width = 400; 
 
    var h = can.height = 200; 
 
    var ctx = can.getContext('2d'); 
 

 
    ctx.fillStyle = "#336699"; 
 
    ctx.fillRect(0, 0, 200, 200); 
 
    ctx.strokeStyle = "#000000"; 
 
    ctx.lineWidth = 20; 
 
    ctx.strokeRect(0, 0, w, h); 
 
    ctx.strokeRect(0, 0, w/2, h); 
 
    var btn = document.getElementById('cut'); 
 
    btn.addEventListener('click', function() { 
 
     
 
    var croppedCan = crop(can, {x: 0, y: 0}, {x: 200, y: 200}); 
 
    
 
    // Create an image for the new canvas. 
 
    var image = new Image(); 
 
    image.src = croppedCan.toDataURL(); 
 
    
 
    // Put the image where you need to. 
 
    document.getElementsByTagName('body')[0].appendChild(image); 
 
    return image; 
 
    
 
    }); 
 
})(); 
 

 

 
// function crop 
 
// Returns a cropped canvas given a cavnas and crop region. 
 
// 
 
// Inputs: 
 
// can, canvas 
 
// a, {x: number, y: number} - left top corner 
 
// b, {x: number, y: number} - bottom right corner 
 

 
function crop(can, a, b) { 
 
    // get your canvas and a context for it 
 
    var ctx = can.getContext('2d'); 
 
    
 
    // get the image data you want to keep. 
 
    var imageData = ctx.getImageData(a.x, a.y, b.x, b.y); 
 
    
 
    // create a new cavnas same as clipped size and a context 
 
    var newCan = document.createElement('canvas'); 
 
    newCan.width = b.x - a.x; 
 
    newCan.height = b.y - a.y; 
 
    var newCtx = newCan.getContext('2d'); 
 
    
 
    // put the clipped image on the new canvas. 
 
    newCtx.putImageData(imageData, 0, 0); 
 
    
 
    return newCan;  
 
}

<button id='cut'>Crop</button> 
 
<hr/> 
 
<canvas id='test'></canvas> 
 
<hr/>

Answer 2

Oto kod zrobiłem który odbywa się mapa Google, generuje płótnie, plastry ją na skraju rzeczywistego obrazu do przymocowania IE 11 błędów, a następnie wyprowadza ten nowy obraz, i wreszcie drukuje kontener.

// Insert map container for output to printer 
    var element = $("#map-container"); 
    var printContainer = $("#printContainer"); 

    html2canvas(element, { 
     useCORS: true, 
     onrendered: function (canvas) { 

      // Must clear the printContainer before each session prints, or it will also print the previous info (if user presses the print results button twice) 
      printContainer.empty(); 

      // Put the map into a canvas inside #printContainer 
      printContainer.append(canvas); 

      // Find the canvas we just made 
      var myCanvas = printContainer.find("canvas")[0]; // add the [0] to get the native DOM element object 
      myCanvas.id = 'generatedCanvas1'; 

      // Check if we're running IE 11 or earlier 
      var ua = window.navigator.userAgent; 
      var isIE = (ua.indexOf('MSIE') > 0 || ua.indexOf('Trident') > 0); 

      if (isIE) { 
       console.log("We're on IE"); 

       // ========================================================================================== 
       // ======= IE Fix for canvas/image generation - slice the canvas ========================== 
       // ========================================================================================== 


       // function crop 
       // Returns a cropped canvas given a cavnas and crop region. 
       // 
       // Inputs: 
       // can, canvas 
       // a, {x: number, y: number} - left top corner 
       // b, {x: number, y: number} - bottom right corner 


       (function() { 
        var croppedCan = crop(myCanvas, { x: 0, y: 0 }, { x: 800, y: 768 }); 

        // Create an image for the new canvas. 
        var image = new Image(); 
        image.src = croppedCan.toDataURL(); 


        // Should we print the map image? Only if this is true... 
        if ($('*').hasClass('map-invisible posrel map-show')) { 

         //var dataUrl = canvas.toDataURL("image/png"); 

         imageMap = '<p style="text-align:center;"><img id="canvasImage" src="' + image.src + '" height="800" width="768" /></p>'; 
         div.append('<p>&nbsp;</p>').html(); 
         div.append(imageMap); 
        } 

        // Put the image where you need to. 
        //document.getElementById('printContainer').appendChild(image); 
        return image; 

        //}); 
       })(); 


       function crop(can, a, b) { 
        // get your canvas and a context for it 
        var ctx = can.getContext('2d'); 

        // get the image data you want to keep. 
        var imageData = ctx.getImageData(a.x, a.y, b.x, b.y); 

        // create a new cavnas same as clipped size and a context 
        var newCan = document.createElement('canvas'); 
        newCan.width = b.x - a.x; 
        newCan.height = b.y - a.y; 
        var newCtx = newCan.getContext('2d'); 

        // put the clipped image on the new canvas. 
        newCtx.putImageData(imageData, 0, 0); 

        return newCan; 
       } 


       // ========================================================================================== 
       // ======= END IE Fix for canvas/image generation - slice the canvas ====================== 
       // ========================================================================================== 
      } else { 
       console.log("We're not on IE"); 
       // For all other browsers except IE 

       // Should we print the map image? Only if this is true... 
       if ($('*').hasClass('map-invisible posrel map-show')) { 

        var image = new Image(); 
        image.src = canvas.toDataURL("image/png"); 

        imageMap = '<p style="text-align:center;"><img id="canvasImage" src="' + image.src + '" height="800" width="768" /></p>'; 
        div.append('<p>&nbsp;</p>').html(); 
        div.append(imageMap); 
       } 
      } 


      // Build the data set 
      div.append(criteriaDiv); 
      div.append(pageTable).html(); 


      // Add the new data into the hidden printContainer 
      printContainer.append(div); 

      // Remove the original canvas which was cropped so it doesnt print with the new canvas image 
      $("#generatedCanvas1").remove(); 

      // Fire the print command 
      printContainer.printThis({ 
       //debug: true 
       printDelay: 1500   // variable print delay needed so that css has time to load for the printout 

      }); 


      // For Debugging with the "#printMe" button 
      $(function() { 
       $("#printMe").click(function() { 
        //$printIframe.printThis({ 
        // debug: true, 
        printDelay: 1500   // variable print delay 

        //}); 
        var $iframe = $("iframe[name='printIframe']"); 


        setTimeout(function() { 
         if ($iframe.hasClass("MSIE")) { 
          // check if the iframe was created with the ugly hack 
          // and perform another ugly hack out of neccessity 
          window.frames["printIframe"].focus(); 
          $head.append("<script> window.print(); </script>"); 
         } else { 
          // proper method 
          if (document.queryCommandSupported("print")) { 
           $iframe[0].contentWindow.document.execCommand("print", false, null); 
          } else { 
           $iframe[0].contentWindow.focus(); 
           $iframe[0].contentWindow.print(); 
          } 
         } 


        }, 333); 
       }); 
      }); 

      // PrintThis usage and options 
      //* $("#mySelector").printThis({ 
      //*  debug: false,    * show the iframe for debugging 
      //*  importCSS: true,   * import page CSS 
      //*  importStyle: false,   * import style tags 
      //*  printContainer: true,  * grab outer container as well as the contents of the selector 
      //*  loadCSS: "path/to/my.css", * path to additional css file - us an array [] for multiple 
      //*  pageTitle: "",    * add title to print page 
      //*  removeInline: false,  * remove all inline styles from print elements 
      //*  printDelay: 333,   * variable print delay 
      //*  header: null,    * prefix to html 
      //*  formValues: true   * preserve input/form values 
      //* }); 
     } 
    }); 

Answer 3

próbować używać haxcv prosty biblioteki i łatwy

https://docs.haxcv.org/Methods/cutImage

np.

var pikseli = _ ("IMG") cutImage (x, y, szerokość, wysokość) ;

_ ("img"). Src (Pixels.src);