原生JS前端剪裁图片并下载以及传回Python后台

最新推荐文章于 2024-03-13 11:20:17 发布
最新推荐文章于 2024-03-13 11:20:17 发布
阅读量311 收藏 2
点赞数
分类专栏： 文件操作
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43320381/article/details/111909603
版权

网上有很多前端剪裁图片的demo，但是很多都需要各种插件，我的想法很简单，什么插件都不用，就原生的JS剪裁，然后传回Python后台行不行？找遍网络无觅处，看来还得靠自己。

本文得到了https://blog.csdn.net/qq_33466661/article/details/104899474的启发，在此向这位博主表示感谢！本文在上文的基础上实现了上面这位博主没有实现的功能，例如按需要调整剪裁框的大小，用Python后台接收前端的图片，传图片的同时也传其他参数等。

废话不多说，直接上代码。下面这段代码直接保存成html双击即可运行，只需这一个html文件就搞定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<style>
	.pic-cropper{
		border:1px solid #099;
		width: 600px;
		height: 1040px;
		margin:auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 20px;
	}

	#submit {
		margin-top: 10px;
		margin-bottom: 10px;
	}

	#export {
		margin-top: 10px;
		margin-bottom: 10px;
	}

	#result-canvas {
		border:1px solid #CCCCCC
	}

	#image-canvas {
		border:1px solid #CCCCCC

	}
	
	
	</style>
    <title>图片上传</title>
</head>
<body>
    <div style="text-align:center;padding:10px"><input id="img-input" type="file"/></div>
    <div class="pic-cropper">
        <input id="slider" type="range"/>
        <canvas id="image-canvas" width="500" height="500"></canvas>
        <button id="submit">预览</button>
        <canvas id="result-canvas" width="400" height="400"></canvas>
        <button id="export">确定</button>
    </div>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script>
var imgInput = document.getElementById("img-input");
var submitBtn = document.getElementById("submit");
var exportBtn = document.getElementById("export");
var mySlider = document.getElementById("slider");
var resultCanvas = document.getElementById("result-canvas");
var resultCxt = resultCanvas.getContext("2d");
var imgCanvas = document.getElementById("image-canvas");
var imgCxt = imgCanvas.getContext("2d");
var currentFactor = 1; //当前的放缩倍数
var minFactor = 1; //最小放缩倍数
var maxFactor = 1; //最大放缩倍数
var ori = document.getElementById("image-canvas").height;
var cut = document.getElementById("result-canvas").height;
console.log(ori);
console.log(cut);
var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');

// const imgUrl = "https://udi-official-website.oss-cn-shenzhen.aliyuncs.com/0/rc-upload-1584349106386-2";

imgInput.onchange = function() {
    console.log("======",imgInput.files[0]);
   var imgUrl =  URL.createObjectURL(imgInput.files[0]);
   imgCanvas.setAttribute('height', ori);
   resultCanvas.setAttribute('height',cut);
   drawMask();
   getImage(imgUrl);
    // var fileReader = new FileReader();
    // fileReader.readAsBinaryString(imgInput.files[0]);
}

//获取图像并画出来
getImage = function(imgUrl) {
    // img.src = './changtuxiang.jpg'
    img.src=imgUrl;
    img.onload = function() {
        calculateFactor();
        var originPosition = canvasOriginPosition();
        imgCxt.globalCompositeOperation = "destination-over";
        imgCxt.drawImage(img,originPosition.positionX,originPosition.positionY,img.width*currentFactor,img.height*currentFactor);
    }
}

//画蒙版
drawMask = function() {
    imgCxt.fillStyle = "rgba(0,0,0,0.5)";
    imgCxt.fillRect(0,0,ori,ori);
    imgCxt.fillStyle = "rgba(0,0,0,1)";
    imgCxt.globalCompositeOperation = "destination-out";
    imgCxt.fillRect(50,50,cut,cut);
}


//控制canvas拖动
var moving = false;
var lastmouseX = null;
var lastmouseY = null;

//上次移动结束,canvas画图的位置
var lastImgX = 0;
var lastImgY = 0;

imgCanvas.onmousedown=function(e) {
    // console.log("onmousedown",lastImgX,lastImgY);
    moving = true;
    lastmouseX = e.clientX;
    lastmouseY = e.clientY;
}

window.onmouseup = function(e) {
    if(moving === true) {
        moving = false;
        var newPosition = checkPosition(e.clientX - lastmouseX,e.clientY - lastmouseY)
        //每次移动完成都要改变一下上次图片绘制位置
        lastImgX = newPosition.X;
        lastImgY = newPosition.Y;
        // console.log("onmouseup",lastImgX,lastImgY);
    }
}



