手机图片上传+裁切

Mh_ui

于 2020-01-19 15:36:22 发布

阅读量402

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/Mh_ui/article/details/104040905

版权

本文将详细介绍如何实现在手机端进行图片上传及后续的裁切操作，包括使用的技术栈、关键步骤和常见问题解决，帮助开发者打造更优质的移动端图片处理功能。

摘要由CSDN通过智能技术生成

/*自定义input file*/
.file {
    display: block;
	width: 47.6vw;
	height: 14.2vw;
	background: url('images/input_bg.png') no-repeat center top;
	background-size: 100% 100%;
	overflow: hidden;
	text-decoration: none;
	text-indent: 0;
	text-align: center;
	line-height: 14.2vw;
	font-size: 4.2vw;
	font-weight: 400;
	color: rgba(255,255,255,1);
	margin: 0 auto;
	position: relative;
}
.file input {
    width: 100%;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	left: 0;
	bottom: 0;
	opacity: 0;
}
/*预览*/
.preview-contain{
    display: none;
	position: absolute;
	background: black;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.pic-border{
	position: absolute;
	/*top: 42vw;*/
	top: 40vw;             
	left: 50%; 
	transform: translateX(-50%);
	width: 85.3vw;
	height: 64vw;	   	
}
#pic-border-visible{
    border: 0.5vw solid lightskyblue;
    overflow: hidden;
}
.pic-wrap{
    width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left:0;
	right: 0;
	bottom: 0;
	background: black;
}
.pic{
    position: absolute;
	top: 50%;
	left: 50%;
}
.btn{
    width: 30.2vw;
    height: 13vw;
	background: url(images/btn_bg.png) no-repeat center top;
	background-size: 100% 100%;
	line-height: 13vw;
	text-align: center;
	font-size: 3.8vw;
	font-weight: bold;
	color: rgba(247,246,251,1);
	margin: 0 auto;
}
.btn_cancel{
	position: absolute;
	top: 130vw;
	left: 15.6vw;
}
.btn_confirm{
	position: absolute;
	top: 130vw;
	right: 15.6vw;
}
.preview-shade{
	position: absolute;
	top: 0;
	left:0;
	width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    /*pointer-events:none ;*/
}

<a href="javascript:;" class="file">图片上传
    <input type="file" id="upload" accept="image/*" onchange="changeImg(this)"/>
</a>

<div class="preview-contain"&