Export resized image in canvas to new JSZip package

Question

I can load an image into a canvas element and resize it, but I'm having trouble grabbing the resized image:

var logo = $(".logo"),
    loader = $(".load"),
    canvas = $(".holder"),
    ctx = canvas[0].getContext("2d");

function displayPreview(file) {
  var reader = new FileReader();

  reader.onload = function(e) {
    var img = new Image();
    img.src = e.target.result;
    img.onload = function() {
      // x, y, width, height
      ctx.drawImage(img, 0, 0, 128, 128);

      var dataURL = canvas[0].toDataURL("image/png");

      var logo = $(".logo");
      var imgUrl = dataURL;
      var imgz = $("<img>");
      imgz.attr("src", imgUrl);
      logo.html("");
      logo.append(imgz);
    };
  };
  reader.readAsDataURL(file);
}

into the download package function for jszip.

// Download Zip
$(".download").on("click", function(imgUrl) {
  var zip = new JSZip();
  zip.file("logo.png", imgUrl);
  var content = zip.generate({type:"blob"});
  // see FileSaver.js
  saveAs(content, "test.zip");
});

Snippet:

 var logo = $(".logo"), loader = $(".load"), canvas = $(".holder"), ctx = canvas[0].getContext("2d"); function displayPreview(file) { var reader = new FileReader(); reader.onload = function(e) { var img = new Image(); img.src = e.target.result; img.onload = function() { // x, y, width, height ctx.drawImage(img, 0, 0, 128, 128); var dataURL = canvas[0].toDataURL("image/png"); var logo = $(".logo"); var imgUrl = dataURL; var imgz = $("<img>"); imgz.attr("src", imgUrl); logo.html(""); logo.append(imgz); }; }; reader.readAsDataURL(file); } $(document).ready(function() { loader.on("change", function(evt) { var file = evt.target.files[0]; displayPreview(file); var reader = new FileReader(); reader.onload = function(e) { // Download Zip $(".download").on("click", function(imgUrl) { var zip = new JSZip(); zip.file("logo.png", imgUrl); var content = zip.generate({type:"blob"}); // see FileSaver.js saveAs(content, "test.zip"); }); return false; }; reader.readAsArrayBuffer(file); }); // Trigger Load Image $(".trigload").click(function() { $("input").trigger("click"); }); });

 @import url("http://necolas.github.io/normalize.css/3.0.1/normalize.css"); .hide { display: none; } .logo { text-align: center; } .fill { width: 100%; } .fr { float: right; }

 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="http://stuk.github.io/jszip/dist/jszip.min.js"></script> <script type="text/javascript" src="http://stuk.github.io/jszip-utils/dist/jszip-utils.js"></script> <script type="text/javascript" src="http://stuk.github.io/jszip/vendor/FileSaver.js"></script> <input type="file" class="hide load"> <a class="trigload" href="javascript:void(0)">Load Image</a> <a class="download fr" href="javascript:void(0)">Download</a> <div class="logo"></div> <div class="fill" align="center"> <canvas class="holder" width="128" height="128"></canvas> </div>

Answer 1

In order to get JSZip to correctly save your dataURL to valid png file, it seems you need to add an object containing {base64: true} as third argument of the zip.file() method, and to remove the data:image/png;base64, from the dataURL.

Also, you were assigning the click event to the imgUrl variable. You may want to store it in a global variable, or check the $('.logo>img')[0].src or call once again canvas[0].toDataURL() .

 var logo = $(".logo"), loader = $(".load"), canvas = $(".holder"), ctx = canvas[0].getContext("2d"); function displayPreview(file) { var reader = new FileReader(); reader.onload = function(e) { var img = new Image(); img.src = e.target.result; img.onload = function() { // x, y, width, height ctx.drawImage(img, 0, 0, 128, 128); var dataURL = canvas[0].toDataURL("image/png"); var logo = $(".logo"); var imgUrl = dataURL; var imgz = $("<img>"); imgz.attr("src", imgUrl); logo.html(""); logo.append(imgz); }; }; reader.readAsDataURL(file); } $(document).ready(function() { loader.on("change", function(evt) { var file = evt.target.files[0]; displayPreview(file); var reader = new FileReader(); reader.onload = function(e) { // Download Zip $(".download").on("click", function() { var imgUrl = canvas[0].toDataURL(); var zip = new JSZip(); zip.file("logo.png", imgUrl.split('base64,')[1],{base64: true}); var content = zip.generate({type:"blob"}); // see FileSaver.js saveAs(content, "test.zip"); }); return false; }; reader.readAsArrayBuffer(file); }); // Trigger Load Image $(".trigload").click(function() { $("input").trigger("click"); }); });

 @import url("http://necolas.github.io/normalize.css/3.0.1/normalize.css"); .hide { display: none; } .logo { text-align: center; } .fill { width: 100%; } .fr { float: right; }

 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="http://stuk.github.io/jszip/dist/jszip.min.js"></script> <script type="text/javascript" src="http://stuk.github.io/jszip-utils/dist/jszip-utils.js"></script> <script type="text/javascript" src="http://stuk.github.io/jszip/vendor/FileSaver.js"></script> <input type="file" class="hide load"> <a class="trigload" href="javascript:void(0)">Load Image</a> <a class="download fr" href="javascript:void(0)">Download</a> <div class="logo"></div> <div class="fill" align="center"> <canvas class="holder" width="128" height="128"></canvas> </div>

2022 Edit

JSZip now accepts Blobs as input directly, so it's better to convert your canvas to a Blob and pass this directly to JSZip. ( As a fiddle because StackSnippets don't allow-downloads).