【Canvas】在canvas中画出一张图片
【效果】
【代码】
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>UNASSIGNED</title> <style type="text/css"> .center{ margin:0 auto; width:1200px; } .centerlize{ margin:0 auto; width:1200px; } </style> </head> <body onload="init();"> <div class="center"><input type="file" id="myFile" name="filename"/></div> <div class="centerlize"> <canvas id="myCanvas" width="1200px" height="600px" style="border:1px dotted black;"> 如果看到这段文字说您的浏览器尚不支持HTML5 Canvas，请更换浏览器再试. </canvas> </div> </body> </html> <script type="text/javascript"> <!-- /***************************************************************** * 将全体代码(从<!DOCTYPE到script>)拷贝下来，粘贴到文本编辑器中， * 另存为.html文件，再用chrome浏览器打开，就能看到实现效果。 ******************************************************************/ function init(){ var fileInput = document.getElementById("myFile"); fileInput.addEventListener("change", function(event) { // 处理文件 var files = event.target.files; const file = files[0];// 获取所选的文件 const filePath = URL.createObjectURL(file);// 获取所选的文件路径 // 创建Image队向 var img=new Image(); img.src=filePath;// 指定文件内容 // canvas所在div var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); // canvas的绘图环境 img.onload=function(){ // 改变canvas对应div的高宽，非必要 canvas.width=img.width; canvas.height=img.height; // 在canvas的绘图环境中描绘图片 ctx.drawImage(img,0,0); }; }); } //--> </script>
END
