Làm thế nào để cắt một hình ảnh/HTML canvas một nửa thông qua javascript?

Question

Tôi đang sử dụng html2canvas để biến API bản đồ javascript của google bằng các tính năng tùy chỉnh, thành canvas và sau đó là hình ảnh.

Hoạt động tốt trên tất cả các trình duyệt, ngoại trừ trên IE 11 nó tạo ra một hình ảnh với khoảng trống thừa ở bên phải của hình ảnh, bằng với chiều rộng của cửa sổ trình duyệt - chiều rộng bản đồ. Vì vậy, cửa sổ của tôi càng rộng, càng có nhiều khoảng trống bên phải và ngược lại.

Làm cách nào để cắt hình ảnh này (hoặc HTMLcanvas) ở chính xác cạnh của hình ảnh thực tế (rộng 768px)?

tôi tìm thấy mã này ở đây nhưng không biết làm thế nào để sửa đổi nó cho công việc này:

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

Dưới đây là một giống chim bồ câu canvas mà tạo ra một hình ảnh. Bạn sẽ cần phải điều chỉnh kích thước cắt xén cho bản đồ của mình.

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

Dưới đây là đoạn code tôi đã thực hiện trong đó có bản đồ google, tạo ra một canvas, lát nó ở rìa của hình ảnh thực tế để sửa chữa các lỗi IE 11, sau đó kết quả đầu ra rằng hình ảnh mới, và cuối cùng in vùng chứa.

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

cố gắng sử dụng haxcv đơn giản thư viện và dễ dàng

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

dụ:.

var Pixels = _ ("img") cutImage (x, y, width, height) ;

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