照片格式转换

最新推荐文章于 2024-05-18 13:26:43 发布

前进的探索者

最新推荐文章于 2024-05-18 13:26:43 发布

阅读量129

点赞数

分类专栏： JavaScript 文章标签： javascript css html

本文链接：https://blog.csdn.net/b0303/article/details/124602124

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.wrap_info {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				margin-bottom: 20px;
			}

			.btn {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 80px;
				height: 30px;
				margin-right: 20px;
				border-radius: 5px;
				font-size: 12px;
				color: #fff;
				background: #0eaee2;
				cursor: pointer;
			}

			.download {
				text-decoration: none;
			}

			.select_img input {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: 1;
				opacity: 0;
				cursor: pointer;
			}

			.select_wrap {
				margin-right: 20px;
				width: 80px;
				height: 30px;
				padding: 0 5px;
				border-radius: 5px;
				border: 1px solid #ccc;
			}

			select {
				height: 100%;
				outline: none;
		 	border: none;
				background: transparent;
			}

			.image_name {
				min-width: 100px;
				margin-right: 20px;
			}

			.preview {
				margin: 5px 0;
				font-size: 14px;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="wrap_info">
				<div class="btn select_img">
					选择图片<input type="file" id="inputimg" />
				</div>
				<div class="image_name"></div>
				<div class="select_wrap">
					<select id="myselect">
						<option value="1">png格式</option>
						<option value="2">jpeg格式</option>
						<option value="3">webp格式</option>
					</select>
				</div>
				<div class="btn" id="change">转换格式</div>
				<a href="javascript:void(0)" class="btn download" id="download">下载图片</a>
			</div>
			<div class="preview">格式转换后的图片：</div>
			<img id="showImg" alt="这是图片" />
		</div>
		<script>
			// 格式转换
			document.getElementById('change').addEventListener('click', function() {
				getImg(function(image) {
					console.log('image', image)
					var can = imgToCanvas(image),
						showImg = document.getElementById('showImg')
					showImg.setAttribute('src', canvasToImg(can))
				})
			})
			// 把image 转换为 canvas对象
			function imgToCanvas(image) {
				var canvas = document.createElement('canvas')
				canvas.width = image.width
				canvas.height = image.height
				canvas.getContext('2d').drawImage(image, 0, 0)
				return canvas
			}
			// canvas转换为image
			function canvasToImg(canvas) {
				var array = ['image/png', 'image/jpeg', 'image/webp'],
					type = document.getElementById('myselect').value - 1
				var src = canvas.toDataURL(array[type])
				return src
			}
			// 获取图片信息
			function getImg(fn) {
				var imgFile = new FileReader()
				try {
					imgFile.onload = function(e) {
						console.log('获取图片信息', e)
						var image = new Image()
						image.src = e.target.result // base64数据
						image.onload = function() {
							fn(image)
						}
					}
					imgFile.readAsDataURL(document.getElementById('inputimg').files[0])
				} catch (e) {
					alert('请上传图片！' + e)
				}
			}
			// input change事件
			document.getElementById('inputimg').onchange = function uploadImg(e) {
		 	console.log('上传图片', e)
				let file = e.target.files || e.dataTransfer.files
				if (!file.length) {
					return
				}
				console.log(file[0])
				if (/^image/.test(file[0].type)) {
					document.querySelector('.image_name').innerHTML = file[0].name
				} else {
					alert('请上传正确图片格式!')
				}
			}
			// 点击下载图片
			document.getElementById('download').onclick = function downloadImg(e) {
				let url = document.getElementById('showImg').src
				if (url) {
					this.setAttribute('href', url)
					this.setAttribute('download', new Date().getTime())
				}
			}
		</script>
	</body>
</html>

只是增加了这几种格式。需要增加别的格式自己增加。

前进的探索者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
照片格式转换

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .wrap_info { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 20px; } .b.
复制链接

扫一扫