当前位置：文档之家 › 上传图片裁剪

上传图片裁剪

  • 格式：docx
  • 大小：30.58 KB
  • 文档页数：9

上传图片裁剪编辑实现方式1.单独创建一个jsp例如:img.jsp1.1内容如下:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/ xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xh tml">1.2导入样式:<link href="/res/js/imgjquery/css/border-anim-h.gif" rel="stylesheet"type="text/css" /><link href="/res/js/imgjquery/css/border-anim-v.gif" rel="stylesheet"type="text/css" /><link href="/res/js/imgjquery/css/border-h.gif" rel="stylesheet" type="text/css"/><link href="/res/js/imgjquery/css/border-v.gif" rel="stylesheet" type="text/css"/><link href="/res/js/imgjquery/css/imgareaselect-deprecated.css" rel="stylesheet"type="text/css" /><link href="/res/js/imgjquery/css/imgareaselect-default.css" rel="stylesheet"type="text/css" /><link href="/res/js/imgjquery/css/imgareaselect-animated.css" rel="stylesheet"type="text/css" />1.3导入js:<script src="/res/js/imgjquery/scripts/jquery.imgareaselect.js"type="text/javascript"></script><script src="/res/js/imgjquery/scripts/jquery.imgareaselect.min.js"type="text/javascript"></script><script src="/res/js/imgjquery/scripts/jquery.imgareaselect.pack.js"type="text/javascript"></script>1.4Jsp中div 准备<div class="main_right_mr"><h2>头像设置</h2><div class="headimg_form"><form><input type ="file" id="Member_headimg" /></form></div><div id="img"><div class="hull"><div id="localImag"><img id="preview" width=-1 height=-1 style="diplay:none" /></div><div id="show_img"><p>大头像</p><div style="height:100px;width:100px;border:1pxsolid#ccc;overflow:hidden;"><div id="big_img"style="height:100px;width:100px;border:1pxsolid#ccc;overflow:hidden;"> <img id ="big_photo"width=-1height=-1style= "diplay:none"/></div></div><p>小头像</p><div style ="height:75px;width:75px;border:1pxsolid#ccc;overflow:hidden;"><div id="small_img"style="height:75px;width:75px;border:1px solid#ccc;overflow:hidden;"><img id ="small_photo"width=-1height=-1 style="diplay:none" /> </div></div><p><input type ="button" value="确认修改" /></p></div></div></div></body></div>1.5jsp中的js加载:<script type="text/javaScript">/**setImagePreview()*@paramfileObjStrimg表示上传域的ID*@parampreviewObjString表示显示图片的ID*@paramlocalImgString表示显示图片外层的div的ID*@paramwidth表示显示图片的宽*@paramheight表示显示图片的高*/functionsetImagePreview(fileObj,previewObj,localImg,width,height){ vardocObj=document.getElementById(fileObj);varimgObjPreview=document.getElementById(previewObj);if(docObj.files&&docObj.files[0]){ //火狐下，直接设img属性imgObjPreview.style.display='block';imgObjPreview.style.width=width+'px';imgObjPreview.style.height=height+'px';//imgObjPreview.src=docObj.files[0].getAsDataURL();//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);}else{//IE下，使用滤镜docObj.select();varimgSrc=document.selection.createRange().text;varlocalImagId=document.getElementById(localImg);//必须设置初始大小localImagId.style.width=width+'px';localImagId.style.height=height+'px';/ /图片异常的捕捉，防止用户修改后缀来伪造图片try{localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImage Loader(sizingMethod=scale)";localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader ").src=imgSrc;}catch(e){alert("您上传的图片格式不正确，请重新选择!");return false;}imgObjPreview.style.display='none';document.selection.empty();}return true;}$(function(){ //给上传区添加onchang事件，掉用函数setImagePreview() $("#Member_headimg").change(function(){ setImagePreview('Member_he adimg','preview','localImag',400,300);setImagePreview('Member_headimg','small_photo','small_img',75,75);setImagePreview('Member_headimg','big_photo','big_img',100,100); }) //调用截图插件需用的$("#localImag").imgAreaSelect({/* x1: 120, y1: 90, x2: 280, y2: 210 , */aspectRatio:"4:1",//选中区域是正方形handles:true,onSelectChange:set,//执行选择后执行的函数fadeSpeed:400//出来效果});function set(img,selection){if(!selection.width||!selection.height)return;varscaleX=100/selection.width;varscaleY=100/selection.height;if(erAgent.indexOf("MSIE")>=1){$('#big_img').css({ width:Math.round(scaleX*400),height:Math.round(scal eY*300),marginLeft:-Math.round(scaleX*selection.x1),marginTop:-Math.round(scaleY *selection.y1)});$('#small_img').css({ width:Math.round(scaleX*400*3/4),height:Math.rou nd(scaleY*300*3/4), marginLeft:-Math.round(scaleX* selection.x1*3/4),marginTop:-Math.round(scaleY*selection.y1*3/4)});}else{$('#big_photo').css({ width:Math.round(scaleX*400),height:Math.round(sc aleY*300), marginLeft:-Math.round(scaleX*selection.x1),marginTop:-Math.round(scaleY*selection.y1)});$('#small_photo').css({ width:Math.round(scaleX*400*3/4),height:Math.roun d(scaleY*300*3/4), marginLeft:-Math.round(scaleX* selection.x1*3/4),marginTop:-Math.round(scaleY*selection.y1*3/4)});}}})</script>1.6 <style type="text/css">#img {height: 300px;}#img.hull {width: 400px;}#localImag {height: 300px;width: 400px;border: 1pxsolid #ccc;float: left;}#show_img {float: right;}#old_imgimg {width: 400px;height: 300px;}</style>2需要编辑图片的引入img.jsp做相应处理处理方法如下:2.1 参数设置:OPTIONS参数2.2 方法。

