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 =newImage();
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);}
在隐藏画布上先draw原图,然后再把第一个画布上的框渲染到此隐藏的画布上
var offCanvas = document.getElementById("offCanvas");
var offCtx = offCanvas.getContext('2d');
function compositeGraph(){
offCtx.drawImage(canvas,0,0);return offCanvas.toDataURL('image/jpeg');}
保存
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错误信息 }});}