Firebaseを利用した中耳炎診療支援Webアプリの作成　(2.画面の作成～canvasで画像表示)

<!-- コンテンツ表示画面 --><headerclass="header"><divclass="wrapper header-wrapper"><h1class="site-titel">急性中耳炎診療支援アプリ</h1><divid="dr_start"class="nav-list"><divclass="nav-item">医師名
          <inputtype="text"id="dr_name"placeholder="アカウント名を入力"class="form-parts"></div><divclass="nav-item"><buttonid="start"class="form-parts btn">開始</button></div></div></div></header><mainid="container"style="display:none;"class="wrapper"><divclass="works__list"><sectionid="first_treatment"class="works__item"><h2id="first">初診</h2><divid="pt_name"><divclass="patient">患者ID
              <inputtype="text"id="pt_id"placeholder="半角入力"class="form-parts"></div></div><dlid="question"><formid="age"><dtclass="form-title">年齢（24か月未満)</dt><dd><labelfor="no"><inputname="age"type="radio"value="0"id="no"checked>NO</label><labelfor="yes"><inputname="age"type="radio"value="3"id="yes">YES</label></dd></form><formid="pain"><dtclass="form-title">耳痛</dt><dd><labelfor="なし"><inputname="pain"type="radio"value="0"id="なし"checked>なし</label><labelfor="あり"><inputname="pain"type="radio"value="1"id="あり">あり</label><labelfor="持続性高度"><inputname="pain"type="radio"value="2"id="持続性高度">持続性高度</label></dd></form><formid="fever"><dtclass="form-title">発熱 </dt><dd><labelfor="37.5℃未満"><inputname="fever"type="radio"value="0"id="37.5℃未満"checked>37.5℃未満</label><labelfor="38.5℃未満"><inputname="fever"type="radio"value="1"id="38.5℃未満">38.5℃未満</label><labelfor="38.5℃以上"><inputname="fever"type="radio"value="2"id="38.5℃以上">38.5℃以上</label></dd></form><formid="cry"><dtclass="form-title">啼泣、不機嫌</dt><dd><labelfor="泣きなし"><inputname="cry"type="radio"value="0"id="泣きなし"checked>なし</label><labelfor="泣きあり"><inputname="cry"type="radio"value="1"id="泣きあり">あり</label></dd></form><formid="hot"><dtclass="form-title">鼓膜発赤</dt><dd><labelfor="発赤なし"><inputname="hot"type="radio"value="0"id="発赤なし"checked>なし</label><labelfor="鼓膜一部"><inputname="hot"type="radio"value="2"id="鼓膜一部">鼓膜一部</label><labelfor="鼓膜全体"><inputname="hot"type="radio"value="4"id="鼓膜全体">鼓膜全体</label></dd></form><formid="swelling"><dtclass="form-title">鼓膜膨隆</dt><dd><labelfor="膨隆なし"><inputname="swelling"type="radio"value="0"id="膨隆なし"checked>なし</label><labelfor="部分的膨隆"><inputname="swelling"type="radio"value="4"id="部分的膨隆">部分的膨隆</label><labelfor="全体的膨隆"><inputname="swelling"type="radio"value="8"id="全体的膨隆">全体的膨隆</label></dd></form><formid="otorrhea"><dtclass="form-title">耳漏</dt><dd><labelfor="耳漏なし"><inputname="otorrhea"type="radio"value="0"id="耳漏なし"checked>なし</label><labelfor="鼓膜観察可"><inputname="otorrhea"type="radio"value="4"id="鼓膜観察可">鼓膜観察可</label><labelfor="観察不可"><inputname="otorrhea"type="radio"value="8"id="観察不可">観察不可</label></dd></form></dl><buttonid="total"class="btn">スコア集計</button><divid="total_score"></div><divid="evaluation"></div><divid="recomend_treatment"></div><dl><formid="incision"><dtclass="form-title">今回鼓膜切開</dt><dd><labelfor="今回なし"><inputname="incision"type="radio"id="今回なし"value=""checked>なし</label><labelfor="今回あり"><inputname="incision"type="radio"id="今回あり"value="（鼓膜切開施行）">あり</label></dd></form></dl><buttonid="select_treatment">治療選択</button><div><textareaname=""id="text"cols="50"rows="2"placeholder="実施治療"></textarea><divclass="patient">鼓膜画像を選択</div><formid="my_form"><inputid="ufile"name="ufile"type="file"accept="image/jpeg,image/png"><br></form><hr><div><!-- <p>プレビュー</p>               --><canvasid="cnvs"></canvas><!-- canvas要素を配置 --></div><divid="send_clear"><buttonid="send"class="btn">保存</button><buttonid="clear"class="btn">削除</button></div><divid="output"></div></section><sectionid="secondary_treatment"class="works__item"><divid="text_search"><h2id="search_pt">患者検索</h2><divclass="patient">患者ID
                      <inputtype="text"id="search_word"placeholder="半角入力"class="form-parts"></div><divid="search_clear"><buttonid="search"class="btn">検索</button><buttonid="clear_research"class="btn">削除</button></div></div><divid="search_results"></div></section><sectionid="search_patient"class="works__item"><divid="pt_name2"><h2id="secondary">再診</h2><divclass="patient">患者ID
                      <inputtype="text"id="pt_id2"placeholder="半角入力"class="form-parts"></div></div><dl><formid="effect"><dlclass="form-title">前回治療後改善</dl><dd><labelfor="改善なし"><inputname="effect"type="radio"value="前回治療後改善なし"id="改善なし"checked>なし</label><labelfor="改善あり"><inputname="effect"type="radio"value="前回治療後改善あり"id="改善あり">あり</label></dd></form></dl><divid="last_btm"><p>前回治療 <spanid="span1"></span></p><selectid="last_treatment"class="form-parts"><optionvalue="抗生剤非投与">抗生剤非投与</option><optionvalue="AMPC常用量">AMPC常用量</option><optionvalue="AMPC高用量">AMPC高用量</option><optionvalue="CVA/AMPC 1：14製剤">CVA/AMPC 1：14製剤</option><optionvalue="CDTR-PI常用量">CDTR-PI常用量</option><optionvalue="CDTR-PI高用量">CDTR-PI高用量</option><optionvalue="TBPM-PI常用量">TBPM-PI常用量</option><optionvalue="TFLX常用量">TFLX常用量</option></select><inputtype="button"id="select2"value="選択"/></div><divid="recomend_treatment2"></div><dl><formid="incision2"><dtclass="form-title">今回鼓膜切開</dt><dd><labelfor="切開なし"><inputname="incision2"type="radio"id="切開なし"value=""checked>なし</label><labelfor="切開あり"><inputname="incision2"type="radio"id="切開あり"value="(鼓膜切開施行)">あり</label></dd></form></dl><buttonid="select_treatment2">治療選択</button><div><textareaname=""id="text2"cols="50"rows="2"placeholder="実施治療"></textarea><divid="send_clear2"><buttonid="send2"class="btn">保存</button><buttonid="clear2"class="btn">削除</button></div><divid="output2"></div></div></section></div></main><footerclass="footer"><smallclass="copyrights">© 2019 katsuyuki doi</small><!--/ コンテンツ表示画面 -->

