博客

使用canvas在原有图片上进行画框并保存

1. 使用原图作为canvas画布的背景,并设置隐藏画布

<canvas id="canvas"  style="border: 1px solid #000;background-image: url(/upload/2020/08/25/1.png); background-repeat:no-repeat;"></canvas>
<canvas id="offCanvas" style="display:none" ></canvas>

2. 在canvas上动态画框.

		var layer=0;
		var canvas=document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		var offCanvas = document.getElementById("offCanvas");
		var offCtx = offCanvas.getContext('2d');
		var img = new Image();
		img.src = "/upload/2020/08/25/1.png";
		img.onload = function () {
			img.width = img.width*0.8;
			img.height = img.height*0.8;
		    canvas.width = img.width;
		    canvas.height = img.height;
		    offCanvas.width = img.width;
		    offCanvas.height = img.height;
		    offCtx.drawImage(img,0,0,img.width,img.height);
		}
	CanvasExt = {
			        drawRect:function(canvasId,penColor,strokeWidth){
			            var that=this;
			            that.penColor=penColor;
			            that.penWidth=strokeWidth;
		
			            var canvas=document.getElementById(canvasId);
			            //canvas 的矩形框
			            var canvasRect = canvas.getBoundingClientRect();
			            //矩形框的左上角坐标
			            var canvasLeft=canvasRect.left;
			            var canvasTop=canvasRect.top;
		
			            var layerIndex=layer;
			            var layerName="layer";
			            var x=0;
			            var y=0;
						
			            //鼠标点击按下事件，画图准备
			            canvas.onmousedown=function(e){
			                //设置画笔颜色和宽度
			                var color=that.penColor;
			                var penWidth=that.penWidth;
			                layerIndex++;
			                layer++;
			                layerName+=layerIndex;
			                x = e.clientX-canvasLeft;
			                y = e.clientY-canvasTop;
		
			                $("#"+canvasId).addLayer({
			                    type: 'rectangle',
			                    strokeStyle: color,
			                    strokeWidth: penWidth,
			                    name:layerName,
			                    fromCenter: false,
			                    x: x, y: y,
			                    width: 1,
			                    height: 1
			                });
		
			                $("#"+canvasId).drawLayers();
			                $("#"+canvasId).saveCanvas();
			                //鼠标移动事件，画图
			                canvas.onmousemove=function(e){
			                    width = e.clientX-canvasLeft-x;
			                    height = e.clientY-canvasTop-y;
			                    $("#"+canvasId).removeLayer(layerName);
			                    $("#"+canvasId).addLayer({
			                        type: 'rectangle',
			                        strokeStyle: color,
			                        strokeWidth: penWidth,
			                        name:layerName,
			                        fromCenter: false,
			                        x: x, y: y,
			                        width: width,
			                        height: height
			                    });
		
			                    $("#"+canvasId).drawLayers();
			                }
			            };
		
			            canvas.onmouseup=function(e){
		
			                var color=that.penColor;
			                var penWidth=that.penWidth;
		
			                canvas.onmousemove=null;
		
			                width = e.clientX-canvasLeft-x;
			                height = e.clientY-canvasTop-y;
		
			                $("#"+canvasId).removeLayer(layerName);
		
			                $("#"+canvasId).addLayer({
			                    type: 'rectangle',
			                    strokeStyle: color,
			                    strokeWidth: penWidth,
			                    name:layerName,
			                    fromCenter: false,
			                    x: x, y: y,
			                    width: width,
			                    height: height
			                });
		
			                $("#"+canvasId).drawLayers();
			                $("#"+canvasId).saveCanvas();
			            }
			        }
			    };
		
		    drawPen();
		
	    function drawPen(){
	    	var color = $("#color").val();
	        var width = 1;
	        CanvasExt.drawRect("canvas",color,width);
	    }

4. 在隐藏画布上先draw原图，然后再把第一个画布上的框渲染到此隐藏的画布上

	var offCanvas = document.getElementById("offCanvas");
	var offCtx = offCanvas.getContext('2d');
	function compositeGraph(){
		offCtx.drawImage(canvas,0,0);	
		return offCanvas.toDataURL('image/jpeg');
 	}

5. 保存

	function doSave(){
	  		// 获取Canvas的编码。
	  		var base64 = compositeGraph();
	  		var pic = base64.replace("data:image/jpeg;base64,","");
		    // 上传到后台。
		    $.ajax({
		         type: "post",       
		         url:"/url",
		         data: {pic : pic},
		         async: true,
		         success: function (htmlVal) {
		               alert("另存图片成功！");
		         },
			error: function(data) {
		               alert(e.responseText); //alert错误信息 
		        }
		    });
	  	}