多个canvas绘制图片后对其进行操作，得到的结果都是最后一个canvas的内容

年秒 2017-12-18 05:17:55
动态生成了多个canvas，每个canvas上绘制的是不同的图片，然后对每个canvas进行相同的操作，得到的结果应该是不同的，但是我算完之后他的每个canvas的结果都是最后一个canvas得到的结果。
怎么做可以得到每一个canvas的结果。


var arrboxG=[];

for (n = 0; n<imgSrc.length; n++){

        var image = new Image();

        imgs[n]=image;

        image.src = imgSrc[n];

        image.onload = function () { //为异步函数,所以将创建canvas放在onload中.

            var oDiv=document.createElement('div'),

                    oCan = document.createElement('canvas'),

                    oP=document.createElement("p");

            oDiv.appendChild(oCan);

            oDiv.appendChild(oP);

            $("#div").append(oDiv);

            var context=oCan.getContext("2d");

            //添加图片

            var imgHeight = this.height;

            var imgWidth = this.width;

            imgWidth=oCan.width;

            imgHeight=oCan.height;

            context.drawImage(this,0,0,imgWidth,imgHeight);

            var imageData =context.getImageData(0, 0,imgWidth,imgHeight);

            var length = imageData.data.length;

            //要对canvas进行的操作

            for (var i = 0; i < length; i++) {

                if (i % 4 === 0) {

                    if (imageData.data[i + 3] == 255) { 

                        var hsl = rgbToHsl(imageData.data[i], imageData.data[i + 1], imageData.data[i + 2]);

                        if (hsl[0] >= 57 && hsl[0] <= 152 && hsl[1] >= 13 && hsl[1] <= 100 && hsl[2] >= 0 && hsl [2] <= 90) {

                            arrboxG.push(hsl);

                        }

                       

                    }

                }

            }

        }

  }）
...全文
756 14 打赏 收藏 转发到动态 举报
写回复
用AI写文章
14 条回复
切换为时间正序
请发表友善的回复…
发表回复
老板111 2020-01-07
  • 打赏
  • 举报
 回复
刚看了楼主和‘天际的海浪’讨论，异步函数不和for循环同时使用。
weixin_41451294 2017-12-19
  • 打赏
  • 举报
 回复 
 var arrboxG=[];
    (function loop(n) {
        if (n>=imgSrc.length) return;
        var image = new Image();
        image.src = imgSrc[n];
        image.onload = function () { //为异步函数,所以将创建canvas放在onload中.
            var oDiv=document.createElement('div'),
                    oCan = document.createElement('canvas'),
                    oP=document.createElement("p");
            oDiv.appendChild(oCan);
            oDiv.appendChild(oP);
            $("#div").append(oDiv);
            var context=oCan.getContext("2d");
            //添加图片
            var imgHeight = this.height;
            var imgWidth = this.width;
            imgWidth=oCan.width;
            imgHeight=oCan.height;
            context.drawImage(this,0,0,imgWidth,imgHeight);
            var imageData =context.getImageData(0, 0,imgWidth,imgHeight);
            var length = imageData.data.length;
            //要对canvas进行的操作
            for (var i = 0; i < length; i++) {
                if (i % 4 === 0) {
                    if (imageData.data[i + 3] == 255) {
                        var hsl = rgbToHsl(imageData.data[i], imageData.data[i + 1], imageData.data[i + 2]);

                        if (hsl[0] >= 57 && hsl[0] <= 152 && hsl[1] >= 13 && hsl[1] <= 100 && hsl[2] >= 0 && hsl [2] <= 90) {
                            arrboxG.push(hsl);
                        }

                    }
                }
            }


            loop(n+1);
            console.log('SSSSSS:   ', arrboxG)   //在这里打印出来的是没问题的，你在什么地方获取的数据呢
        }
  })(0);
天际的海浪 2017-12-19
  • 打赏
  • 举报
 回复
