<canvas id="canvas"></canvas> <div id="holder" class="normal">Drop your bitmap here</div> <script type="text/javascript"> var holder = document.getElementById('holder'); var canvas = document.getElementById('canvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var ctx = canvas.getContext('2d'); /* if (window.File && window.FileReader && window.FileList && window.Blob) { alert("支持!"); } else { alert('HTML5 File API在您的浏览器里是不完全支持的。'); }*/ holder.ondragover = function() { this.className = 'hover'; return false; //屏蔽默认的拖放处理 }; holder.ondragend = function() { this.className = 'normal'; return false; }; holder.ondrop = function(e) { this.className = 'normal'; e.preventDefault(); var file = e.dataTransfer.files[0]; //获取到所拖拽的第一个文件 reader = new FileReader(); //创建一个FileReader对象 reader.onload = function(event) { //当本地文件读取完毕后调用以下函数 img = new Image(); //创建一个Image对象 img.src = event.target.result; //将读取的二进制位图数据赋予该对象 img.onload = function() { ctx.clearRect(0, 0, canvas.width, canvas.height); //清除Canvas中已有的内容 ctx.drawImage(this, 0, 0, canvas.width, canvas.height); //将Image对象显示在Canvas中 delete this; //删除Image对象,以释放缓存 } }; reader.readAsDataURL(file); //在FileReader对象中读取文件内容 return false; }; </script>
本地文件操作--拖拽图片
猜你喜欢
转载自blog.csdn.net/qq_22317389/article/details/80328058
今日推荐
周排行