前端实现图片快速反转替换_canvas像素点实现镜像翻转

最近开发扫地机项目网站，后台实现清扫记录展示，地图和坐标需要转换才能正确显示。机器中的世界是跟我们现实图中相反的，需要Y轴翻转。网上搜罗下，大部分是小平翻转。最后在找到类似的原理的代码(https://www.deanhan.cn/mirror.html)，记录方便以后有人找。

canvas镜像翻转的原理就是从原图像或者原Canvas的边角获取相应长宽的像素值，然后对获取的像素值进行反转(上下竖向反转，左右横向反转)，再将反转后的像素绘制到对应的镜像边框上。

function drawMap(ab, w, h, lz4_len) {

var imgData = mapCanvasCtx.getImageData(0, 0, w, h);

//填充图片

if (uncompressedSize > 0) {

for (var i = uncompressedSize; i >= 0; i–) {

imgData.data[4 * i] = uncompressed[i];

imgData.data[4 * i + 1] = uncompressed[i];

imgData.data[4 * i + 2] = uncompressed[i];

imgData.data[4 * i + 3] = 0xff;

}

}

//填充路径

mapCanvasCtx.putImageData(imgData, 0, 0);

var newImgData = mapCanvasCtx.getImageData(0, 0, w, h);//再次取得数据

mapCanvasCtx.putImageData(imageDataVRevert(newImgData, imgData), 0, 0);

}

//竖向像素反转

function imageDataVRevert(sourceData, newData) {

for (var i = 0, h = sourceData.height; i < h; i++) {

for (var j = 0, w = sourceData.width; j < w; j++) {

newData.data[i * w * 4 + j * 4 + 0] = sourceData.data[(h – i) * w * 4 + j * 4 + 0];

newData.data[i * w * 4 + j * 4 + 1] = sourceData.data[(h – i) * w * 4 + j * 4 + 1];

newData.data[i * w * 4 + j * 4 + 2] = sourceData.data[(h – i) * w * 4 + j * 4 + 2];

newData.data[i * w * 4 + j * 4 + 3] = sourceData.data[(h – i) * w * 4 + j * 4 + 3];

}

}

return newData;

}

//横向像素反转

function imageDataHRevert(sourceData, newData) {

for (var i = 0, h = sourceData.height; i < h; i++) {

for (j = 0, w = sourceData.width; j < w; j++) {

newData.data[i * w * 4 + j * 4 + 0] = sourceData.data[i * w * 4 + (w – j) * 4 + 0];

newData.data[i * w * 4 + j * 4 + 1] = sourceData.data[i * w * 4 + (w – j) * 4 + 1];

newData.data[i * w * 4 + j * 4 + 2] = sourceData.data[i * w * 4 + (w – j) * 4 + 2];

newData.data[i * w * 4 + j * 4 + 3] = sourceData.data[i * w * 4 + (w – j) * 4 + 3];

}

}

return newData;

}