独角兽企业重金招聘Python工程师标准>>>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/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>