redrawImg = function(pX,pY) {
    //每次绘图前检查position是否没有超出区域
    var newPosition = checkPosition(pX,pY)
    imgCanvas.setAttribute('height', ori);
    drawMask();
    imgCxt.globalCompositeOperation = "destination-over";
    imgCxt.drawImage(img,newPosition.X,newPosition.Y,img.width*currentFactor,img.height*currentFactor);

}

checkPosition = function(pX,pY) {
    if(pX+lastImgX<=50&&pX+lastImgX>=cut+50-img.width*currentFactor&&pY+lastImgY<=50&&pY+lastImgY>=cut+50-img.height*currentFactor) {
        return ({"X":pX+lastImgX,"Y":pY+lastImgY});
    } else {
        var x_ = pX+lastImgX;
        var y_ = pY+lastImgY;
        if(pX+lastImgX>50) {
            x_ = 50;
        }
        if(pX+lastImgX<cut+50-img.width*currentFactor) {
            x_ = cut+50-img.width*currentFactor;
        }
        if(pY+lastImgY>50) {
            y_ = 50;
        }
        if(pY+lastImgY<cut+50-img.height*currentFactor) {
            y_ = cut+50-img.height*currentFactor;
        }
        return({"X":x_,"Y":y_});
    }
}

// 计算初始Factor
calculateFactor = function() {
    if(img.width<img.height) {
        minFactor = cut/img.width;//初始状态
        currentFactor = cut/img.width;
        maxFactor = cut*2/img.width;
    } else {
        minFactor = cut/img.height;
        currentFactor = cut/img.height;
        maxFactor = cut*2/img.height;
    }
    // console.log(currentFactor,minFactor,maxFactor);
    initSlider();
}

//计算初始画布位置
canvasOriginPosition = function() {
    calculateFactor();
    var positionX;
    var positionY;
    if(img.width<img.height) {
        positionX = 50;
        positionY = 50 - (img.height*currentFactor - cut) /2;
    } else {
        positionX = 50 - (img.width*currentFactor - cut) /2;
        positionY = 50;
    }
    lastImgX = positionX;
    lastImgY = positionY;
    return({"positionX":positionX,"positionY":positionY});
}

window.onmousemove = function(e) {
    if(moving) {
        pX=e.clientX - lastmouseX;
        pY=e.clientY - lastmouseY;
        // console.log(checkPosition(pX,pY));
        
        redrawImg(pX,pY);
    }
}

//初始滑动条
initSlider = function() {
    mySlider.min = minFactor;
    mySlider.max = maxFactor;
    // mySlider.value = currentFactor;
    mySlider.step = 0.01;
}


mySlider.oninput = function() {
    currentFactor = mySlider.value;
    //每次缩放完也都要修改图片的绘制位置
    // console.log("oninput",mySlider.value,lastImgX,lastImgY);
    redrawImg(0,0);
}

submitBtn.onclick = function() {
    // console.log("onclick!!",lastImgX,lastImgY);
    resultCxt.drawImage(img,lastImgX-50,lastImgY-50,img.width*currentFactor,img.height*currentFactor)
}

//下载图片
exportBtn.onclick = function() {
    var url = resultCanvas.toDataURL('image/png', 0.92);
    var resultLink = document.createElement("a");
    resultLink.download = "裁剪结果";
    resultLink.href = url;
    document.body.appendChild(resultLink);
    resultLink.click();
    resultLink.remove();
}



</script>
</body>
</html>

上面这段代码可以实现点击确定后即可在浏览器中下载剪裁好的照片。但是有人说我不想下载，我想传回Python后台怎么办？没问题，你只需要把下面这段下载图片的代码换成传回后台的代码即可。

//下载图片
exportBtn.onclick = function() {
    var url = resultCanvas.toDataURL('image/png', 0.92);
    var resultLink = document.createElement("a");
    resultLink.download = "裁剪结果";
    resultLink.href = url;
    document.body.appendChild(resultLink);
    resultLink.click();
    resultLink.remove();
}

换成：

