私はhtml2canvasを使用して、カスタム機能を備えたGoogleマップjavascript APIをキャンバスに変換し、次に画像に変換しています。javascriptを使用してイメージ/ HTMLキャンバスを半分にカットする方法は?
すべてのブラウザで問題なく動作しますが、IE 11以外では、画像の右側に(ブラウザウィンドウの幅 - マップの幅)と同じ余分な空白がある画像が生成されます。だから、私の窓が広いほど、右にスペースがあり、その逆もあります。
この画像(またはHTMLキャンバス)を実際の画像の端に正確に(768ピクセル幅)スライスするにはどうすればよいですか?
私はここで、このコードが見つかりましたが、このタスクのためにそれを修正する方法を知りませんでした:
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];
}
優れた外観。私は明日私がオフィスに戻ってきて、アップデートを書くときにこれをテストします。ありがとう! – TetraDev
美しく仕上げられ、完璧に動作します。あなたのものをベースにした完全なコードを追加します。 – TetraDev
匿名関数の中でなぜイメージを返す必要があるのか私に説明できますか?それは正確に何ですか?私はまだ返された値がすぐに呼び出される匿名関数の内部でどのように動作するかを理解しようとしています。 – TetraDev