1

画像をスライスする次のコードがあります。次の HTML コードがあります

<img id="imagen" src="original.png" >
<canvas id="myCanvas" width="150" height="600"></canvas>

jQuery コード

$(document).ready(function() {
   var image = document.getElementById('imagen');
   var canvas = document.getElementById('myCanvas');
   var ctx = canvas.getContext('2d');

   image.onload = function() {
      ctx.drawImage(image, 0, 0, 50, image.height, 0, 0, 50, image.height);
   };

   var i = canvas.toDataURL('image/jpeg');
   console.log( i );
});

今、スライスされた部分を取得しようとすると、canvas変数に保存されていることを確認するiと、黒い画像が表示されます。なぜこれが起こったのか、そしてそれを解決する方法を誰かが教えてくれますか? ありがとう。

4

1 に答える 1

0

キャンバス上の描画を画像として取得する前に、まずキャンバスに描画する必要があります。これは、キャンバスが描画された後に画像を取得するためにキャンバスが描画されることを確認するためです。

image.onload = function() {
   ctx.drawImage(image, 0, 0, 50, image.height, 0, 0, 50, image.height);
   var i = canvas.toDataURL('image/jpeg');
   console.log( i );
};
于 2013-02-08T01:26:29.217 に答える