varimage=newImage();$(function(){// id="ufile"の変化でコールバック$("#ufile").change(function(){// 選択ファイルの有無をチェックif(!this.files.length){alert("ファイルが選択されていません");return;}// Formからファイルを取得varfile=this.files[0];// (1) HTMLのCanvas要素の取得varcanvas=$("#cnvs");// (2) getContext()メソッドで描画機能を有効にするvarctx=canvas[0].getContext("2d");// 描画イメージインスタンス化// var image = new Image();// File API FileReader Objectでローカルファイルにアクセスvarfr=newFileReader();// ファイル読み込み読み込み完了後に実行 [非同期処理]fr.onload=function(evt){// 画像がロードされた後にcanvasに描画を行う [非同期処理]image.onload=function(){// (3) プレビュー(Cnavas)のサイズを指定varcnvsH=140;varcnvsW=(image.naturalWidth*cnvsH)/image.naturalHeight;// (4) Cnavasにサイズアトリビュートを設定するcanvas.attr("width",cnvsW);canvas.attr("height",cnvsH);// (5) 描画ctx.drawImage(image,0,0,cnvsW,cnvsH);};// 読み込んだ画像をimageのソースに設定image.src=evt.target.result;};// fileを読み込む データはBase64エンコードされるfr.readAsDataURL(file);});});