我试图找到图像某些部分的平均颜色,然后将其设置为背景。 我正在使用此颜色来查找所选区域的平均代码。
JSFiddle代码查找平均图像颜色。
我想从图像中提取该部分并找到平均颜色,然后将其设置为背景图像
这是我正在使用的代码
var rgb = getAverageRGB(document.getElementById('i')); document.body.style.backgroundColor = 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')'; function getAverageRGB(img) { var canvas = document.createElement('canvas'), context = canvas.getContext && canvas.getContext('2d'), rgb = {r:102,g:102,b:102}, // Set a base colour as a fallback for non-compliant browsers pixelInterval = 5, // Rather than inspect every single pixel in the image inspect every 5th pixel count = 0, i = -4, data, length; // return the base colour for non-compliant browsers if (!context) { return rgb; } context.drawImage(img, 146, 214); try { data = context.getImageData(146, 214, 70, 20); } catch(e) { // catch errors - usually due to cross domain security issues alert(e); return rgb; } data = data.data; length = data.length; while ((i += pixelInterval * 4) < length) { count++; rgb.r += data[i]; rgb.g += data[i+1]; rgb.b += data[i+2]; } // floor the average values to give correct rgb values (ie: round number values) rgb.r = Math.floor(rgb.r/count); rgb.g = Math.floor(rgb.g/count); rgb.b = Math.floor(rgb.b/count); return rgb; }
我已经使用了MeasureIT Firefox AddOn来获取cordinates,我找到了
x:146 y:214 width:70 height:20
我在这里用过。
context.drawImage(img, 146, 214); ... data = context.getImageData(146, 214, 70, 20);
因此该区域的平均颜色应该是绿色,但我得到了天空的颜色。
我在jsfiddle上写了一个例子: http : //jsfiddle.net/p8pzozxx/39/
这是代码:html:
My amazing title
css:
img, h1 { margin : 0; padding : 0; } img { width : 500px; position : absolute; top : 0; left : 0; z-index : 1; } h1 { font-family : 'Open Sans', Arial; font-size : 2em; position : absolute; top : 20px; left : 0; color : white; z-index : 2; padding : 3px 5px 3px 25px; /* attention this causes a margin of error !! */ }
和javascript:
var average_color_background = function(image, title) { var treat_properties = function(elmt_propertie) { return parseInt(elmt_propertie.replace(/px/, '')); } var image_width = treat_properties(getComputedStyle(image, null).width), image_height = treat_properties(getComputedStyle(image, null).height), title_width = treat_properties(getComputedStyle(title, null).width), title_height = treat_properties(getComputedStyle(title, null).height), title_top = treat_properties(getComputedStyle(title, null).top), title_left = treat_properties(getComputedStyle(title, null).left); var c = document.createElement('canvas'); c.width = image_width; c.height = image_height; c.style.position = "absolute"; c.style.top = 0; c.style.left = 0; c.style.zIndex = 0; // invisible calculation document.getElementsByTagName('body')[0].appendChild(c); var ctx = c.getContext("2d"); var image_bis = new Image(); image_bis.crossOrigin = 'anonymous'; // avoid security error image_bis.onload = function(){ ctx.drawImage(image_bis,0,0,image_width,image_height); var imageData = ctx.getImageData(title_left, title_top, title_width, title_height), mapPixel = imageData.data; var red = 0, green = 0, blue = 0, length = 4 * title_width * title_height; for(var i=0;i
它使用canvas,所以不要忘记为不支持它的浏览器添加默认颜色(例如使用modernizr )
以上就是jQuery教程分享给出错误图像的所选区域的图像的平均颜色相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/jquerytutorial/524316.html