//上传到服务器
exportBtn.onclick = function() {
    var url = resultCanvas.toDataURL('image/jpg', 0.92);
	var arr = url.split(',');
	var mime = arr[0].match(/:(.*?);/)[1];
	var bstr = atob(arr[1]);
	var n = bstr.length;
	var u8arr = new Uint8Array(n);
	while(n--){
		u8arr[n] = bstr.charCodeAt(n);
	}
	var obj = new Blob([u8arr], {type:mime});
	var fd = new FormData();
	fd.append("upfile", obj,"image.jpg");
	console.log(typeof(fd));
	$.ajax({
		url: "/huichuan/",
		type: "POST",
		processData: false,
		contentType: false,
		data: fd,
		success: function (response) {
			console.log(response);
		}
	})
}

Python后台用flask实现的，代码是：

@app.route('/huichuan/',methods=['POST','GET'])
def huichuan():
    imgData = request.files.get('upfile')
    imgData.save('./static/images/剪裁.jpg')
    return "成功回传了！"

另外，如果你想在传图片的同时也传各种文本参数怎么办呢？没问题，上面那段再换成这段即可。

//上传到服务器并带参数
exportBtn.onclick = function() {
	var xuexiao = "清华大学"
	var zhuanye = "计算机科学"
    var url = resultCanvas.toDataURL('image/jpg', 0.92);
	var arr = url.split(',');
	var mime = arr[0].match(/:(.*?);/)[1];
	var bstr = atob(arr[1]);
	var n = bstr.length;
	var u8arr = new Uint8Array(n);
	while(n--){
		u8arr[n] = bstr.charCodeAt(n);
	}
	var obj = new Blob([u8arr], {type:mime});
	console.log(obj.size);
	var fd = new FormData();
	fd.append("upfile", obj,"image.jpg");
	fd.append("xuexiao", xuexiao);
	fd.append("zhuanye", zhuanye);
	$.ajax({
		url: "/huichuan/",
		type: "POST",
		processData: false,
		contentType: false,
		data: fd,
		success: function (response) {
			console.log(response);
		}
	})
}

相应地，加上其他文本参数后，Python后台的代码为：

@app.route('/huichuan/',methods=['POST','GET'])
def guanguan6():
    imgData = request.files.get('upfile')
    imgData.save('./static/images/剪裁.jpg')
    item={}
    item["xuexiao"] = request.form.get("xuexiao")
    item["zhuanye"] = request.form.get("zhuanye")
    print(item)
    return "成功"

简洁有效的代码讨人喜欢！

