鱼C论坛

 找回密码
 立即注册
查看: 2954|回复: 5

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

[复制链接]
发表于 2019-1-20 13:42:40 | 显示全部楼层 |阅读模式

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

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

x
canvas似乎只能指定位置,不能指定图片,如果绘制了多张图片怎么办
最佳答案
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>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-1-20 13:50:31 | 显示全部楼层
最好上传下代码,没太明白鱼油的意思
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2019-1-20 14:52:20 | 显示全部楼层
不二如是 发表于 2019-1-20 13:50
最好上传下代码,没太明白鱼油的意思

如果用ctx.drawImage()绘制了多张图片,而用ctx.getImageData()获取像素数据不能指定是哪一张图片,我想获取指定的某一张图片的像素数据
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-1-20 17:12:49 | 显示全部楼层
幽梦三影 发表于 2019-1-20 14:52
如果用ctx.drawImage()绘制了多张图片,而用ctx.getImageData()获取像素数据不能指定是哪一张图片,我想 ...

绘制的图像,每一张可以创建一个变量接受吖
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 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>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

在使用的时候记得修改图片地址
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-23 05:05

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表