2 qwfy 0520 qwfy_0520 于 2016.04.09 11:15 提问

想要在html5 canvas画布中打开一张本地图片,代码有什么问题
 <!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>

1个回答

showbo
showbo   Ds   Rxr 2016.04.11 11: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>
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
html5在canvas中插入图片
html5在canvas中插入图片 在canvas中显示图片非常简单。可以通过修正层为图片添加印章、拉伸图片或者修改图片等,并且图片通常会成为canvas上的焦点。用HTML5 Canvas API内置的几个简单命令可以轻松地为canvas添加图片内容。 不过,图片增加了canvas操作的复杂度:必须等到图片完全加载后才能对其进行操作。浏览器通常会在页面脚本执行的同时异步加载图片。
HTML5 cavas画布加载图片
HTML5 cavas画布加载图片 Your browser does not support the canvas element. var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var img=new Image() img.src="/img/flower.p
html在画布中添加图片
最近看了一下画布的功能,画布作为html5的新功能还是蛮强大的,画布中还能增加图片,代码如下: DOCTYPE html> html> body> canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not suppor
HTML5 canvas画布(一)
HTML5中canvas元素用于在网页上绘制图形。Canvas的特点 Canvas画布是一个矩形区域,可以控制其每一个像素 Canvas使用JavaScript来控制画图 Canvas具有直线、矩形、圆以及添加图像的方法 Canvas标签的使用下面的代码是使用canvas画面绘制一个200*200红色矩形:<!Doctype html> <html> <head> <title>我的canvas页面
用html5的canvas生成图片并保存到本地
前端的代码: function drawArrow(angle) { //Init canvas var canvas = $('#cv_Arrow')[0]; var context = canvas.getContext('2d'); var width = canvas.width; var height = canvas.height; context.clearRect(0
HTML5——Canvas画布的使用方法
Canvas画布的使用方法
在canvas中插入图片
移动版开发中都会建议在canvas中插入图片,那么具体如何操作呢? 本文将用到的html结构如下:<canvas id="cvs" width="1024" height="768" style="border:1px solid #ccc;margin:20px auto;display: block;"> 当前浏览器不支持canvas <!-- 如果浏览器支持c
HTML5画布Canvas线段、矩形、弧形及贝塞尔曲线等简单图形绘制
HTML5中最有意思的就是这个canvas了 通过它我们可以画自己想要的图形 它也是十分重要的技术 应用于游戏、图表等等 或者绘制各种酷炫的东西 这里给大家分享一个网站 传送门 里面都是canvas技术绘制的图形画布创建canvas是html的一个标签 是一个图形容器 首先要在html页面添加一个canvas元素<canvas id="myCanvas" width=500 heig
HTML5 canvas画布元素 制作 动态花朵动画
废话不多说 先上代码 var imge = new Image(100 ,100); imge.src = "hh.png"; var a = new Array(); a[0] = "2.png"; var cans = document.getElementById("canvas"); var cc = cans.getContext("2d"); cc.save()
把一幅图像放置到画布上
Your browser does not support the canvas element. var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var img=new Image() img.src="/i/eg_flower.png" cxt.drawImage(img,0,0);