图片马赛克处理以及上传保存—网页端

一、上jsp

<table id="table_report" class="table table-striped table-bordered table-hover">
	<tr style="text-align: center;">
		<td>
			<input id="PIC_PATH" value="${pd.PIC_PATH}" style="display: none;"/>
				<img src="<%=basePath%>${pd.PIC_PATH}" style="display: none;" id="img" />
					    <canvas id="vanvas1" width="500" height="300" ></canvas>
		</td>
	</tr>
	<tr>
		<td style="text-align: center;" colspan="10">
			<button id='revoked' class="btn btn-mini btn-primary">撤销</button>
				<a class="btn btn-mini btn-primary" onclick="save()">保存</a>
		</td>
	</tr>
</table>

二、有版了，就加料，JS

<script type="text/javascript">
		$(top.hangge());
		
		//保存 by lijm
		function save(){
			var canvas1 = document.getElementById("vanvas1");
			var dataUrl = canvas1.toDataURL("image/png");//这个函数获取图片的base64编码
			var PATH = $("#PIC_PATH").val().toString();
			var str = PATH.split(".");
			str[0]+="-马赛克处理";
			var PIC_PATH = str[0]+"."+str[1];
			$.ajax({
				async: false,
				type : "POST",
				url : '<%=basePath%>pic_editor/save2',
				data : {"dataURL":dataUrl,"PIC_PATH":PIC_PATH},
				cache : false,
				success : function(data) {
					alert(data);
					top.Dialog.close();
			    },
			    error: function(data){
			    	alert("保存失败");
			    }
			    
			});
		}
		
	  window.onload= function(){
          var canvas = document.getElementById("vanvas1");  
          var context = canvas.getContext("2d");  
          var quan = 3; //马赛克的大小
          var num = 9; //一次操作包含马赛克的个数
          
          //创建image对象
          var imgObj = new Image();
           imgObj.src = document.getElementById("img").src;
          
          //待图片加载完后，将其显示在canvas上
          imgObj.onload = function(){
            context.drawImage(this, 0, 0,canvas.width,canvas.height);//this即是imgObj,保持图片的原始大小
            start(this);
          }

          function start(obj){
            //修改缓存
            var lastImgArr = [];
            canvas.onmousedown = function(ev){
                //每次下笔前先保存
                lastImgArr.push(context.getImageData(0,0,canvas.width,canvas.height));

                var ev=ev || window.event;
                var dx = ev.clientX-canvas.offsetLeft;
                var dy = ev.clientY-canvas.offsetTop;
                drawLine(obj,dx,dy);
                document.onmousemove = function(ev){
                    var ev = ev || window.event;
                    var mx = ev.clientX-canvas.offsetLeft;
                    var my = ev.clientY-canvas.offsetTop;
                    if(Math.pow(dx-mx,2)+Math.pow(dy-my,2)>= Math.pow(quan*num,2)){  //(quan*马赛克个数*2)的平方
                      drawLine(obj,mx,my);
                      dx = mx;
                      dy = my;
                    }
                };
                document.onmouseup = function(){
                    document.onmousemove = null;
                    document.onmouseup = null;
                };

            }
            //撤销修改
            document.getElementById('revoked').onclick = function(){
              if(lastImgArr && lastImgArr.length){
                context.putImageData(lastImgArr.pop(), 0, 0);
              }
            }
          }
          function drawLine(obj,dx,dy){
            //原始图像
            var originalImgData = context.getImageData(0,0,canvas.width,canvas.height);  
            var originalPxData = originalImgData.data;  
              
            //用于循环修改  
            var modifyImgData = context.getImageData(0,0,canvas.width,canvas.height);  
            var modifyPxData = modifyImgData.data;  

            for(var i=dx-quan*num;i<dx+quan*num;i = i+2*quan+1){  
              for(var j=dy-quan*num;j<dy+quan*num;j = j+2*quan+1){
                //中心点(dx,dy)
                // if(Math.pow(i-dx,2)+Math.pow(j-dy,2) <= Math.pow(quan*num/2,2)){
                if(!((i==dx-quan*num&&j==dy-quan*num)||(i==dx-quan*num&&j==dy-quan*num+2*quan+1)||
                  (i==dx-quan*num&&j==dy-quan*num+4*quan+2)||(i==dx-quan*num&&j==dy-quan*num+12*quan+6)||
                  (i==dx-quan*num&&j==dy-quan*num+14*quan+7)||(i==dx-quan*num&&j==dy-quan*num+16*quan+8)||
                  (i==dx-quan*num+16*quan+8&&j==dy-quan*num)||(i==dx-quan*num+16*quan+8&&j==dy-quan*num+2*quan+1)||
                  (i==dx-quan*num+16*quan+8&&j==dy-quan*num+4*quan+2)||(i==dx-quan*num+16*quan+8&&j==dy-quan*num+12*quan+6)||
                  (i==dx-quan*num+16*quan+8&&j==dy-quan*num+14*quan+7)||(i==dx-quan*num+16*quan+8&&j==dy-quan*num+16*quan+8)||
                  (i==dx-quan*num+2*quan+1&&j==dy-quan*num)||(i==dx-quan*num+4*quan+2&&j==dy-quan*num)||
                  (i==dx-quan*num+12*quan+6&&j==dy-quan*num)||(i==dx-quan*num+14*quan+7&&j==dy-quan*num)||
                  (i==dx-quan*num+2*quan+1&&j==dy-quan*num+16*quan+8)||(i==dx-quan*num+4*quan+2&&j==dy-quan*num+16*quan+8)||
                  (i==dx-quan*num+12*quan+6&&j==dy-quan*num+16*quan+8)||(i==dx-quan*num+14*quan+7&&j==dy-quan*num+16*quan+8))){
                var sumR = 0;  
                var sumG = 0;  
                var sumB = 0;  
                //找他周围的元素 
                for(var x = -quan;x<=quan;x++){  
                    for(var y = -quan;y<=quan;y++){  
                      var xx = i+x;  
                      var yy = j+y;  
                      var pp = yy*canvas.width+xx; //周围的元素。  
                      sumR += originalPxData[pp*4+0];  
                      sumG += originalPxData[pp*4+1];  
                      sumB += originalPxData[pp*4+2];  
                    }  
                }  
                  
                var totlal = (2*quan+1)*(2*quan+1);  
                var avgR = sumR/totlal;  
                var avgG = sumG/totlal;  
                var avgB = sumB/totlal;  
                  
                for(var x = -quan;x<=quan;x++){  
                  for(var y = -quan;y<=quan;y++){  
                    var xx = i+x;  
                    var yy = j+y;  
                    var pp = yy*canvas.width+xx; //周围的元素。  
                    modifyPxData[pp*4+0] = avgR;  
                    modifyPxData[pp*4+1] = avgG;  
                    modifyPxData[pp*4+2] = avgB;  
                  }  
                }  
              }  
            }
            } 
            context.putImageData(modifyImgData,0,0,0,0,canvas.width,canvas.height); 
          }
        }