自塾
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于原生JS实现图片裁剪
10-21
要进行图片编辑，最重要要能够对图片进行裁剪。主要的实现分成两部分，一部分是前端利用js进行裁剪区域选择，第二部分是利用PHP进行后台处理。现在就跟大家分享一下。
js实现复制图片到剪切板&下载图片
amyleeYMY的博客
08-12 7521
完整需求是这样的：生成一个二维码，然后提供复制和下载按钮。如果你是页面上已有一个图片，可以直接跳过前面的部分。 生成二维码，可以用qrcode。 http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js github地址：https://github.com/davidshimjs/qrcodejs $('#code').qr...
前端传图片到python然后再存到七牛云
beginingc的博客
03-30 525
在网站开发中经常会遇到图片的上传和存储，最多的方案是图片存到服务器，然后数据库存地址，点开某一个页面时通过数据库的地址渲染到前端，但数据量大或者服务器吃力的情况下，图片渲染会很慢，所以最好的办法是选择云存储，以七牛云为例： 首先是前端代码（就简单来了，直接两个按钮怼上去） ```javascript <!DOCTYPE html> <html lang="en"> &lt...
JS 实现图片直接下载
qq_16934453的专栏
09-01 433
转载地址：http://blog.csdn.net/awinliu/article/details/9401083
原生js从零实现图片裁切
brokenkay的博客
08-12 2479
效果图 在我的上一篇文章已经介绍过如何实现图片压缩,本篇文章主要讲解在此基础上单独实现的图片裁剪功能. 点击选择文件上传一张图片,点击裁切时会出现裁剪框,移动或拉伸裁剪框会在下方生成裁剪后的图片.点击下拉框选择裁剪图的压缩比例.最终点击生成就可以将裁剪压缩后的图片下载到本地. githup完整代码地址 HTML结构 对应页面图 ...
原生JS前端框架SYSUI后台管理系统页面基本事例级文档详细配置说明+多种插件
01-21
使用原生JS代码开发一个前端框架，框架名称SYSUI，纯原生js开发，不使用任何第三方库。SYSUI本身支持网站模板界面编辑开发，也支持配置后台系统界面，是个多用途的框架。 使用SYSUI开发一个后台管理系统界面，支持...
Vue.js 3.0企业级管理后台源码（前端）
03-05
Vue.js 3.0 是一个重要的前端框架更新，它带来了许多性能优化和新特性，使得构建企业级管理后台更加高效和便捷。这个源码包包含了构建一个基于Vue 3.0的企业级管理后台所需的全部前端资源。让我们逐一解析每个文件的...
基于原生JavaScript的新闻发布门户及后台管理系统设计源码
最新发布
04-09
该系统是一个简单的新闻发布门户及后台管理系统，采用纯原生JavaScript编写，BootStrap框架进行网页布局，并使用echart绘制可视化图表，还采用lodash实现某些功能等。系统界面设计简洁、易于扩展，适合用于各种需要...
前端原生js实现MD5加密
08-28
前端原生js实现MD5加密
JavaScript-实现图片的下载(本地图片，远程图片，多个下载)
qq_54140719的博客
11-18 4561
实现图片的下载(本地图片，远程图片，多个下载)。主要通过标签来实现，将要下载的文件链接设置为href属性，将文件名设置为download属性，然后模拟点击这个链接即可触发下载。
前端每日一练：使用 JavaScript 下载图片并保存到本地的方法详解
SAXX2的博客
03-13 4256
前端每日一练：实现下载图片功能​。
JS画板图片上传到服务器Python
ChinaAI小童鞋
04-19 784
上次实验了图片上传方式把客户端图片保存到服务器的方法 这次经过实验实现了画板图片直接上传到服务器并保存的方法 只要验证了几个概念 js端：base64传送，json传送，XMLHttpRequest，$.ajax( python后端 接受request.get_json request.get_data() 言归正传 环境：mac python3，js chrome浏览器 ...
简单实现图片上传并保存html+flask(顺便解决跨域问题)
遇到问题写下来，为了以后方便查啊～
09-25 666
废话不多说，直接上代码 1、html文件内容 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="./jquery.min.js"></script> <script src="./jquery.form.js"&gt...
flask框架从html获取图片并保存到项目文件夹
qq_44197482的博客
04-13 1764
Python-flask框架接受html界面输入的图片文件，图片保存在项目中，图片路径写入txt 随笔记录防止后面用到找不到资源 <form action="/addteacher" method="post" enctype="multipart/form-data"> enctype选用multipart/form-data否则报错 图片名采用时间戳+随机数写法，保证不重名 读入了两张图片，所以代码看着重复的地方可以砍一半 basedir = os.path.abspath(os.pat
Flask保存图片与展示
zzh0224的博客
06-15 1997
配置项 为了方便的图片的保存与展示，可以在 配置文件中，指明 图片资源的路径 import os ​ ​ class Config(object): DEBUG = True SQLALCHEMY_DATABASE_URI = 'mysql://root:mysql@127.0.0.1:3306/day08' SQLALCHEMY_TRACK_MODIFICATIONS = False ​ # 构建项目所在的 绝对路径，也就是 day08 的绝对路径 BASE_D
Flask实现图片的上传、下载及展示
热门推荐
Java知音
05-17 5万+
用Flask处理图片非常容易，这一篇学习一下图片的上传、下载及展示。还是以实例代码演示为主。 首先，实现一个简单的上传（过程中未做任何处理，只是为了演示） 点击选择图片，输入李四： HTML代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
js裁剪图片-- cropper.js使用细节，及完整的DEMO
githubcurry
05-10 1041
怕大家不信，先看效果图： 打开的界面 可以缩小 生成图片，并可以下载（canvas） 4.可以生成小图（自定义大小） 注意，这些静态图片和js，css文件都可以下载，如果不想浪费积分，也可以私信我，我发给你！！！ main.js cropper.js cropper.css main.css 完整代码如下： （由于代码太多，所以cropper详细操作在下一篇博客，这个是占位符，发出来下一篇之后就会添上链接！） <html lang="en"> <head> &l
58行html/js代码实现图片裁剪并保存功能
易查薪
03-17 420
58行html/js代码实现图片裁剪功能
base64图片转换与下载(原生js实现下载至本地)
laizhenghua的博客
05-14 5694
使用base64编码传输图片文件，在实际开发中也比较常见。在整个网站如果图片足够小复用性很高并且基本不会被更新（例如网站的logo）我们就可以考虑将图片转为base64编码
原生js前端框架加载图片慢是什么原因
05-11
原生JS前端框架加载图片慢有多种原因，以下是可能导致图片加载慢的原因： 1. 图片文件过大：如果图片文件过大，将导致加载时间变长。可以通过压缩图片来减小文件大小，或者使用WebP等格式来减小图片文件的大小。 2...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值