当前位置：网站首页>canvas上传图片base64-有裁剪功能-Jcrop.js
canvas上传图片base64-有裁剪功能-Jcrop.js
2022-07-26 10:24:00 【唐策】
图片实例
1.初始样子 
2.点击上传图片-弹出框 
3.可以设置是否-上传图片大小，limitImg = true 
4.可以设置是否-有裁剪图片大小条件，limitImg = true，可手动更改 
5.裁剪过大图片，可以进行比例缩小，到你需要的尺寸。（eg:实际裁剪过大，自动生成1400px,可配置） 
6.点击裁剪成功后canvas画图
var ctx = canvasNow.getContext(‘2d’);
ctx.clearRect(0, 0, canvasWidth, canvasHeight); 
部分代码实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/Jcrop.css">
<link rel="stylesheet" type="text/css" href="css/jquery.Jcrop.min.css">
</head>
<body>
<img class="upload-btn" width="135" src="css/default-thumbnail.png" alt="">
<div class="head-img-modal">
<div class="head-img-modal">
<div class="img-upload-box">
<div class="modal-title">
<span>图片剪切</span>
<img src="css/close-modal.png" class="close-modal">
</div>
<div class="img-edit-box">
<label>
<input type="file" name="" value="选择图片" class="file-hidden" onchange="showSelectedImages(this.files);" name="img" style="display:none">
<a href="javascript:void(0);" class="file-faker btn btn-default btn-sm">选择图片</a>
</label>
<div class="cut-img-box clearfix">
<div class="cut-box">
<img src="javascript:void(0);" id="cut-img">
</div>
<div class="show-img-box" style="display:none">
<div id="preview-pane">
<div class="preview-container">
<img src="javascript:void(0);" id="show-img" class="jcrop-preview">
</div>
</div>
</div>
</div>
<div class="cut-btn-box">
<a href="javascript:void(0);" class="cut-btn btn btn-default btn-sm">确认裁剪</a>
</div>
</div>
</div>
</div>
</div>
<canvas class="crop-canvas" style="display: none;"></canvas>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript" src="js/jquery.Jcrop.min.js"></script>
<script type="text/javascript"> $('.upload-btn').on('click', function () {
$('.head-img-modal').show(); }); $('.file-faker').on('click', function () {
$('.file-hidden').trigger('click'); }); // 关闭按钮 $('.close-modal').on('click', function () {
$('.head-img-modal').hide(); }) var jcrop_api; var limitW = 710,//上传图片最小宽度 limitH = 710,//上传图片最小高度 limitMaxW = 1420,//裁剪原图片最大宽度 limitImg = true,//是否需要添加图片限制。 imgW,//获取实际上传图片的尺寸 imgH; function showSelectedImages(files) {
createReader(files[0], function (w, h) {
imgW = w; imgH = h; // alert(w + ' '+ h); if (isImageByType(files[0].type)) { // 判断是否需要添加尺寸大小判断 if(limitImg){ // 判断上传图片尺寸 if(imgW >= limitW && imgH >= limitH){ var img = document.getElementById('cut-img'); var newImg = document.getElementById('show-img'); var jImg = document.querySelector('.jcrop-holder img'); img.src = window.URL.createObjectURL(files[0]); newImg.src = window.URL.createObjectURL(files[0]); isShowImage(img); } else { alert('请上传大于710*710尺寸的图片'); } }else{ var img = document.getElementById('cut-img'); var newImg = document.getElementById('show-img'); var jImg = document.querySelector('.jcrop-holder img'); img.src = window.URL.createObjectURL(files[0]); newImg.src = window.URL.createObjectURL(files[0]); isShowImage(img); } } else { alert('请上传图片'); } }); } createReader = function(file, whenReady) {
var reader = new FileReader; reader.onload = function (evt) {
var image = new Image(); image.onload = function () {
var width = this.width; var height = this.height; if (whenReady) whenReady(width, height); }; image.src = evt.target.result; }; reader.readAsDataURL(file); } // 判断上传的是否是图片类型 function isImageByType(fileType) {
return fileType.indexOf('image') < 0 ? false : true; } // 将图片展示出来在画布上 function isShowImage(img) {
if (jcrop_api) { jcrop_api.destroy(); $('#cut-img').css({
'width': 'auto', 'height': 'auto'}); jcrop_api = null; }; var boundx; var boundy; var $preview = $('#preview-pane'); var $pcnt = $('#preview-pane .preview-container'); var $pimg = $('#preview-pane .preview-container img'); var xsize = $pcnt.width(); $('#cut-img').Jcrop({ bgOpacity: 0.5, bgColor: 'black', addClass: 'jcrop-dark', aspectRatio: 1, //宽：高 onChange: updatePreview, onSelect: updatePreview, }, function () {
jcrop_api = this; jcrop_api.setSelect([50, 50, 50 + 150, 50 + 150]); jcrop_api.setOptions({ bgFade: true }); jcrop_api.ui.selection.addClass('jcrop-selection'); var bounds = this.getBounds(); boundx = bounds[0]; boundy = bounds[1]; }); function updatePreview(c) {
if (parseInt(c.w) > 0) { var rx = xsize / c.w; var ry = xsize / c.h; $pimg.css({ width: Math.round(rx * boundx) + 'px', height: Math.round(ry * boundy) + 'px', marginLeft: '-' + Math.round(rx * c.x) + 'px', marginTop: '-' + Math.round(ry * c.y) + 'px' }); } } } // 确认裁剪 $('.cut-btn').on('click', function () {
var originalHeight = $('.jcrop-holder').height(); var originalWidth = $('.jcrop-holder').width(); var bili = imgH/originalHeight; var canvasNow = $('.crop-canvas')[0]; var canvasWidth = $('.jcrop-selection').width(); var canvasHeight = $('.jcrop-selection').height(); var leftNum = $('.jcrop-selection').css('left').split('px')[0] * 1.0; var topNum = $('.jcrop-selection').css('top').split('px')[0] * 1.0; canvasNow.width = canvasWidth * bili; canvasNow.height = canvasHeight * bili; // 判断是否需要添加尺寸大小判断 if(limitImg){ if (canvasNow.width >= limitW * 2 && canvasNow.height >= limitH * 2) { var biliNOW = limitMaxW*bili/canvasNow.width;//获当图片大于1420，获取新的比例 canvasNow.width = limitMaxW; canvasNow.height = limitMaxW; var ctx = canvasNow.getContext('2d'); ctx.clearRect(0, 0, canvasWidth, canvasHeight); ctx.drawImage($('#show-img')[0], -leftNum * biliNOW, -topNum * biliNOW, originalWidth * biliNOW, originalHeight * biliNOW); var imgData = canvasNow.toDataURL('image/jpeg'); }else{ var ctx = canvasNow.getContext('2d'); ctx.clearRect(0, 0, canvasWidth, canvasHeight); ctx.drawImage($('#show-img')[0], -leftNum * bili, -topNum * bili, originalWidth * bili, originalHeight * bili); var imgData = canvasNow.toDataURL('image/jpeg'); } console.log(imgData); // 判断裁剪图片尺寸 if(canvasNow.width >= limitW && canvasNow.height >= limitH){ $('.head-img-modal').hide(); $('.upload-btn').attr('src',imgData); $('.cover_img').attr('value',imgData); }else{ alert('裁剪图片尺寸需大于710x710px') } }else{ var ctx = canvasNow.getContext('2d'); ctx.clearRect(0, 0, canvasWidth, canvasHeight); ctx.drawImage($('#show-img')[0], -leftNum * bili, -topNum * bili, originalWidth * bili, originalHeight * bili); var imgData = canvasNow.toDataURL('image/jpeg'); $('.head-img-modal').hide(); $('.upload-btn').attr('src',imgData); $('.cover_img').attr('value',imgData); } // alert(imgW + ' '+ imgH); }); </script>
</body>
</html>具体代码下载地址：https://download.csdn.net/download/qq_29132907/10649161；
边栏推荐
- 【Halcon视觉】仿射变换
- 【socket】三次握手是在listen中完成，accept只从完成连接的队列中拿出一个连接
- 数通基础-Telnet远程管理设备
- Prevent XSS attacks
- 详细解析js中的混合方式构造对象（构造加属性，原型加方法）
- Flask framework beginner-03-template
- Function template parameters (where are the function parameters)
- 【C＃语言】具名类型和匿名类型
- Deduct daily question 838 of a certain day
- 微信公众号发布提醒(微信公众号模板消息接口)
猜你喜欢
随机推荐
新建福厦铁路全线贯通 这将给福建沿海带来什么？
INSTALL_ FAILED_ SHARED_ USER_ Incompatible error resolution
【Halcon视觉】图像滤波
INSTALL_FAILED_SHARED_USER_INCOMPATIBLE错误解决方式
Yarn 'TSC' is not an internal or external command, nor is it a runnable program or batch file. The problem that the command cannot be found after installing the global package
Using undertow, Nacos offline logout delay after service stop
[Halcon vision] image gray change
Review of database -- 3. SQL language
AirTest
软件打不开了
数通基础-TCPIP参考模型
Learning about opencv (4)
Application of crosstab in SQL Server
Introduction to latex, EPS picture bounding box
Android greendao数据库的使用
Li Kou daily question 917
IEEE conference upload font problem
Cause: could't make a guess for solution
Okaleido生态核心权益OKA，尽在聚变Mining模式
Nacos custom service change subscription