どのようなコードを書いているのか気になるところですが、
ほかのwidth/height属性を持つエレメントと違い、<canvas>のwidth/height属性が重要な意味を持ちコンテキストのサイズとなります。
html
1<canvas width="300" height="300" style="width:150px; height:150px"></canvas>
とすると、コンテキストサイズは300x300ですが、150x150に縮小されて表示されます。
ですので、
javascript
1var cnv = document.querySelector('canvas');
2var img = new Image();
3img.onload = function() {
4 // コンテキストのサイズを画像のサイズに設定
5 cnv.width = img.naturalWidth;
6 cnv.height = img.naturalHeight;
7}
8img.src = 'hoge.jpg';
9
10cnv.toBlob(function(blob) {
11 var preview = document.getElementById('preview');
12 preview.src = URL.createObjectURL(blob);
13}, 'image/jpeg', 1.0);
といったコードを記述すれば、元の画像サイズのまま保存することが可能です。
サンプル
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/24 06:03