骨刻文字数字化识别4-CSDN博客

本文链接：https://blog.csdn.net/YiYiLEANN/article/details/118661849

本文介绍了前端需求变更，包括新增的图片临摹与分类上传、图片裁剪功能以及历史记录功能。使用HTML5的canvas API在前端实现了图片裁剪，通过显示、裁剪和保存三个步骤来完成。同时，系统需记录用户的所有图片操作历史，并支持历史记录的删除，以提升用户体验。

摘要由CSDN通过智能技术生成

文章目录

一、需求变更
二、图片裁剪功能

一、需求变更

这个礼拜进行紧急组会召开，确认前端需求发生较大变化。
一是画板界面的需求，需要能够对图片进行临摹并上传图片进行分类。
二是需要有裁剪功能，对于上传的图片需要能将它裁剪成图片，方便能裁剪到单个字进行更好地识别，
三是历史记录功能，实现对系统各种图片上传、图片分类查询、裁剪等活动的记录，并支持对历史记录的删除。

二、图片裁剪功能

学习了HTML5里的canvas，它的图片处理功能比较强大，就打算用canvas提供的API实现纯前端的剪切。
这里头关键有三步：显示未经处理的图片，得到裁剪区域，显示裁剪后的区域。
首先，显示未经处理的图片，创建一个canvas，用drawImage(img,0,0,canvas.width,canvas.height)就可以。主要这里的img是一个Image类的object, 用new Image创建。

var img = new Image();
2     img.src = "./geke.jpg";
3 img.onload = function(){
4         cxt1.drawImage(img,0,0,canvas1.width,canvas1.height); 
5 }