pc直接粘贴到div图片

来源：互联网发布：java小轮径公路车编辑：程序博客网时间：2024/05/01 02:59

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function ReSizePic(ThisPic){
var RePicWidth = 200; //这里修改为您想显示的宽度值

//============以下代码请勿修改==================================

var TrueWidth = ThisPic.width; //图片实际宽度
var TrueHeight = ThisPic.height; //图片实际高度
var Multiple = TrueWidth / RePicWidth; //图片缩小(放大)的倍数

ThisPic.width = RePicWidth; //图片显示的可视宽度
ThisPic.height = TrueHeight / Multiple; //图片显示的可视高度
}
</script>
</head>
<body>
<div id="div" style="width:200px;height:200px;border:1px solid #ccc;padding:20px" contenteditable="true"></div>
<script>
var div = document.getElementById('div');
div.addEventListener('paste', function(e) {
if(e.clipboardData) {
for(var i = 0; i < e.clipboardData.items.length; i++) {
var c = e.clipboardData.items[i];
var f = c.getAsFile();

var reader = new FileReader();
reader.onload = function(e) {
div.innerHTML += '<img src="' + e.target.result + '" onload="ReSizePic(this);">';
// alert(e.target.result);
}
reader.readAsDataURL(f);
}
}
});
</script>
</body>
</html>

0 0