質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

0回答

2970閲覧

fabric.jsを利用して画像サイズ変更ツールを作成したい

NecoPunch_

総合スコア5

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/03/30 08:31

編集2022/01/12 10:55

いつもお世話になっております。
今回fabric.jsを利用したWebでの画像サイズ変更ツールを作成しておりますが
期待している値が取れず皆様のお力添えをいただければと思っておりました。

前提・実現したいこと

fabric.jsを利用して画像リサイズツールを作成したい
・画像を枠を拡大拡小しサイズを変更(この時テキストボックスの入力値も変更)
・テキストボックスに入力されたwidth,heightを画像に反映させサイズが変更される
・鍵マークが表示されている間はアスペクト比を維持して画像のサイズを変更
・編集画像をリサイズし、表示範囲をプレビューcanvasに表示する

発生している問題・エラーメッセージ

・アスペクト比を維持せずリサイズ→アスペクト比を維持してリサイズした時編集する前の画像サイズに一度戻る
・プレビュー画面に初期表示はうまくできるがリサイズ後の画像がうまく表示されない

該当のソースコード

jquery

1var canvas; 2var imageData; 3var imgWidth; 4var imgHeight; 5var ratio; 6var isLock = 1; 7var prevWidth = parseInt(document.getElementById('previewCanvas').style.width, 10) -3; 8var prevHeight = parseInt(document.getElementById('previewCanvas').style.height, 10) -3; 9var advtWidth = parseInt(document.getElementById('advertisementWidth').value, 10); 10var advtHeight = parseInt(document.getElementById('advertisementHeight').value, 10); 11 12$(function(){ 13 canvas = new fabric.Canvas('cnvs'); 14 fabric.Object.prototype.transparentCorners = false; 15 16 fabric.Image.fromURL('/images/Common/logo.png', function(oImg) { 17 oImg.set('left', 40); 18 oImg.set('top', 250); 19 imageData = oImg; 20 canvas.add(oImg); 21 22 imgWidth = Math.round(imageData.width * imageData.scaleX); 23 imgHeight = Math.round(imageData.height * imageData.scaleY); 24 previewBorder(); 25 prevCnvs(oImg); 26 document.getElementById('imgWidth').value = imgWidth; 27 document.getElementById('imgHeight').value = imgHeight; 28 }); 29 30 canvas.on({ 31 'object:modified': displayCnvs, 32 }); 33 34 function displayCnvs() { 35 imgWidth = Math.round(imageData.width * imageData.scaleX); 36 imgHeight = Math.round(imageData.height * imageData.scaleY); 37 document.getElementById('imgWidth').value = imgWidth; 38 document.getElementById('imgHeight').value = imgHeight; 39 previewBorder(); 40 prevCnvs(imageData); 41 } 42}); 43 44//テキストボックスの値を反映 45$(function(){ 46 $('#imgWidth').change(function () { 47 if(isLock == 1){ 48 var inputWidth = parseInt(document.getElementById('imgWidth').value,10); 49 aspectResize(inputWidth, imageData.width); 50 return false; 51 } 52 resizeWidth(this.value); 53 }); 54 55 $('#imgHeight').change(function () { 56 if(isLock == 1){ 57 var inputHeight = parseInt(document.getElementById('imgHeight').value,10); 58 aspectResize(inputHeight, imageData.height); 59 return false; 60 } 61 resizeHeight(this.value); 62 }); 63}); 64//width(+)(ー)ボタン 65$(function(){ 66 $('#minusWidth').click(function () { 67 var inputWidth = intoImgSize('imgWidth',-1); 68 if(isLock == 1){ 69 aspectResize(inputWidth, imageData.width); 70 return false; 71 } 72 resizeWidth(inputWidth); 73 return false; 74 }); 75 76 $('#plusWidth').click(function () { 77 var inputWidth = intoImgSize('imgWidth',1); 78 if(isLock == 1){ 79 aspectResize(inputWidth, imageData.width); 80 return false; 81 } 82 resizeWidth(inputWidth); 83 return false; 84 }) 85}); 86 87//height(+)(ー)ボタン 88$(function(){ 89 $('#minusHeight').click(function () { 90 var inputHeight = intoImgSize('imgHeight',-1); 91 if(isLock == 1){ 92 aspectResize(inputHeight, imageData.height); 93 return false; 94 } 95 resizeHeight(inputHeight); 96 return false; 97 }); 98 99 $('#plusHeight').click(function () { 100 var inputHeight = intoImgSize('imgHeight',1); 101 if(isLock == 1){ 102 aspectResize(inputHeight, imageData.height); 103 return false; 104 } 105 resizeHeight(inputHeight); 106 return false; 107 }) 108}); 109 110//アスペクト比固定リサイズ 111$(function(){ 112 $('#lockMinusSize').click(function () { 113 inputWidth = intoImgSize('imgWidth',-1); 114 aspectResize(inputWidth, imageData.width); 115 return false; 116 }); 117 118 $('#lockPlusSize').click(function () { 119 inputWidth = intoImgSize('imgWidth',1); 120 aspectResize(inputWidth, imageData.width); 121 return false; 122 }) 123}); 124 125//鍵マーク表示切り替え 126$(function(){ 127 $('#lockImgTd').click(function () { 128 var hidden = document.getElementById('lockImg').hidden; 129 if(hidden){ 130 document.getElementById('lockImg').hidden = false; 131 isLock = 1; 132 }else{ 133 document.getElementById('lockImg').hidden = true; 134 isLock = 0; 135 } 136 }) 137}); 138 139function intoImgSize(thisId,afterSize) { 140 inputSize = parseInt(document.getElementById(thisId).value,10); 141 inputSize = inputSize + afterSize; 142 return inputSize 143} 144 145function resizeWidth(inputWidth) { 146 imageData.scaleX = inputWidth / imageData.width; 147 canvas.requestRenderAll(); 148 imgWidth = Math.round(imageData.width * imageData.scaleX); 149 document.getElementById('imgWidth').value = imgWidth; 150 previewBorder(); 151} 152 153function resizeHeight(inputHeight) { 154 imageData.scaleY = inputHeight / imageData.height; 155 canvas.requestRenderAll(); 156 imgHeight = Math.round(imageData.height * imageData.scaleY); 157 document.getElementById('imgHeight').value = imgHeight; 158 previewBorder(); 159} 160 161function aspectResize(inputSize,imgSize){ 162 imageData.scale(parseFloat(inputSize/imgSize)).setCoords(); 163 canvas.requestRenderAll(); 164 imgWidth = Math.round(imageData.width * imageData.scaleX); 165 imgHeight = Math.round(imageData.height * imageData.scaleY); 166 document.getElementById('imgWidth').value = imgWidth; 167 document.getElementById('imgHeight').value = imgHeight; 168 previewBorder(); 169} 170 171function previewBorder(){ 172 if(imgWidth <= prevWidth && imgHeight <= prevHeight){ 173 document.getElementById('previewCanvas').style.borderColor = '#01983e'; 174 }else{ 175 document.getElementById('previewCanvas').style.borderColor = 'red'; 176 } 177} 178var flg = 0; 179function prevCnvs(img) { 180 var prevCnvs = document.getElementById('previewImg'); 181 var context = prevCnvs.getContext('2d'); 182 var prevWidth = prevCnvs.width; 183 var prevHeight = prevCnvs.height; 184 var cnvsWidth = imgWidth; 185 var cnvsHeight = imgHeight; 186 if(flg == 1){ 187 context.clearRect(0, 0, prevWidth, prevHeight); 188 } 189 190 if(advtWidth < imgWidth){ 191 cnvsWidth = cnvsWidth - (imgWidth - advtWidth); 192 }else{ 193 prevWidth = prevWidth - (advtWidth - imgWidth); 194 } 195 if(advtHeight < imgHeight){ 196 cnvsHeight = cnvsHeight - (imgHeight - advtHeight); 197 }else { 198 prevHeight = prevHeight - (advtHeight - imgHeight); 199 } 200 context.drawImage(img._element, 0, 0, cnvsWidth, cnvsHeight, 0, 0, prevWidth, prevHeight); 201 flg = 1; 202}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問