标签: pixel-manipulation
为什么设置HTML5的CanvasPixelArray值非常慢,我怎么能更快地完成它？
我正在尝试使用HTML 5画布'像素操作来做一些动态视觉效果,但我遇到了一个问题,即在CanvasPixelArray中设置像素的速度非常慢.
例如,如果我有以下代码:
imageData = ctx.getImageData(0, 0, 500, 500);
for (var i = 0; i < imageData.length; i += 4){
imageData.data[i] = buffer[i];
imageData.data[i + 1] = buffer[i + 1];
imageData.data[i + 2] = buffer[i + 2];
}
ctx.putImageData(imageData, 0, 0);
使用Chrome进行分析显示,它比不使用CanvasPixelArray的以下代码运行速度慢44%.
tempArray = new Array(500 * 500 * 4);
imageData = ctx.getImageData(0, 0, 500, 500);
for (var i = 0; i < imageData.length; i += 4){
tempArray[i] = buffer[i];
tempArray[i + 1] = buffer[i + 1];
tempArray[i + 2] …推荐指数
解决办法
查看次数
你如何简单地从图像中获取像素数据？
谢谢大家的回复.我应该对我的问题更加具体.我看了一些例子,但是这里是来自W3学校的一个例子(感谢@Pointy指出这不是一个应该依赖的来源 - 没有双关语意图).
http://www.w3schools.com/tags/canvas_getimagedata.asp
<!DOCTYPE html>
<html>
<body>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">
<canvas id="myCanvas" width="220" height="277" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
document.getElementById("scream").onload = function () {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 0, 0);
var imgData = ctx.getImageData(0, 0, c.width, c.height);
// invert colors
for (var i = 0; i < imgData.data.length; i += 4) {
imgData.data[i] = 255 - imgData.data[i]; …推荐指数
解决办法
查看次数
Javascript imageData返回0的数组
我试图操纵imageData但我的imageData数组在加载图像并获取其像素数据后返回全0.
有一些html元素,如滑块和文本框.请忽略这些.
有一个ImageObject数据结构,我存储所有图像属性,如image,pixelData等.
我首先加载图像,获取其像素数据,然后返回一个回调来存储ImageObject.imageData.但是在日志ImageObject.data中返回全0.
ImageObject = {};
var MainCtx;
var MainCanvas;
//get the image pixel properties
function start()
{
//load up the main canvas and ctx
MainCanvas = document.getElementById("canvas");
MainCtx = MainCanvas.getContext('2d');
//first load up the image and then get its pixel data
ImageObject.loadImage(function(imageData){
ImageObject.imageData = imageData;
ImageObject.data = ImageObject.imageData.data;
console.log(ImageObject.data); // -> data return all 0's in the array
for(var i = 0; i < ImageObject.data.length; i += 4) {
var brightness = 0.34 * ImageObject.data[i] + 0.5 * …推荐指数
解决办法
查看次数
绘制饱和度/亮度渐变
我正在尝试在画布上绘制以下渐变图像，但是右下角存在问题。
所需效果：
电流输出：
我可能在这里错过了一些非常简单的事情。
function color(r, g, b) {
var args = Array.prototype.slice.call(arguments);
if (args.length == 1) {
args.push(args[0]);
args.push(args[0]);
} else if (args.length != 3 && args.length != 4) {
return;
}
return "rgb(" + args.join() + ")";
}
function drawPixel(x, y, fill) {
var fill = fill || "black";
context.beginPath();
context.rect(x, y, 1, 1);
context.fillStyle = fill;
context.fill();
context.closePath();
}
var canvas = document.getElementById("primary");
var context = canvas.getContext("2d");
canvas.width = 256;
canvas.height = 256;
for (var x = …javascript canvas color-picker linear-gradients pixel-manipulation
推荐指数
解决办法
查看次数
如何在Qt中为RGB888图像设置QImage像素颜色
我有一个RGB888格式的qImage定义如下:
myQrgb = QImage(img_in, width, height, QImage::Format_RGB888);
我想改变特定的像素值,所以我按照这里的例子,如下:
QRgb value = qRgb(0, 0, 0);
myQrgb.setPixel(i, j, value);
然而,无论i和j的值如何,这总是产生分段错误(例如,i = j = 2).
我猜它是因为我错误地使用QRgb操纵像素QImage::Format_RGB888.我该怎么做呢？
推荐指数
解决办法
查看次数
如何从android位图中找到像素数组中像素的xy坐标
我有一个使用Bitmap.getPixels()方法从位图派生的int数组.此方法使用Bitmap中的像素填充数组.当我循环遍历该数组时,如何获得每个像素的xy坐标？在此先感谢Mat.
[更新]感谢您的数学.我试过以下代码.我有一个位图,我已经将前50000像素更改为白色.我现在想迭代位图并将所有白色像素更改为红色.atm只有一条红线穿过位图顶部的白色像素块.你有什么想法吗？非常感谢.
int length = bgr.getWidth()*bgr.getHeight();
int[] pixels = new int[length];
bgr.getPixels(pixels,0,bgr.getWidth(),0,0,bgr.getWidth(),bgr.getHeight());
for (int i=0;i<50000;i++){
// If the bitmap is in ARGB_8888 format
pixels[i] = Color.WHITE;//0xffffffff;
}
bgr.setPixels(pixels,0,bgr.getWidth(),0,0,bgr.getWidth(),bgr.getHeight());
int t = 0;
int y = t / bgr.getWidth();
int x = t - (y * bgr.getWidth());
for( t = 0; t < length; t++){
int pixel = bgr.getPixel(x,y);
if(pixel == Color.WHITE){
bgr.setPixel(x,y,Color.RED);
x++;y++;
}
}
推荐指数
解决办法
查看次数
添加导致`MethodError: no method matching +(::Array{Int64, 0}, ::Int64)`
我正在使用 Julia，我尝试测试一个函数，该函数创建一个图像并根据给定的字符串分配 Red 值。仅仅听到这句话，我相信你可以想到我可以做的一百万件事情来接收错误消息，但是这个错误：
在第 13 行生成。
这是第 13 行：
r = (i + 64*rand(0:3) - 1)/255
那只是数学！r 是我在那里分配的一个新变量。i 是数组中每个字符的索引。这似乎在控制台中有效，所以之前的代码中可能发生了一些奇怪的事情，只是没有被捕获。这是整个功能：
function generate(string, width)
img = rand(RGB,width,floor(Int,length(string)/width) + 1)
for n in 1:length(string)
i = indexin(string[n], alphabet)
r = (i + 64*rand(0:3) - 1)/255
g = img[n].g
b = img[n].b
img[n] = RBG(r,g,b)
end
return img
end
有谁知道这个错误信息是什么意思，或者我做错了什么？
推荐指数
解决办法
查看次数