canvas等比縮放圖片

時間  2019-12-10
標籤 canvas 等比 縮放 圖片 简体版
原文   原文鏈接 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>等比縮放圖片</title>
<link rel="stylesheet" href="../css/bootstrap.css" />
<link rel="stylesheet" href="../css/test.css" />
<script src="../js/jquery-3.2.1.js"></script>
<script src="../js/bootstrap.js"></script>
</head>

<body>

<div>
	<img src="../images/autumn.jpg" id="img1" style="width:1000px;"/>
</div>
<div>
	<canvas id="cvs"></canvas>
</div>
<script>
	window.onload=function(){
		var imgwidth=$("#img1").width();
		var imgheight=$("#img1").height();
		console.log(imgwidth+" "+imgheight);
		//獲得圖片的高寬比，用以計算canvas的高
		var scale=imgheight/imgwidth;
		var cheight=300*scale;
		$("#cvs").width(300);
		$("#cvs").height(cheight);
		var c=document.getElementById("cvs");
		var ctx=c.getContext("2d");
		var img=document.getElementById("img1");
		ctx.drawImage(img,0,0,300,cheight);
	}
</script>
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程