Cutting an Image into pieces through Javascript

by

This is easy to do with Canvas. The general idea is:

var image = new Image();
image.onload = cutImageUp;
image.src="https://stackoverflow.com/questions/8912917/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];
}

More Related Contents:

  1. Single event handler for four button clicks
  2. Parse an HTML string with JS
  3. Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink
  4. jQuery document.createElement equivalent?
  5. How to get the raw value an field?
  6. Replacing css file on the fly (and apply the new style to the page)
  7. How to fix getImageData() error The canvas has been tainted by cross-origin data?
  8. Losing scope when using ng-include
  9. Prevent Page Load on Jquery Form Submit with None Display Button
  10. Performance of MutationObserver to detect nodes in entire DOM
  11. Benefits of loading JS at the bottom as opposed to the top of the document
  12. HTML5 Audio Looping
  13. Programmatically play video with sound on Safari and Mobile Chrome
  14. jQuery – How to select by attribute
  15. time delayed redirect?
  16. open url in new tab or reuse existing one whenever possible
  17. Detect click event inside iframe
  18. Uploading Image to Amazon s3 with HTML, javascript & jQuery with Ajax Request (No PHP)
  19. How does GitHub change the URL but not the reload? [duplicate]
  20. Why does a FORM with one text INPUT submit on enter while one with two text INPUTs does not? [duplicate]
  21. Javascript click event listener on multiple elements and get target ID
  22. Writing data to a local text file with javascript
  23. html download attribute redirects to url instead of downloading
  24. When loading an html page via ajax, will script tags be loaded?
  25. React, losing saved data in localStorage with useEffect after page refresh
  26. How to get CSS class property in Javascript?
  27. How to parse html to React component?
  28. Converting Chart.js canvas chart to image using .toDataUrl() results in blank image
  29. XSS attacks and style attributes
  30. HTML5 File api, reading in an xml/text file and displaying it on the page?

Leave a Comment