1. 根据fabricjs模糊算法,后台用java合成同样效果的模糊效果,其中fabricjs模糊算法为:
simpleBlur: function(options) {
var resources = options.filterBackend.resources, canvas1, canvas2,
width = options.imageData.width,
height = options.imageData.height;
if (!resources.blurLayer1) {
resources.blurLayer1 = fabric.util.createCanvasElement();
resources.blurLayer2 = fabric.util.createCanvasElement();
}
canvas1 = resources.blurLayer1;
canvas2 = resources.blurLayer2;
if (canvas1.width !== width || canvas1.height !== height) {
canvas2.width = canvas1.width = width;
canvas2.height = canvas1.height = height;
}
var ctx1 = canvas1.getContext('2d'),
ctx2 = canvas2.getContext('2d'),
nSamples = 15,
random, percent, j, i,
blur = this.blur * 0.06 * 0.5;
// load first canvas
ctx1.putImageData(options.imageData, 0, 0);
ctx2.clearRect(0, 0, width, height);
for (i = -nSamples; i <= nSamples; i++) {
random = (Math.random() - 0.5) / 4;
percent = i / nSamples;
j = blur * percent * width + random;
ctx2.globalAlpha = 1 - Math.abs(percent);
ctx2.drawImage(canvas1, j, random);
ctx1.drawImage(canvas2, 0, 0);
ctx2.globalAlpha = 1;
ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
}
for (i = -nSamples; i <= nSamples; i++) {
random = (Math.random() - 0.5) / 4;
percent = i / nSamples;
j = blur * percent * height + random;
ctx2.globalAlpha = 1 - Math.abs(percent);
ctx2.drawImage(canvas1, random, j);
ctx1.drawImage(canvas2, 0, 0);
ctx2.globalAlpha = 1;
ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
}
options.ctx.drawImage(canvas1, 0, 0);
var newImageData = options.ctx.getImageData(0, 0, canvas1.width, canvas1.height);
ctx1.globalAlpha = 1;
ctx1.clearRect(0, 0, canvas1.width, canvas1.height);
return newImageData;
},
2. 这个图片模糊的算法是不同透明度图片叠加实现的,对应转化为java代码:
if(blur!=0){
int nSamples = 15;
float random = 0.0f;
float percent = 0.0f;
float j = 0.0f;
blur = (float) (blur*0.06*0.5);
BufferedImage image1 = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB);
Graphics2D g1 = image1.createGraphics();
g1.drawImage(newImage,0,0,null);
//x上的处理
for (int i = -nSamples; i <= nSamples; i++) {
BufferedImage image2 = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB);
Graphics2D g2 = image2.createGraphics();
random = (float) ((Math.random() - 0.5) / 4);
percent = (float) i / nSamples;
j = blur * percent * width + random;
float globalAlpha = 1 - Math.abs(percent);
g2.setComposite(AlphaComposite.SrcOver.derive(globalAlpha));
g2.drawImage(image1,(int)j,(int)random,null);
g1.drawImage(image2, 0, 0, null);
g2.dispose();
}
//y上的处理
for (int i = -nSamples; i <= nSamples; i++) {
BufferedImage image2 = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB);
Graphics2D g2 = image2.createGraphics();
random = (float) ((Math.random() - 0.5) / 4);
percent = (float) i / nSamples;
j = blur * percent * height + random;
float globalAlpha = 1 - Math.abs(percent);
g2.setComposite(AlphaComposite.SrcOver.derive(globalAlpha));
g2.drawImage(image1,(int)random,(int)j,null);
g1.drawImage(image2, 0, 0, null);
g2.dispose();
}
g1.dispose();
newImage = image1;
}
参考文章:http://www.jhlabs.com/ip/blurring.html