js获取指定图片的数据
canvas似乎只能指定位置，不能指定图片，如果绘制了多张图片怎么办 最好上传下代码，没太明白鱼油的意思 不二如是 发表于 2019-1-20 13:50最好上传下代码，没太明白鱼油的意思
如果用ctx.drawImage()绘制了多张图片，而用ctx.getImageData()获取像素数据不能指定是哪一张图片，我想获取指定的某一张图片的像素数据 幽梦三影 发表于 2019-1-20 14:52
如果用ctx.drawImage()绘制了多张图片，而用ctx.getImageData()获取像素数据不能指定是哪一张图片，我想 ...
绘制的图像，每一张可以创建一个变量接受吖 首先图片不能是有跨域的 需要一个服务器才能正常运行getImageData() 有这两点 上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="c"></canvas>
<script>
//方法 url可以是img节点 也可以是url地址 跨域地址请不要用 会报错
function getImgData(url){
var c = document.createElement("canvas");
var c2d = c.getContext("2d");
var img = null;
//判断是字符串还是img对象
if(typeof url == "string"){
img = new Image();
img.src = url;
}else{
img = url;
}
//获取img对象图片信息
function getDate(img){
c.width =img.width;
c.height = img.height;
c2d.drawImage(img,0,0,c.width,c.height);
return c2d.getImageData(0,0,c.width,c.height);
}
//通过promise异步处理图片数据 如果图片没有加载完成就等待加载完成了进行获取图片数据
function s(success,fail){
if(img.complete){
success(getDate(img));
}else{
img.onload=function(){
success(getDate(img));
};
img.onerror=function(){
fail("错误啦");
};
//设置加载超时
setTimeout(function () {
fail("错误啦")
},15000);
}
}
return new Promise(s);
}
getImgData("img.png").then(function(data){
var canvas = document.getElementById("c");
canvas.width= data.width;
canvas.height = data.height;
var c2d = canvas.getContext("2d");
c2d.putImageData(data,0,0);
});
</script>
</body>
</html> 375361172 发表于 2019-3-14 12:07
首先图片不能是有跨域的 需要一个服务器才能正常运行getImageData() 有这两点 上代码
在使用的时候记得修改图片地址
页:
[1]