Canvas镜像翻转

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

下面是反转过程中涉及到的两个比较重要的方法:

竖向像素反转


/**
@param sourceData 反转前的像素
@param newData 通过目标边框创建的空像素块
**/
function imageDataVRevert(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[(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;
}

横向像素反转


/**
@param sourceData 反转前的像素
@param 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;
}

  • 支付宝二维码 支付宝
  • 微信二维码 微信

本文地址: /mirror.html

版权声明: 本文为原创文章,版权归 逐梦个人博客 所有,欢迎分享本文,转载请保留出处!

相关文章