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

使用原图作为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>

在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);}

在隐藏画布上先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错误信息 }});}

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

java实现在图片上插入文字并保存。
这两天通过在网上查阅资料,了解了在图片上插入文字并保存的功能,下面记录一下. 工具类:PrintImage. package com.learning.www.utils; import java.a ...
canvas初体验-图片上画方框
开发环境:ionic + typeScript 需求:手机拍车牌号照片传至后端,后端返回对应车辆信息以及车牌号在图片位置,前端用方框框出来. 先看一下后端返回格式: [{rect: [11, 22, ...
java canvas添加图片上传_HTML5 canvas画图及图片上传服务器
上一个教程中我们实现了使用html5 canvas来制作涂鸦画板的效果,在这个教程中,我们将讲解如何将画好的图片上传到服务器上. 最后的效果如下图,当点击"开始画图"按钮,将在ca ...
ssm上传文件获取路径_ssm框架实现图片上传显示并保存地址到数据库(示例代码)...
本案例是通过springmvc+spring+mybatis框架以商品上传为例,实现的图片上传功能,并把图片的地址保存到数据库并在前台显示上传的图片. 本项目是使用maven搭建的项目,首先看下项目结 ...
java实现图片上插入文字并保存
记录一下之前项目中用到过的工具类,可以在图片中写入文字并且生成新的图片,记录一下. 文章转载自:https://www.jb51.net/article/162956.htm start ↓ 工具类: ...
matlab2018在图片上添加文字并保存且图片没有白边
文章目录图片添加文字并保存去除白边添加文字使用 text函数,难点在于保存,使用 getframe来捕获,然后使用 imwrite来保存,类似的教程网上很多,但是有的添加文字不是使用text函数 ...
python在图片上绘制标注框
前言最近帮人跑代码的时候遇到了不少问题,后来发现他提供给我的数据集中标注文件不太准确,部分box框没有很好地框到物体.所以写了一个代码,通过在图片上绘制标注框来直观地判断标注文件是否存在问题,也可以 ...
菜鸟的springboot项目图片上传及图片路径分析
菜鸟的springboot项目图片上传及图片路径分析说明一.图片路径分析二.实现图片上传 (1)单文件上传(非异步) (2)单文件上传(异步) 三.总结四.更新配置文件说明更新时间:202 ...
SSM项目/SpringBoot项目/SpringBoot+Vue前后端分离项目图片上传并查看功能实现汇总
SSM项目下的图片上传: 1.前端Js代码:用户点击"上传头像"按钮后,会执行uploadPhoto()的方法. <button type="button" ...
在一个图片上写字并保存
在一个图片上写字然后在保存出来可以先将图片导入,然后利用setpen在图上写字然后导出图片下面提供源代码 void Widget::SaveImage() {QImage image = QPixm ...

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

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

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

最新文章

热门文章