三、上面已经做好在线马赛克和保存图片的动作，接下来是后台保存，因为采取的是图片base64编码上传，所以在后台会有解码变回图片保存在本地。

 

package com.fh.util;

import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import Decoder.BASE64Decoder;
import Decoder.BASE64Encoder;

/** 
 * 说明：BASE64处理
 * 修改时间：2019-3-19
 * @version
 */
public class ImageAnd64Binary {
    public static void main(String[] args){//主函数测试
    	
		String imgSrcPath 	 = "F://Tomcat//webapps//AMBER//uploadFiles//uploadImg//mosaic//123.jpg";     //原始图片
		String imgCreatePath = "F://Tomcat//webapps//AMBER//uploadFiles//uploadImg//mosaic//123.jpg";     //将64编码生成图片的路径（路径必须带文件名和后缀可自定义，因为是文件操作，需要创建）
		imgCreatePath=imgCreatePath.replaceAll("\\\\", "/");
    	String strImg = getImageStr(imgSrcPath);//将图片转换为base64编码
        generateImage(strImg, imgCreatePath);//解码
    }
    
   /**
     * 将图片文件转化为字节数组字符串，并对其进行Base64编码处理
     * @param imgSrcPath 生成64编码的图片的路径
     * @return
     */
    public static String getImageStr(String imgSrcPath){
        InputStream in = null;
        byte[] data = null;
        
        //读取图片字节数组
        try {
            in = new FileInputStream(imgSrcPath);        
            data = new byte[in.available()];
            in.read(data);
            in.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
        
        //对字节数组Base64编码
        BASE64Encoder encoder = new BASE64Encoder();
        
        return encoder.encode(data);//返回Base64编码过的字节数组字符串
    }
    
    /**
     * 对字节数组字符串进行Base64解码并生成图片
     * @param imgStr            转换为图片的字符串
     * @param imgCreatePath     将64编码生成图片的路径
     * @return
     */
    public static boolean generateImage(String imgStr, String imgCreatePath){
        if (imgStr == null) //图像数据为空
            return false;
        BASE64Decoder decoder = new BASE64Decoder();
        try {
            //Base64解码
            byte[] b = decoder.decodeBuffer(imgStr);
            for(int i=0;i<b.length;++i) {
                if(b[i]<0) {//调整异常数据
                    b[i]+=256;
                }
            }
            OutputStream out = new FileOutputStream(imgCreatePath);    
            out.write(b);
            out.flush();
            out.close();
            return true;
        } catch (Exception e){
            return false;
        }
    }
    
}

 

 

参考各类大神文章：

网页在线马赛克：https://www.jianshu.com/p/3d2a8bd83191

base64编码解码：https://www.jb51.net/article/134158.htm