copper实现图片的裁剪和上传(1)

需要引入的css

<link href="../cropper/cropper.min.css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="../cropper/cropper.min.js"></script>

我在这个地方使用到了bootstrap来设计样式

我想实现的效果是页面上添加一个按钮，然后点击按钮的时候弹出一个模态的框，可以对图片进行裁剪

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>基于cropper.js的图片裁剪</title>
<meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="format-detection" content="telephone=no"><link href="../cropper/cropper.min.css" rel="stylesheet" media="screen" /></head><body><div class="str"><button id="showmodal">xianshi</button></div><div class="modal fade" id="cropperModel" role="dialog"><div class="modal-dialog" style="margin-top: 30px; margin-left: 20%;"><div class="modal-content" style="width: 1200px; height: 800px;"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"aria-hidden="true">&times;</button><h4 class="modal-title" style="display: inline-block;">上传封面</h4><input type="file" id="chooseImg" name="photo"style="display: inline-block;" /></div><div class="modal-body" style="z-index: 99"><div class="col-md-12"><div class="col-md-8"><img src="../dist/cutpic/images/cutdefault.jpg" id="sourceImg"style="display: inline-block; width: 800px; height: 600px;" /></div><div class="col-md-4"><img id="result"style="width: 250px; height: 250px; margin-left: 100px;"><label style="float:right; padding-right:100px;font-size:1.2em;">[预览]</label></div></div></div><div class="modal-footer" style="z-index: 99;"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" id="uploadbtn" class="btn btn-primary">上传图片</button></div></div></div></div><script type="text/javascript" src="../cropper/cropper.min.js"></script><script type="text/javascript">//弹出框水平垂直居中  window.onload = function() {var $sourceImg = $('#sourceImg');var xhr = new XMLHttpRequest(); // XMLHttpRequest 对象function dealImg() {var $target = $("#result");var data = $sourceImg.cropper('getCroppedCanvas', {width : 400, // 裁剪后的长宽height : 200}).toBlob(function(blob) {$target.attr('src', URL.createObjectURL(blob));});}var options = {aspectRatio : 3 / 2,viewMode : 1,responsive : true,minContainerWidth : 800,minContainerHeight : 600,maxCanvasHeight : 800,maxCanvasWidth : 600,ready : function() {dealImg();},crop : function(e) {dealImg();}}$("#chooseImg").on('change',function() {var objUrl = getObjectURL(this.files[0]);console.log(objUrl);if (objUrl) {$("#sourceImg").attr("src", objUrl);$sourceImg.cropper('destroy').attr('src', objUrl).cropper(options);$sourceImg.css({"width" : "800px","height" : "600px"})}});$sourceImg.cropper(options);function getObjectURL(file) {var url = null;if (window.createObjectURL != undefined) { // basicurl = window.createObjectURL(file);} else if (window.URL != undefined) { // mozilla(firefox)url = window.URL.createObjectURL(file);} else if (window.webkitURL != undefined) { // webkit or chromeurl = window.webkitURL.createObjectURL(file);}return url;}$("#showmodal").on('click', function() {$("#cropperModel").modal('show');$sourceImg.cropper(options);})}</script></body></html>

希望对你有所帮助

copper实现图片的裁剪和上传(1)相关推荐

php html5手机端多张图片上传,php+html5兼容手机端的图片选取裁剪上传实例
网上大多图片上传插件都不带裁剪功能,这个是php+html5实现的兼容手机端的图片选取裁剪上传实例,分享出来希望能帮到大家. 首先放置一个上传按钮及相关预览信息等注意:上传前,先截图文件大小类型 ...
vue 移动端头像裁剪_vue头像上传裁剪组件_一个漂亮的Vue组件，用于图像裁剪和上传...
vue头像上传裁剪组件 vue-image-crop-upload (vue-image-crop-upload) A beautiful vue component for image crop a ...
基于cropper和sweetalert的简单图片/头像裁剪上传
基本功能前端基本样式: 进行图片裁剪及上传: 点击上传后,js会将截取到的数据转为图片数据利用ajax发送给后台进行存储.存储成功后,刷新前端页面,头像改变. 上传成功后:自动刷新网页,更改头像基 ...
imgareaselect + php 裁剪和上传,jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能
本文主要介绍了jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一,需要的朋友可以参考下,希望能帮助到大家. 上一节随笔中,我们已经知道了关于jQuery插件ImgAreaS ...
docker 挂载目录_完美解决：Docker部署SpringBoot项目后图片无法访问和上传，3招搞定！...
以前使用FTP在Linux中使用java -jar xxx.jar部署SpringBoot项目时,由于在项目中指定了主机文件存放路径映射,可以直接访问服务器的文件. 但是最近入坑Docker,将Spr ...
mui ajax 传递base64,HTML5 MUI 手机预览图片，裁剪上传base64，保存数据库
app和网站页面都可以使用需要的文件: 这些都需要,这些文件在下文的参考网址可以下载页面头部引用: 页面底部引用(但是在body里): 布局: //触发选择图片事件 //默认图片以及选择裁剪后展示 ...
php html5手机端多张图片上传,PHP+jQuery+html5实现图片选取裁剪上传(兼容手机上传)...
在网上找到了图片上传插件jquery.min.js,但没有上传功能,自己花了10分钟给加上去了哈,有bug留言,一般当天改完上传. 下载资源下载积分: 100 积分 HTML 首先我们放置一个上传按 ...
JS获取粘贴板中的图片进行展示和上传
目前有一个需求,需要在页面中获取QQ.微信等软件的截图上传到服务器,为了用户体验,不能让用户主动上传,提供给用户方法,在web页面使用粘贴快捷键,就可以粘贴到页面,然后点击发送进行上传.而且用户如果粘 ...
vue3图片头像裁剪上传
效果图 1.安装vue-cropper pnpm add vue-cropper@next 2.组件内引用 import 'vue-cropper/dist/index.css'//引入圖片裁剪 im ...

copper实现图片的裁剪和上传(1)

copper实现图片的裁剪和上传(1)相关推荐

最新文章

热门文章