图片裁剪

qq_36244456

于 2020-09-07 16:41:24 发布

阅读量140

点赞数

分类专栏： jsp 文章标签： jsp jquery

本文链接：https://blog.csdn.net/qq_36244456/article/details/108450376

版权

jsp 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

最近在做图片裁剪的工作，记录一下。

首先有两个可以考虑**Jcroper和cropper**

经过尝试之后，我选择了cropper,原因是我找不到Jcroper裁剪之后，会得到选中区域的xy坐标及宽度W高度H ，但是需要后台去真正裁剪
参考
建议仔细阅读官网，关键的部分是我想知道裁剪之后怎么做，

	canvas=cropper.getCroppedCanvas()
		var url=canvas.toDataURL();//url形式
		canvas.toBlob(function (blob) {
		//blob形式
		})

html全部的代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
String lang_country = (session.getAttribute("org.springframework.web.servlet.i18n.SessionLocaleResolver.LOCALE")).toString();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>${sessionScope.schoolName}汉语国际教育云平台</title>
<link href="../skin/<%=lang_country%>/js/jQuery-UI/css/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="../skin/<%=lang_country%>/js/jquery.validation/jquery-validation.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../skin/<%=lang_country%>/css/reset.css"/>
<link rel="stylesheet" type="text/css" href="../skin/<%=lang_country%>/css/skin/main.css"/>
<link rel="stylesheet" type="text/css" href="../js/common/crop/cropper.css"/>
<style type="text/css">
	img {
		max-width: 100%; /* This rule is very important, please do not ignore this! */
	}
</style>
<script src="../skin/<%=lang_country%>/js/jquery-1.10.2.js"></script>
<script src="../skin/<%=lang_country%>/js/jquery.blockUI.js"></script>
<script src="../skin/<%=lang_country%>/js/jQuery-UI/jquery.ui.core.js"></script>
<script src="../skin/<%=lang_country%>/js/jQuery-UI/jquery-ui.custom.js"></script>
<script type="text/javascript" src="../js/common/aliyun-oss-sdk.min.js"></script>
<script type="text/javascript" src="../js/common/jquery.serializejson.js"></script>
<script type="text/javascript" src="../js/common/crop/cropper.js"></script>
<script type="text/javascript" src="../js/common/browser-upload.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	var cropper;
	$("input:radio[name='aspestRatio']").click(function(){
		cropper.setAspectRatio($(this).val());
	});
	$("#btn_submit").click(function(){
		$.ajax({
			url  : "http://192.168.0.102:8080/articles",
			type : 'POST',
			data: 	 JSON.stringify($('#form1').serializeJSON()),
			contentType: 'application/json',

			success : function(data) {

			}
		});
	});
	//确定裁剪
	 $("#crop_submit").click( async function(){
		var canvas;
		canvas=cropper.getCroppedCanvas()
		var cropurl=canvas.toDataURL();
		$("#final_img").attr("src",cropurl);
	 	canvas.toBlob(async function (blob) {
			let file = new window.File([blob], uuid()+".jpg", { lastModified: Date.now()})
			await getstsToken();
			let fileParam = await initFileParam(file, 'record');
			await mUpload(fileParam);
			$("#img").val(accessDomainName+fileParam.storeAs)
		})
	});
	$("#img_file").change(function (e){
		var files = e.target.files;
		var reader;
		var file;
		var url;

		if (files && files.length > 0) {
			file = files[0];
			reader = new FileReader();
			reader.readAsDataURL(file);
			reader.onload = function (e) {
				$("#preview_img").attr("src",this.result);
				const preview_img = document.getElementById('preview_img');
				cropper = new Cropper(preview_img, {
					aspectRatio: 16 / 9,
					guides:false,
					crop(event) {
					},
				});
			};

		}
	});


});
</script>

</head>

<body>
<!--main start-->
<div class="skin-main">
	<div class="wrapper clearfix main-con">
		<form name="form1" id="form1" action="http://192.168.0.52:8081/articles" method="post">
			<input type="hidden" name="title" id="title" value="测试-今天很想你" />
			<input type="hidden" name="summary" id="summary" value="滑翔飞行" />
			<input type="hidden" name="content" id="content" value="本来不想有内容的" />
			<input type="hidden" name="img" id="img" value="asdfasdfasdfas" />
			<input type="file" name="img_file" id="img_file" accept="image/*"/>
			<div>
				<img id="preview_img" src="" alt="夏"/>
			</div>
			<div>
				<img id="final_img" src="" alt=""/>
			</div>
			<div class="btn-group btn-group-justified" data-toggle="buttons">
				<label class="btn btn-primary active" data-method="setAspectRatio" data-option="1.7777777777777777" title="Set Aspect Ratio">
					<input class="sr-only" id="aspestRatio1" name="aspestRatio" checked value="1.7777777777777777" type="radio">
					<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;setAspectRatio&quot;, 16 / 9)">
					  16:9
					</span>
				</label>
				<label class="btn btn-primary" data-method="setAspectRatio" data-option="1.3333333333333333" title="Set Aspect Ratio">
					<input class="sr-only" id="aspestRatio2" name="aspestRatio" value="1.3333333333333333" type="radio">
					<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;setAspectRatio&quot;, 4 / 3)">
					  4:3
					</span>
				</label>
			</div>
			<div class="tiku-touch-submit">
				<a href="#" class="anniu-cancle" id="btn_close" onclick="return false;"><fmt:message key="org.msgcancel" /></a>
				<a href="#" class="anniu-enterok" id="btn_submit" onclick="return false;"><fmt:message key="org.msgsure" /></a>
				<a href="#" class="anniu-enterok" id="crop_submit" onclick="return false;"> 确定裁剪</a>

			</div>
			
		</form>
        
	</div>
</div>
<c:import url="/pages/bottom.jsp"></c:import>
</body>
</html>

qq_36244456

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片裁剪

最近在做图片裁剪的工作，记录一下。首先有两个可以考虑**Jcroper和cropper**经过尝试之后，我选择了cropper,原因是我找不到Jcroper裁剪之后，会得到选中区域的xy坐标及宽度W高度H ，但是需要后台去真正裁剪参考建议仔细阅读官网，关键的部分是我想知道裁剪之后怎么做， canvas=cropper.getCroppedCanvas() var url=canvas.toDataURL();//url形式 canvas.toBlob(function (blob) {
复制链接

扫一扫

专栏目录