引用 12 楼 qq_38879567 的回复:
[quote=引用 11 楼 jslang 的回复:] 你arrboxG定义的是一维数组，里面的是所有图片的数据，这些所有图片数据是合在一起放在一维数组里的。 在所有图片处理完之后 arrboxG.length是所有图片的数据加在一起的长度。 你是不是应该用二维数组，把每个图片的数据分开放啊。 另外，console.log()输出数组或对象时，数组或对象的属性是折叠起来的，当你展开折叠时显示的是你展开时的属性，不是输出时的属性。 要显示输出时的属性可以用 console.log(JSON.stringify(arr));
跪谢大佬！最后出来了不一样的结果了。 只是还有一个小问题，我有许多个一样的class名相同的p标签，我想把这些不同的结果房子p里面。 但是$(".className").html 出来得却是最后一个的记过，console.log却能够出来正确的结果请问是为什么？[/quote] $(".className").html()是同时对所有class包含className的元素一起设置html内容 要每次只对其中一个元素应该是 $(".className").eq(n).html() n是第几个元素的索引号
年秒 2017-12-19
  • 打赏
  • 举报
 回复
引用 11 楼 jslang 的回复:
你arrboxG定义的是一维数组，里面的是所有图片的数据，这些所有图片数据是合在一起放在一维数组里的。 在所有图片处理完之后 arrboxG.length是所有图片的数据加在一起的长度。 你是不是应该用二维数组，把每个图片的数据分开放啊。 另外，console.log()输出数组或对象时，数组或对象的属性是折叠起来的，当你展开折叠时显示的是你展开时的属性，不是输出时的属性。 要显示输出时的属性可以用 console.log(JSON.stringify(arr));
跪谢大佬！最后出来了不一样的结果了。 只是还有一个小问题，我有许多个一样的class名相同的p标签，我想把这些不同的结果房子p里面。 但是$(".className").html 出来得却是最后一个的记过，console.log却能够出来正确的结果请问是为什么？
天际的海浪 2017-12-19
  • 打赏
  • 举报
 回复
你arrboxG定义的是一维数组，里面的是所有图片的数据，这些所有图片数据是合在一起放在一维数组里的。 在所有图片处理完之后 arrboxG.length是所有图片的数据加在一起的长度。 你是不是应该用二维数组，把每个图片的数据分开放啊。 另外，console.log()输出数组或对象时，数组或对象的属性是折叠起来的，当你展开折叠时显示的是你展开时的属性，不是输出时的属性。 要显示输出时的属性可以用 console.log(JSON.stringify(arr));
年秒 2017-12-19
  • 打赏
  • 举报
 回复
引用 7 楼 jslang 的回复:
看代码都没有问题，你是不是读取arrboxG中数据的方式不对
那应该怎么读取，我就只是用了arrboxG的length而已。 

var lenG = arrboxG.length,
                    lenB=arrboxB.length;
这个用在了里面的for循环外面呀
年秒 2017-12-19
  • 打赏
  • 举报
 回复
引用 8 楼 weixin_41451294 的回复:
 var arrboxG=[];
    (function loop(n) {
        if (n>=imgSrc.length) return;
        var image = new Image();
        image.src = imgSrc[n];
        image.onload = function () { //为异步函数,所以将创建canvas放在onload中.
            var oDiv=document.createElement('div'),
                    oCan = document.createElement('canvas'),
                    oP=document.createElement("p");
            oDiv.appendChild(oCan);
            oDiv.appendChild(oP);
            $("#div").append(oDiv);
            var context=oCan.getContext("2d");
            //添加图片
            var imgHeight = this.height;
            var imgWidth = this.width;
            imgWidth=oCan.width;
            imgHeight=oCan.height;
            context.drawImage(this,0,0,imgWidth,imgHeight);
            var imageData =context.getImageData(0, 0,imgWidth,imgHeight);
            var length = imageData.data.length;
            //要对canvas进行的操作
            for (var i = 0; i < length; i++) {
                if (i % 4 === 0) {
                    if (imageData.data[i + 3] == 255) {
                        var hsl = rgbToHsl(imageData.data[i], imageData.data[i + 1], imageData.data[i + 2]);

                        if (hsl[0] >= 57 && hsl[0] <= 152 && hsl[1] >= 13 && hsl[1] <= 100 && hsl[2] >= 0 && hsl [2] <= 90) {
                            arrboxG.push(hsl);
                        }

                    }
                }
            }


            loop(n+1);
            console.log('SSSSSS:   ', arrboxG)   //在这里打印出来的是没问题的，你在什么地方获取的数据呢
        }
  })(0);
