anchor.diff:  	</div>
   
   	<div id="size" style="display: none"></div>
  -	<div class="footer">Copyright &copy; 2016 Souvenirs, All Rights
  -		Reserved.</div>
  +	<div class="footer">Copyright &copy; 2016 Souvenirs, All Rights Reserved.</div>
  +
  +	<!-- 模态框（Modal） -->
  +	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  +		<div class="modal-dialog">
  +			<div class="modal-content">
  +				<div class="modal-header">
  +					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  +					<h4 class="modal-title" id="myModalLabel">Select Image Resolution</h4>
  +				</div>
  +
  +				<div class="modal-body">
  +					<div class="radio">
  +						<label>
  +							<input type="radio" name="optionsRadios" id="origin_size" value="origin_size" checked>
  +							Origin Size(<span id="origin_size_text"></span>)
  +						</label>
  +					</div>
  +					<div class="radio">
  +						<label>
  +							<input type="radio" name="optionsRadios" id="SHD_size" value="SHD_size">
  +							Super High Resolution(<span id="SHD_size_text"></span>)
  +						</label>
  +					</div>
  +					<div class="radio">
  +						<label>
  +							<input type="radio" name="optionsRadios" id="HD_size" value="HD_size">
  +							High Resolution(<span id="HD_size_text"></span>)
  +						</label>
  +					</div>
  +					<div class="radio">
  +						<label>
  +							<input type="radio" name="optionsRadios" id="SD_size" value="SD_size">
  +							Standard Resolution(<span id="SD_size_text"></span>)
  +						</label>
  +					</div>
  +					<div class="radio">
  +						<label>
  +							<input type="radio" name="optionsRadios" id="LD_size" value="LD_size">
  +							Low Resolution(<span id="LD_size_text"></span>)
  +						</label>
  +					</div>
  +					<div class="radio">
  +						<label>
  +							<input type="radio" name="optionsRadios" id="edit_size" value="edit_size">
  +							Resolution of Editing Image(<span id="edit_size_text"></span>)
  +						</label>
  +					</div>
  +					<h5><strong>Notice:</strong></h5>
  +					<ul>
  +						<li>Image components with low resolution may be obscure when making a high-resolution souvenir.</li>
  +						<li>Resolution of HD or above is recommended for printing and postcard making.</li>
  +					</ul>
  +				</div>
  +
  +				<div class="modal-footer">
  +					<button type="button" class="btn btn-primary" onclick="checkSubmit()">Make Souvenir and Download</button>
  +					<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
  +				</div>
  +			</div>
  +			<!-- /.modal-content -->
  +		</div>
  +		<!-- /.modal-dialog -->
  +	</div>
  +	<!-- /.modal -->
  +
   </body>
   </html>
positive.code: 
  					<div class="row" style="margin-top: 10px;">
  						<div class="col-sm-4 col-md-2 col-lg-1 narrow-col">
  							<button type="button" id="save_text" class="btn btn-primary"
  								aria-label="Left Align" onclick="saveText()">Save Text</button>
  						</div>
  					</div>
  				</div>
  
negative.code: 
  	function checkSubmit() {
  		isDrawing = false;
  		if (document.getElementById("origin_size").checked)
  			download_ratio = 1;
  		else if (document.getElementById("SHD_size").checked)
  			download_ratio = 1080/souvenir_obj[0].originH;
  		else if (document.getElementById("HD_size").checked)
  			download_ratio = 720/souvenir_obj[0].originH;
  		else if (document.getElementById("SD_size").checked)
  			download_ratio = 576/souvenir_obj[0].originH;
  		else if (document.getElementById("LD_size").checked)
  			download_ratio = 480/souvenir_obj[0].originH;
  		else if (document.getElementById("edit_size").checked)
  			download_ratio = ratio;
  		else
  			download_ratio = ratio;
  		document.getElementById("download_canvas").width = R(souvenir_obj[0].originW);
  		document.getElementById("download_canvas").height = R(souvenir_obj[0].originH);
  		intervalid = setInterval("fun()", 1000);
  		drawSouvenir("download_canvas");
  		$('#myModal').modal('toggle'); 
  		//isDrawing = true;
  	}
  
  	function fun() {
  		if (isFinished) {
  			document.getElementById('picture').innerHTML = document
  					.getElementById('download_canvas').toDataURL('image/png');
  			if (document.getElementById('picture').innerHTML.length >= 10485760) {
  				alert("Souvenir is too large, its size should be less than 7MB");
  				clearInterval(intervalid);
  				isDrawing = true;
  				return;
  			}
  			alert('making finished');
  			clearInterval(intervalid);
  			document.getElementById('making_form').submit();
  			isDrawing = true;
  		}
  	}
  
  	function calcSouvenirResolution() {
  		document.getElementById("origin_size_text").innerHTML = souvenir_obj[0].originW
  				+ "px * " + souvenir_obj[0].originH + "px";
  		document.getElementById("SHD_size_text").innerHTML = Math
  				.round(souvenir_obj[0].originW
  						* (1080 / souvenir_obj[0].originH))
  				+ "px * 1080px";
  		document.getElementById("HD_size_text").innerHTML = Math
  				.round(souvenir_obj[0].originW
  						* (720 / souvenir_obj[0].originH))
  				+ "px * 720px";
  		document.getElementById("SD_size_text").innerHTML = Math
  				.round(souvenir_obj[0].originW
  						* (576 / souvenir_obj[0].originH))
  				+ "px * 576px";
  		document.getElementById("LD_size_text").innerHTML = Math
  				.round(souvenir_obj[0].originW
  						* (480 / souvenir_obj[0].originH))
  				+ "px * 480px";
  		document.getElementById("edit_size_text").innerHTML = document
  				.getElementById("myCanvas").width
  				+ "px * " + document.getElementById("myCanvas").height + "px";
  	}
  </script>
  
  