合集下载

相册裁剪操作方法

相册裁剪操作方法

相册裁剪操作方法
在相册中裁剪照片可以通过以下几种方法进行操作：
1. 使用相册自带的编辑功能：打开相册，选择要裁剪的照片，然后点击编辑按钮。

在编辑界面中会有一个裁剪工具，点击进入后可以自由调整裁剪框的大小和位置来裁剪照片。

2. 使用第三方图片编辑软件：下载并安装一款第三方图片编辑软件，如Photoshop等。

打开软件后，导入要裁剪的照片，然后选择裁剪工具，在图片上选择要保留的区域，然后确认裁剪。

3. 使用在线图片编辑网站：打开一个在线的图片编辑网站，如pixlr等，上传要裁剪的照片，然后选择裁剪工具，在图片上选择要保留的区域，然后确认裁剪。

最后保存裁剪后的照片到手机相册中。

无论使用哪种方法，裁剪照片之前最好先备份一份原图，以防止误操作导致照片丢失。

【期中作业上传表格中的上传图片作法说明】.

【期中作业上传表格中的上传图片作法说明】.

【期中作業上傳表格中的上傳圖片作法說明】
By 助教 2003.4.30
◎ 步驟一：首先來到您要推薦的網站首頁（以「台大婦女研究」首頁為例，如
下圖），然後按一下鍵盤右上方的
鍵。

◎ 步驟二：新開一個Word 檔，按滑鼠右鍵，點選「貼上」，即可見到該首頁畫 面被貼到Word 裡了。

◎步驟三：在Word檔的該圖片上快速點兩下滑鼠左鍵，會出現「設定圖片格式」對話方框（如下圖），請點進「圖片」選項，在裁剪之處依您的需要
（將IE瀏覽器的框框裁掉即可）作上、下、左、右的裁剪設定，然
後按「確定」。

◎步驟四：圖片裁剪好之後，複製此圖片，然後啟動任一影像繪圖軟體程式（例如「小畫家」或「Photoshop」）並開一新檔案，將剛剛所複製的圖
片貼上，以JPG檔另存於桌面（以英文取檔名，且要小於2MB）。

◎步驟五：到導論課課程網站的「作業區」中，點進【期中作業上傳請按此】，按作業上傳，可見到一表格供您填入相關資料。

在最後一項「上傳
圖片」處，按下旁邊的「瀏覽」鈕，將路徑指向剛剛存於桌面的圖
片檔案。

確認您所填的資料無誤後，按下「確定送出」鈕。

◎步驟六：大功告成！乾杯！。

React+Antd+Antd-Img-Crop实现上传固定大小的裁剪头像或者图片（且可控。。。

React+Antd+Antd-Img-Crop实现上传固定大小的裁剪头像或者图片（且可控。。。

React+Antd+Antd-Img-Crop实现上传固定⼤⼩的裁剪头像或者图⽚（且可控。

见章知著 1024，程序员们节⽇快乐！本⽂主要讲述react配合antd以及antd-img-crop第三⽅库实现⼀个可控的图⽚上传功能。