就是在那里，可以打印出来结果，只是打印出来的都是一样
天际的海浪 2017-12-18
  • 打赏
  • 举报
 回复
看代码都没有问题，你是不是读取arrboxG中数据的方式不对
年秒 2017-12-18
  • 打赏
  • 举报
 回复
引用 5 楼 jslang 的回复:
rgbToHsl函数的代码发一下

function rgbToHsl(r, g, b) {

                r /= 255, g /= 255, b /= 255;
                var max = Math.max(r, g, b), min = Math.min(r, g, b);
                var h, s, l = (max + min) / 2;

                if (max == min) {
                    h = s = 0; // achromatic
                } else {
                    var d = max - min;
                    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
                    h = (r == max ? (g - b) / d : g == max ? 2 + (b - r) / d : 4 + (r - g) / d) * 0.6;
                }
                return [Math.floor(h * 100), Math.round(s * 100), Math.round(l * 100)];
            }
天际的海浪 2017-12-18
  • 打赏
  • 举报
 回复
rgbToHsl函数的代码发一下
年秒 2017-12-18
  • 打赏
  • 举报
 回复
引用 3 楼 jslang 的回复:
是哪里一样，是canvas中的图片一样，还是arrboxG中的数据一样 如果是arrboxG中的数据一样，请检查rgbToHsl函数每次返回的是否都是同一个对象（数组）的引用地址
是arrboxG的数据一样，引用地址确实是同一个，对canvas操作前还不是，一操作就变成一样的了。 这种的怎么办，我不会改，但是我又很急...TAT...
天际的海浪 2017-12-18
  • 打赏
  • 举报
 回复
是哪里一样，是canvas中的图片一样，还是arrboxG中的数据一样 如果是arrboxG中的数据一样，请检查rgbToHsl函数每次返回的是否都是同一个对象（数组）的引用地址
年秒 2017-12-18
  • 打赏
  • 举报
 回复
引用 1 楼 jslang 的回复:
有异步函数就别用for循环。要用递归 

	var arrboxG=[];
	(function loop(n) {
		if (n>=imgSrc.length) return;
        var image = new Image();
        image.src = imgSrc[n];
        image.onload = function () { //为异步函数,所以将创建canvas放在onload中.
            var oDiv=document.createElement('div'),
                    oCan = document.createElement('canvas'),
                    oP=document.createElement("p");
            oDiv.appendChild(oCan);
            oDiv.appendChild(oP);
            $("#div").append(oDiv);
            var context=oCan.getContext("2d");
            //添加图片
            var imgHeight = this.height;
            var imgWidth = this.width;
            imgWidth=oCan.width;
            imgHeight=oCan.height;
            context.drawImage(this,0,0,imgWidth,imgHeight);
            var imageData =context.getImageData(0, 0,imgWidth,imgHeight);
            var length = imageData.data.length;
            //要对canvas进行的操作
            for (var i = 0; i < length; i++) {
                if (i % 4 === 0) {
                    if (imageData.data[i + 3] == 255) { 
                        var hsl = rgbToHsl(imageData.data[i], imageData.data[i + 1], imageData.data[i + 2]);
                        if (hsl[0] >= 57 && hsl[0] <= 152 && hsl[1] >= 13 && hsl[1] <= 100 && hsl[2] >= 0 && hsl [2] <= 90) {
                            arrboxG.push(hsl);
                        }
                       
                    }
                }
            }
            loop(n+1);
        }
  })(0);
我为啥还是一样的，得到的结果还最后一个的
天际的海浪 2017-12-18
  • 打赏
  • 举报
 回复
