html5 上传图片预览选择

最新推荐文章于 2021-06-05 14:33:04 发布

xianpeng2020

最新推荐文章于 2021-06-05 14:33:04 发布

阅读量893

点赞数

本文链接：https://blog.csdn.net/qq550764107/article/details/9402451

版权

<html>

<head>
<title>Image preview on realtime</title>
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>

</head>
<body οnlοad="doSelect()">
<h1 id="h_1">This is a Test</h1>
<img src="" id="img0" >
<input type="file" name="file0" id="file0" multiple="multiple" />
<canvas id="drawing" width="768" height="400">
Sorry, your web browser does not support canvas content.
</canvas>

</body>

<script type="text/javascript">
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}

$("#file0").change(function(){

var objUrl = getObjectURL(this.files[0]) ;
console.log("objUrl = "+objUrl) ;
if (objUrl) {
$("#img0").attr("src", objUrl) ;
//document.getElementById("img0").width=400;
//document.getElementById("img0").width=400;
}
}) ;

function doSelect() {
var w = document.getElementById("img0").offsetWidth;
var h = document.getElementById("img0").offsetHeight;

//img= $('#img0').imgAreaSelect({ aspectRatio: '1:1', handles: true });
img= $('#img0').imgAreaSelect({ x1: 0, y1: 0, x2: w, y2: w });

};

</script>

xianpeng2020

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5 上传图片预览选择

Image preview on realtime This is a TestSorry, your web browser does not support canvas content. function getObjectURL(file) {var url = null ; if (w
复制链接

扫一扫