5

画像をキャンバス要素に読み込んでサイズを変更できますが、サイズ変更された画像を取得するのに問題があります。

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);
}

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");
});

スニペット:

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>

4

1 に答える 1

11

JSZip で dataURL を有効な png ファイルに正しく保存するに{base64: true}は、メソッドの 3 番目の引数としてを含むオブジェクトを追加し、dataURL からzip.file()を削除する必要があるようですdata:image/png;base64,。

また、imgUrl変数にクリック イベントを割り当てていました。グローバル変数に格納するか、$('.logo>img')[0].srcまたは を再度呼び出すことをお勧めし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>

于 2015-07-10T03:22:01.330 に答える