运⾏项⽬ 需要具有node环境第三⽅库安装　1.安装和初始化 1.1.在代码编辑器(vsCode或者其他编辑器)代开终端，输⼊命令⾏安装antd： $ yarn add antd --save 或者 $ npm install antd --save 1.2.安装好antd后，修改src/App.css，在新建的项⽬中引⼊antd所需要的css样式：@import '~antd/dist/antd.css';　2.安装和初始化 2.1.在antd-img-crop官⽅⽂档中，我们优先安装和初始化这个组件：$ npm i antd-img-crop --save 或者 $ yarn add antd-img-crop --save 2.2.安装好组件后，在项⽬中引⼊组件<ReactCrop />:import ImgCrop from 'antd-img-crop';代码实现 安装好相对应的组件后，根据组件官⽅⽂档中的简单Example书写实现属于⾃⼰的上传图⽚功能。

话不多说，直接上代码：import React, { Component } from 'react';import ImgCrop from 'antd-img-crop'; //引⼊图⽚裁剪组件import { Upload, Button, Modal, message } from 'antd'; //引⼊上传、按钮、弹窗等antd组件//base64图⽚⽂件function getBase64(file) {return new Promise((resolve, reject) => {const reader = new FileReader();reader.readAsDataURL(file);reader.onload = () => resolve(reader.result);reader.onerror = error => reject(error);});}class UploadImage extends Component {state = {previewVisible: false,previewImage: '',fileList: [],};//图⽚预览取消函数handleCancel = () => this.setState({ previewVisible: false }); //图⽚预览弹窗函数handlePreview = async file => {if (!file.url && !file.preview) {file.preview = await getBase64(file.originFileObj);}this.setState({previewImage: file.url || file.preview,previewVisible: true,});}; //上传⽂件改变时的状态，详情可以参考antd的Upload组件API参数onChange = ({fileList}) => {this.setState({ fileList });};render() {const { previewVisible, previewImage, fileList } = this.state; //根据官⽅属性定制化裁剪框⼤⼩固定的裁剪组件属性const props = {width: 500, //裁剪宽度height: 300, //裁剪⾼度resize: false, //裁剪是否可以调整⼤⼩resizeAndDrag: true, //裁剪是否可以调整⼤⼩、可拖动modalTitle: "上传图⽚", //弹窗标题modalWidth: 600, //弹窗宽度};return (<div><ImgCrop {...props}><Uploadname="file" action="https://www.mocky.io/v2/5cc8019d300000980a055e76"accept="image/*"listType="picture"fileList={fileList}onPreview={this.handlePreview}onChange={this.onChange}>{fileList.length >= 3 ? null : (<Button>添加图⽚</Button>)}　{/* {通过三⽊运算符判断⽂件列表fileList的长度来决定上传图⽚的数量，达到控制图⽚数量的功能} */}</Upload></ImgCrop>{/* {图⽚预览弹出框：可以实时查看上传的图⽚} */}<Modal visible={previewVisible} footer={null} onCancel={this.handleCancel} title='Image-Show'> <img alt="example" style={{ width: '100%' }} src={previewImage} /></Modal></div>);}}export default UploadImage;基本效果图总结发⾔ 本⽂以上就是个⼈在处理上传图⽚并裁剪需求的⼼路历程，如有任何不对的地⽅，还请各位⼤佬们指指点点!啊哈哈哈啊哈哈哈哈.........。

如何解决WORD文档上传图片模糊的问题

如何解决WORD文档上传图片模糊的问题

如何解决WORD文档上传图片模糊的问题
很多的时候，我们都需要用到截屏工具截取图片，如QQ、微信、截图软件等等，明明图片很清晰，但为什么上传到WORD文档里，一放大就变得很模糊呢？下面我们来介绍一种方法，让你的图片尽最高的保持图片质量。

打开WORD文档，点击菜单栏上“文件”，弹出窗口，点击最底部“选项”。

弹出界面，左侧点击“高级“，右侧移动滚动条，找到“图形大小和质量”区域，“不压缩文件的图像”默认没有打勾，我们只需要勾选此项，让上传的图片不被压缩。

但这样的话，如果文档里图片较多、较大，文档也会相应比较大。

其一的解决办法是尽量把图片裁剪的小一些，选择图片，点击菜单栏上“图片格式-裁剪”。

图片四个角和每个边的中间都有一条加粗的黑线，移动鼠标放置上去，往内拖动到合适的位置，松开鼠标，点击周围空白区域即可剪裁好图片。

但要记住的是保存文档的时，记住一定要压缩下图片。

进入保存窗口，点击下方“工具”，弹出窗口，选择压缩选项“删除图片的裁剪区域”。

以上，方法用起来后，解决了你的问题了吗？反正我的问题就这样轻松就给解决了。