[已解决]js获取指定图片的数据

幽梦三影 · 发表于 2019-1-20 13:42:40

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

canvas似乎只能指定位置，不能指定图片，如果绘制了多张图片怎么办

最佳答案

月排行榜 / 总排行榜

375361172

2019-3-14 12:07:59

首先图片不能是有跨域的需要一个服务器才能正常运行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>

跳转到最佳答案楼层

不二如是 · 发表于 2019-1-20 13:50:31

最好上传下代码，没太明白鱼油的意思

幽梦三影 · 发表于 2019-1-20 14:52:20

不二如是发表于 2019-1-20 13:50
最好上传下代码，没太明白鱼油的意思

如果用ctx.drawImage()绘制了多张图片，而用ctx.getImageData()获取像素数据不能指定是哪一张图片，我想获取指定的某一张图片的像素数据

不二如是 · 发表于 2019-1-20 17:12:49

幽梦三影发表于 2019-1-20 14:52
如果用ctx.drawImage()绘制了多张图片，而用ctx.getImageData()获取像素数据不能指定是哪一张图片，我想 ...

绘制的图像，每一张可以创建一个变量接受吖

375361172 · 发表于 2019-3-14 12:07:59

这个最佳答案由 375361172 给出，感谢 375361172 的回答。

单击隐藏图章

首先图片不能是有跨域的需要一个服务器才能正常运行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:09:00

375361172 发表于 2019-3-14 12:07
首先图片不能是有跨域的需要一个服务器才能正常运行getImageData() 有这两点上代码

在使用的时候记得修改图片地址

账号		自动登录	找回密码
密码			立即注册