<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript">
var canvas=document.getElementById("demo");
var cxt=canvas.getContext("2d");
//打开图片
function preImg(sourceId, targetId) {
cxt.clearRect(0,0,400,400);
if (typeof FileReader === 'undefined') {
alert('Your browser does not support FileReader...');
return;
}
var reader = new FileReader();
reader.onload = function(e) {
var img = document.getElementById(targetId);
var cxt=document.getElementById("demo").getContext("2d")
img.src = this.result;
img.onload=function()
{
cxt.drawImage(img,0,0);
}
}
reader.readAsDataURL(document.getElementById(sourceId).files[0]);
}
</script>
</head>
<body>
<form action="">
<input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');" />
<img id="imgPre" src="" style="display: block;" />
</form>
<canvas id="demo" width="400" height="400" style="border:1px solid red"></canvas>
</body>
</html>
想要在html5 canvas画布中打开一张本地图片,代码有什么问题
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
1条回答
- Go 旅城通票 2016-04-11 03:05关注
调整循序,script放canvas后面,要不获取不到对象
<form action=""> <input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');" /> <img id="imgPre" src="" style="display: block;" /> </form> <canvas id="demo" width="400" height="400" style="border:1px solid red"></canvas> <script type="text/javascript"> var canvas = document.getElementById("demo"); var cxt = canvas.getContext("2d"); //打开图片 function preImg(sourceId, targetId) { cxt.clearRect(0, 0, 400, 400); if (typeof FileReader === 'undefined') { alert('Your browser does not support FileReader...'); return; } var reader = new FileReader(); reader.onload = function (e) { var img = document.getElementById(targetId); var cxt = document.getElementById("demo").getContext("2d") img.src = this.result; img.onload = function () { cxt.drawImage(img, 0, 0); } } reader.readAsDataURL(document.getElementById(sourceId).files[0]); } </script>
解决 无用评论 打赏 举报
悬赏问题
- ¥15 运筹学排序问题中的在线排序
- ¥15 关于docker部署flink集成hadoop的yarn,请教个问题 flink启动yarn-session.sh连不上hadoop,这个整了好几天一直不行,求帮忙看一下怎么解决
- ¥30 求一段fortran代码用IVF编译运行的结果
- ¥15 深度学习根据CNN网络模型,搭建BP模型并训练MNIST数据集
- ¥15 C++ 头文件/宏冲突问题解决
- ¥15 用comsol模拟大气湍流通过底部加热(温度不同)的腔体
- ¥50 安卓adb backup备份子用户应用数据失败
- ¥20 有人能用聚类分析帮我分析一下文本内容嘛
- ¥30 python代码,帮调试,帮帮忙吧
- ¥15 #MATLAB仿真#车辆换道路径规划