39,087
社区成员
发帖
与我相关
我的任务
分享将img标签中的图片绘制到canvas中，达不到预期效果
本来我想使用方法是“先创建一个Image对象，用url来Image对象的src，然后将这个Image对象绘制到canvas中”，但是这样的话，(获取是url中的图片不带后缀名)canvas中根本就不显示图片。后来我只好“添加一个img标签，设置z-index将其放在canvas下面，然后通过DOM得到img对象，将这个Image对象绘制到canvas中”，但是，这样也得不到预想的效果,这能得到img中显示的图片的一部分，如果设置canvas的宽和高，canvas中显示的只是这一部分图片的拉伸。
如何能将img中的图片原样画到canvas中(注:img被canvas遮住，canvas显示效果和当前img中显示的效果完全一样)，求解？或者能直通过url（比如: http://api.map.baidu.com/staticimage?center=106.530635,29.544606&width=1024&height=800&zoom=10）将图片显示在canvas中？
以下是existsBug.html(firefox26.0/ie10/chrome[版本 28.0.1500.72]均可显示canvas)的代码：
chrome[版本 28.0.1500.72]运行截图
firefox26.0查看img显示的图片信息
如何能将img中的图片原样画到canvas中(注:img被canvas遮住，canvas显示效果和当前img中显示的效果完全一样)，求解？或者能直通过url（比如: http://api.map.baidu.com/staticimage?center=106.530635,29.544606&width=1024&height=800&zoom=10）将图片显示在canvas中？
以下是existsBug.html(firefox26.0/ie10/chrome[版本 28.0.1500.72]均可显示canvas)的代码：
<!DOCTYPE html>
<html>
<head>
<title>地图编辑页面</title>
<style type="text/css">
#info{width:500px;}
</style>
</head>
<body>
<div style="height:20px;background:#cccccc;border:solid 1px #00ffff">
这里保留待用
</div>
<img id="my_img" src="" alt="图片加载中..." style="z-index:-1;position:absolute;top:32px;border:solid 1px #ff0000" />
<!--故意设置canvas的背景颜色，用于调试-->
<canvas id="canvas" style="z-index:1;position:absolute;top:32px;border:solid 1px #ff99cc">
当前浏览器不支持Html5的canvas
</canvas>
<script type="text/javascript">
/**函数:设置img*参数(图片路径,回调函数)*/
function setImg(imgUrl,callback) {
var my_img=document.getElementById('my_img');
my_img.src=imgUrl;
if(my_img.complete) {
callback.call(my_img);
return my_img; //可以直接return;
}
my_img.onload = function () {
callback.call(my_img);
};
}
/**函数:初始化canvas和img*/
function init() {
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var arrRec=new Array();
arrRec=getWH();
/*以下两行，为了调试，所以注释起来*/
//canvas.style.width=(parseInt(arrRec[0])+2).toString()+"px";
//canvas.style.height=(parseInt(arrRec[1])+2).toString()+"px";
setImg(getImgUrl(),function() {
ctx.drawImage(this,0,0,parseInt(arrRec[0]),parseInt(arrRec[1]),0,0,parseInt(arrRec[0]),parseInt(arrRec[1]));
});
canvas.style.left="920px"; //这一句是调试零时增加的
}
/**函数:从url中获取宽和高*/
function getWH() {
var flag=true;
var url=location.search;
/*从url中获取宽和高的正则*/
var strTemp=url.match(/width=[\d]{1,4}[\&]height=[\d]{1,4}(?=[\&])/g);
var strRep;
var arrRet=new Array();
if(strTemp==null) {
flag=false;
}
else{
strRep=strTemp[0].replace('width=','');
strRep=strRep.replace('height=','');
arrRet=strRep.split('&');
}
if(flag!=true) {
arrRet=new Array("1","1");
}
return arrRet;
}
/**函数:得到url*/
function getImgUrl() {
return "http://api.map.baidu.com/staticimage"+location.search;
}
init(); //初始化
</script>
</body>
</html>chrome[版本 28.0.1500.72]运行截图
firefox26.0查看img显示的图片信息
...全文
请发表友善的回复…
发表回复
足境 2014-07-19
- 打赏
- 举报
画图动作要放在图片的onload事件中才可以的
孟子E章 2014-06-21
- 打赏
- 举报
如果我把
context.fillStyle = pat;
context.fillRect(0,0,owidth,oheight);
写在一个函数中，然后：
var patimg = document.getElementById('loadimg');
var pat = context.createPattern(patimg,'no-repeat');
是在函数外。
这样的话在chrome下就会显示不了图片，地址栏按下enter键后就可以显示了。
应该是图片加载的问题，应该如何修改呢？[/quote]
试试把图片先预加载，图片一般会缓存的
fonglezen 2014-06-20
- 打赏
- 举报
如果我把
context.fillStyle = pat;
context.fillRect(0,0,owidth,oheight);
写在一个函数中，然后：
var patimg = document.getElementById('loadimg');
var pat = context.createPattern(patimg,'no-repeat');
是在函数外。
这样的话在chrome下就会显示不了图片，地址栏按下enter键后就可以显示了。
应该是图片加载的问题，应该如何修改呢？
享受编程乐趣 2014-01-02
- 打赏
- 举报
谢谢，问题已解决
孟子E章 2014-01-01
- 打赏
- 举报
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
canvas.width = this.width;
canvas.height = this.height
context.drawImage(this, 0, 0);
};
img.src = "https://img-bbs.csdn.net/upload/201401/01/1388569023_363812.png"
</script>孟子E章 2014-01-01
- 打赏
- 举报
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(this, 0, 0);
};
imageObj.src = "https://img-bbs.csdn.net/upload/201401/01/1388569023_363812.png"
</script>
