JavaScript canvas 图像数据操作
JavaScript canvas image data manipulation
我想使用非常简单的算法调整图像大小。我有这样的东西:
var offtx = document.createElement('canvas').getContext('2d');
offtx.drawImage(imageSource, offsetX, offsetY, width, height, 0, 0, width, height);
this.imageData = offtx.getImageData(0, 0, width, height).data;
offtx.clearRect(0, 0, width, height);
for(var x = 0; x < this.width; ++x)
{
for(var y = 0; y < this.height; ++y)
{
var i = (y * this.width + x) * 4;
var r = this.imageData[i ];
var g = this.imageData[i+1];
var b = this.imageData[i+2];
var a = this.imageData[i+3];
offtx.fillStyle = "rgba("+r+","+g+","+b+","+(a/255)+")";
offtx.fillRect(0.5 + (x * this.zoomLevel) | 0, 0.5 + (y*this.zoomLevel) | 0, this.zoomLevel, this.zoomLevel);
}
}
this.imageData = offtx.getImageData(0, 0, this.width * this.zoomLevel, this.height * this.zoomLevel);
但是,我使用此解决方案遇到的问题是图像会以这种方式丢失任何透明度信息。我不知道这是否发生在这个算法中,或者我稍后用来显示该图像的 putImageData 正在这样做,但我似乎无法保持透明度。
每次执行此操作时,我都会创建一个画布,我将图像放在该画布上,并使用 getImageData 从该画布获取图像,如代码的第一行所示。也许没有其他办法,所以我可能不介意...
但问题是我使用两个 for 循环来绘制调整大小的图像,然后使用 getImageData 来存储该图像信息。这是一种奇怪的方法。我宁愿创建空的图像数据,并用仅调整大小的所有原始图像信息填充它。我无法用我的头脑理解这一点,我无法想象这个循环结构。为了说明我的意思:
for(var x = 0; x < this.width; ++x)
{
for(var y = 0; y < this.height; ++y)
{
var i = (y * this.width + x) * 4;
var r = this.imageData[i ];
var g = this.imageData[i+1];
var b = this.imageData[i+2];
var a = this.imageData[i+3];
//I WOULD LIKE MAGIC TO HAPPEN HERE THAT WILL
//RESIZE THAT CURRENT PIXEL AND MOVE IT TO THE NEW IMAGE DATA RESIZED
//SO EVERYTHING IS DONE NICE AND CLEAN IN THIS LOOP WITHOUT THE
//GETIMAGEDATA LATER AND MAYBE SET TRANSPARENT PIXELS WHILE I'M AT IT
}
}
我无法弄清楚魔术部分。
感谢您的阅读!
为什么不直接使用内置drawImage
并禁用图像平滑?在循环中执行此操作不仅相对较慢,而且容易出错(正如您已经发现的那样)。
按以下方式执行此操作将为您提供"像素艺术"外观,并且还将保留 alpha 通道:
var factor = 4; /// will resize 4x
offtx.imageSmoothingEnabled = false; /// prefixed in some browsers
offtx.drawImage(imageSource, offsetX, offsetY, width, height,
0, 0, width * factor, height * factor);
这是一个在线演示。
尝试使用我最近制作的这个库,它可以加载图像,调整其固定宽度和高度或前缀的大小。
它完全符合您的需求,更像是将画布转换为 base64、blob 等......
var CanvaWork = new CanvaWork();
CanvaWork.canvasResizeAll(obj.canvas, function(canvases){
// "canvases" will be an array containing 3 canvases with different sizes depending on initial options
});
https://github.com/vnbenny/canvawork.js
希望对您有所帮助!
相关文章:
- 操作数据的最佳实践
- 使用Angular JS for WordPress JSON API使用JSON操作数据
- Javascript D3如何从CSV访问和操作数据集
- 什么's在Observables(angular2)中操作数据的模式
- 在酒窝中显示之前操作数据
- 操作数据表字段的结果
- 如何从标签<a>'s操作数据
- 如何在收到AJAX响应后操作数据
- 在d3/Canvas JS中操作数据的最佳方式
- 从存储操作数据
- 我怎样才能改进这个JavaScript DOM操作数据结构/算法
- 从AJAX调用操作数据:PHP或Javascript
- 从谷歌电子表格创建表格:如何操作数据
- 在angularjs/javascript中操作数据
- 我如何操作数据来自多个异步ajax异步调用与回调
- 在javascript上操作数据
- Jquery,在ajax成功函数中操作数据
- 使用google脚本操作数据条件格式和数据验证
- 在回调函数中操作数据
- 使用JSON解析/stringify操作数据