图片裁剪cropper 示例

头像上传时需要进行裁剪上传，可使用<input type="file">进行图片选择，然后结合cropper进行裁剪，裁剪结果是图片的base64格式，然后把结果上传到服务器就可以了

详情参数可参考：https://github.com/fengyuanchen/cropperjs

需求引入相关js和CSS：

https://cdn.bootcdn.net/ajax/libs/cropperjs/1.5.9/cropper.min.css
https://cdn.bootcdn.net/ajax/libs/cropperjs/1.5.9/cropper.min.js

效果：

代码示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><link href="https://cdn.bootcdn.net/ajax/libs/cropperjs/1.5.9/cropper.min.css" rel="stylesheet"><script src="https://cdn.bootcdn.net/ajax/libs/cropperjs/1.5.9/cropper.min.js"></script><title>Cropperjs</title><style>.photo_cropper {float: left;width: 400px;height: 370px;margin-right: 20px;}.cropper_preview {float: left;width: 310px;overflow: hidden;}.photo_preview {float: left;overflow: hidden;margin-bottom: 10px;margin-right: 10px;}.photo_cropper>img,.photo_preview>img {width: 100%;height: 100%;}.preview-lg {height: 240px;width: 260px;}.preview-md {height: 120px;width: 120px;}.preview-sm {height: 80px;width: 80px;}.preview-xs {height: 40px;width: 40px;}.hint-content {top: -18px;font-size: 12px;color: gray;}.btn-primary,input[type="file"] {padding: 5px 10px;background-color: #00c176;color: white;border-radius: 4px;border: none;}.btn-primary {padding: 8px 10px;}</style></head><body><div class="photo_container"><div class="photo_cropper"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604414071111&di=6681d440860b07f3c7a4fc2fcb224180&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F0dd7912397dda144dac4acc9b2b7d0a20df486f8.jpg"id="cr_photoImg"></div><div class="cropper_preview"><div class="photo_preview preview-lg"></div><div class="photo_preview preview-md"></div><div class="photo_preview preview-sm"></div><div class="photo_preview preview-xs"></div></div></div><div class="cropper_actions" style="clear: both;"><div class="actions"><input type="file" accept=".gif,.jpg,.jpeg,.png" onchange="imgChange(event)" id="fileInput"><input type="button" class="btn-primary cr_savePhotoBtn" value=" 保存"></div><div class="hint-content">支持格式：png、jpg, 图片大小不超过5MB。</div></div>
</body></html><script>let cropper = null;$('.photo_preview').html($('.photo_cropper').html());function imgChange(e) {var fileObj = e.target.files[0];var typeExtens = 'image/jpeg,image/png';if (!typeExtens.includes(fileObj.type)) {alert('只能上传png、jpg格式。');return false;}if (fileObj.size > 5 * 1024 * 1024) {alert('图片大小不超过5MB。');return false;}console.info(fileObj);//图片文件var reader = new FileReader();reader.onload = (function (file) {return function (e) {$('#cr_photoImg').attr('src', this.result);//这个就是base64的数据了cropper = initCropper(cropper);};})(e.target.files[0]);reader.readAsDataURL(e.target.files[0]);}// 初始化图片裁剪function initCropper(cropper) {cropper && cropper.destroy();cropper = new Cropper(document.getElementById('cr_photoImg'), {viewMode: 1,preview: '.photo_preview',minCropBoxWidth: 150,aspectRatio: 1 / 1,autoCropArea: 1});return cropper;}$('.cr_selectPhoto').on('click', function () {$('#fileInput').trigger("click");})$('.cr_savePhotoBtn').on('click', function () {if ($('#fileInput').val().length == 0) {alert('请选择图片');return false;}const blobMimeType = 'image/png';let croppedCanvas = cropper.getCroppedCanvas({width: 200,height: 200});let dataStr = croppedCanvas.toDataURL(blobMimeType, 0.9);// addSave(dataStr)//将图片的base64的数据保存到服务器});
</script>

图片裁剪cropper 示例相关推荐

图片裁剪 cropper.js 上传组件封装 vue
//HTML cropper.js 文档地址: https://github.com/fengyuanchen/cropperjs/blob/master/README.md <template ...
前端图片裁剪cropper.js
背景:我们在项目中常常都会有更换登陆人头像的需求,这个很简单直接上传一张图片展示就可以了,但是如果上传的图片需要剪裁成正方形的话就需要我们来做一些特殊的处理: 这里我们会用到一个图片剪裁插件:crop ...
js截取图片裁剪图片之cropper.js插件用法详解
js截取图片裁剪图片之cropper.js插件用法详解源码:https://github.com/fengyuanchen/cropper 引入+使用 <link href="/p ...
Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...
jQuery 缩放旋转裁剪图片 Image Cropper
A simple jQuery image cropping plugin. Demo cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持图片旋转, ...
Vue - 实现图片裁剪功能，并上传到服务器（内置第三方最优秀的裁剪图片组件，上传到服务器功能）干净整洁无 BUG 的示例源码与超详细的注释，兼容任意浏览器
前言您可以滑动到文章最底部,直接克隆完整示例 Gitee 仓库,与本文教程最终效果一致. 在项目开发中,您难免会遇到图片上传到服务器之前,用户可进行裁剪的需求, 在看了网上大部分教程后,代码都非常乱 ...
一个简单的 jQuery 图片裁剪插件----cropper
浏览器支持 Chrome (latest 2) Firefox (latest 2) Internet Explorer 8+ Opera (latest 2) Safari (latest 2) C ...
input file图片上传（使用OSS Javscrtipt 上传到服务器）以及图片裁剪（cropper.js）
一.图片上传 (1)使用 <input type="file" accept="image/*" name="file" @chang ...
Android第三方开源图片裁剪截取：cropper
Android第三方开源图片裁剪截取:cropper 很多app都需要裁剪截取图片作为头像.logo之类,而cropper是github上的一个针对Android平台的.第三方开源图片裁剪截取项 ...
利用cropper制作图片裁剪，且不失真
废话不多说,上代码; 先把css和js引入进来,如果是webpack项目可以自行npm下载 <link rel="stylesheet" type="text/cs ...

图片裁剪cropper 示例

效果：

代码示例：

图片裁剪cropper 示例相关推荐

最新文章

热门文章