JavaScript画布图像数据操作
JavaScript画布图像数据操作
提问于 2013-09-15 01:07:42
我想调整大小的图像使用非常简单的算法。我有这样的东西：
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
}
}我想不出有什么神奇的部分。
感谢您的阅读!
Stack Overflow用户
发布于 2016-11-03 19:11:35
尝试使用我最近制作的这个库，它可以加载图像，调整其大小，固定宽度和高度或百分比。
它做的正是你所需要的，更像是将画布转换成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
希望这对你有帮助！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18804228
复制相关文章
相似问题
腾讯云开发者