有异步函数就别用for循环。要用递归 

	var arrboxG=[];
	(function loop(n) {
		if (n>=imgSrc.length) return;
        var image = new Image();
        image.src = imgSrc[n];
        image.onload = function () { //为异步函数,所以将创建canvas放在onload中.
            var oDiv=document.createElement('div'),
                    oCan = document.createElement('canvas'),
                    oP=document.createElement("p");
            oDiv.appendChild(oCan);
            oDiv.appendChild(oP);
            $("#div").append(oDiv);
            var context=oCan.getContext("2d");
            //添加图片
            var imgHeight = this.height;
            var imgWidth = this.width;
            imgWidth=oCan.width;
            imgHeight=oCan.height;
            context.drawImage(this,0,0,imgWidth,imgHeight);
            var imageData =context.getImageData(0, 0,imgWidth,imgHeight);
            var length = imageData.data.length;
            //要对canvas进行的操作
            for (var i = 0; i < length; i++) {
                if (i % 4 === 0) {
                    if (imageData.data[i + 3] == 255) { 
                        var hsl = rgbToHsl(imageData.data[i], imageData.data[i + 1], imageData.data[i + 2]);
                        if (hsl[0] >= 57 && hsl[0] <= 152 && hsl[1] >= 13 && hsl[1] <= 100 && hsl[2] >= 0 && hsl [2] <= 90) {
                            arrboxG.push(hsl);
                        }
                       
                    }
                }
            }
            loop(n+1);
        }
  })(0);
canvas - 绘制图片，图片变模糊问题解决）
问题：canvas绘制图片，图片变模糊 设定一个一定尺寸的canvas，我这里设置的画布大小是400px*400px。当一张图片完全画到画布上的时候，大概率都会出现图片模糊的情况。 我拿下面一张图片画到canvas上作为例子，看上去应该比较明显的有模糊的感觉。 单方面的去修改图片精度，换成更高清的图片，事实证明确实有一丢丢用，但是效果不是很明显。况且我当时那个图片由于是手绘的，大小有5M，也不会切片加载图片，直接整个加载非常耗时。 那么如何去处理这样的问题呢？ 生活中应该大家都遇到过这样的情况，
10Canvas——图片绘制
文章目录 使用 drawImage() 方法在画布上绘制图像、画布或视频。drawImage() 方法也能够绘制图像的某些部分，或增加或减少图像的尺寸。 canvas 绘制图片的基本格式为： /创建一个图片对象 var image = new Image(); //设置图片的路径 image.src = 'xxx'; //当图片加载完成后 image.onload = function () { //绘制图片 ctx.drawImage(); }; 语法 1，在画布上定位图像： ctx.drawI
在同一个canvas中绘制多个图形
实验背景： 在做一个 HTML 5 的一个游戏项目的时候，想在同一个 canvas 元素中绘制多个具有不同颜色的图画，但是由于当时对 HTML 5 canvas 元素不是很熟悉，结果总是所有图画都具有一样的颜色。去网上查找，也没有找到这个问题的答案，于是只能自己研究了。   实验说明： 该项目本是移动平台的跨平台项目，可以跑在WP7，WP8，Andriod，iOS，黑莓等平台，但由于
Canvas - 绘制图片模糊问题（canvas 生成图片模糊）
Canvas绘制模糊 零、问题背景与解决思路 一、涉及到的Api 1.关于window.devicePixelRatio canvas出现模糊的原因 第一块屏幕测试 window.devicePixelRatio 的值(微软系统) 第二块屏幕测试 window.devicePixelRatio 的值(mac系统) 2.关于Window.matchMedia() 二、解决方法(canvas绘制图片模糊) 1.图片代码如下（记得查看注释） 2.canvas效果图（图片处理前）： 3.canvas效果图，与原来的
H5画布 canvas（二）绘制文字、图片、坐标系，canvas颜色和样式，canvas绘制环境
本文进一步介绍了canvas画布的使用，包括绘制文字、绘制图片、绘制坐标系，canvas的相关颜色以及样式，canvas绘制环境的相关操作。
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章