设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › js获取指定图片的数据
返回列表 发新帖
查看: 3603|回复: 5

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

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

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

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

x
canvas似乎只能指定位置，不能指定图片，如果绘制了多张图片怎么办
最佳答案
月排行榜 / 总排行榜
375361172
2019-3-14 12:07:59
首先图片不能是有跨域的 需要一个服务器才能正常运行getImageData() 有这两点 上代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <canvas id="c"></canvas>
  9. <script>
  10.     //方法 url可以是img节点 也可以是url地址 跨域地址请不要用 会报错
  11.     function getImgData(url){
  12.         var c = document.createElement("canvas");
  13.         var c2d = c.getContext("2d");
  14.         var img = null;
  15.         //判断是字符串还是img对象
  16.         if(typeof url == "string"){
  17.             img = new Image();
  18.             img.src = url;
  19.         }else{
  20.             img = url;
  21.         }
  22.         //获取img对象图片信息
  23.         function getDate(img){
  24.             c.width =  img.width;
  25.             c.height = img.height;
  26.             c2d.drawImage(img,0,0,c.width,c.height);
  27.             return c2d.getImageData(0,0,c.width,c.height);
  28.         }
  29.         //通过promise异步处理图片数据 如果图片没有加载完成就等待加载完成了进行获取图片数据
  30.         function s(success,fail){
  31.             if(img.complete){
  32.                 success(getDate(img));
  33.             }else{
  34.                 img.onload=function(){
  35.                     success(getDate(img));
  36.                 };
  37.                 img.onerror=function(){
  38.                     fail("错误啦");
  39.                 };
  40.                 //设置加载超时
  41.                 setTimeout(function () {
  42.                     fail("错误啦")
  43.                 },15000);
  44.             }
  45.         }
  46.         return new Promise(s);
  47.     }

  49.     getImgData("img.png").then(function(data){
  50.         var canvas = document.getElementById("c");
  51.         canvas.width  = data.width;
  52.         canvas.height = data.height;
  53.         var c2d = canvas.getContext("2d");
  54.         c2d.putImageData(data,0,0);
  55.     });
  56. </script>
  57. </body>
  58. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

不二如是
发表于 2019-1-20 13:50:31 | 显示全部楼层
最好上传下代码，没太明白鱼油的意思
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

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

如果用ctx.drawImage()绘制了多张图片，而用ctx.getImageData()获取像素数据不能指定是哪一张图片，我想获取指定的某一张图片的像素数据
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

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

绘制的图像，每一张可以创建一个变量接受吖
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

375361172
发表于 2019-3-14 12:07:59 | 显示全部楼层    本楼为最佳答案   
首先图片不能是有跨域的 需要一个服务器才能正常运行getImageData() 有这两点 上代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <canvas id="c"></canvas>
  9. <script>
  10.     //方法 url可以是img节点 也可以是url地址 跨域地址请不要用 会报错
  11.     function getImgData(url){
  12.         var c = document.createElement("canvas");
  13.         var c2d = c.getContext("2d");
  14.         var img = null;
  15.         //判断是字符串还是img对象
  16.         if(typeof url == "string"){
  17.             img = new Image();
  18.             img.src = url;
  19.         }else{
  20.             img = url;
  21.         }
  22.         //获取img对象图片信息
  23.         function getDate(img){
  24.             c.width =  img.width;
  25.             c.height = img.height;
  26.             c2d.drawImage(img,0,0,c.width,c.height);
  27.             return c2d.getImageData(0,0,c.width,c.height);
  28.         }
  29.         //通过promise异步处理图片数据 如果图片没有加载完成就等待加载完成了进行获取图片数据
  30.         function s(success,fail){
  31.             if(img.complete){
  32.                 success(getDate(img));
  33.             }else{
  34.                 img.onload=function(){
  35.                     success(getDate(img));
  36.                 };
  37.                 img.onerror=function(){
  38.                     fail("错误啦");
  39.                 };
  40.                 //设置加载超时
  41.                 setTimeout(function () {
  42.                     fail("错误啦")
  43.                 },15000);
  44.             }
  45.         }
  46.         return new Promise(s);
  47.     }

  49.     getImgData("img.png").then(function(data){
  50.         var canvas = document.getElementById("c");
  51.         canvas.width  = data.width;
  52.         canvas.height = data.height;
  53.         var c2d = canvas.getContext("2d");
  54.         c2d.putImageData(data,0,0);
  55.     });
  56. </script>
  57. </body>
  58. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

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

在使用的时候记得修改图片地址
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2025-6-10 19:19

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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