用JS实现图片格式的转换

html代码：

    <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>

css代码：

<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>

JS代码：

    <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.widthcanvas.height = image.heightcanvas.getContext('2d').drawImage(image, 0, 0)return canvas}// canvas转换为imagefunction canvasToImg(canvas) {var array = ['image/png', 'image/jpeg', 'image/webp'],type = document.getElementById('myselect').value - 1var 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.filesif (!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').srcif (url) {this.setAttribute('href', url)this.setAttribute('download', new Date().getTime())}}</script>

后续会考虑在npm上开发一个图片格式转换的插件，敬请关注

用JS实现图片格式的转换相关推荐

python图片保存jpg、show变成bmp_Python 实现判断图片格式并转换,将转换的图像存到生成的文件夹中...
Python 实现判断图片格式并转换,将转换的图像存到生成的文件夹中我就废话不多说了,直接上代码吧! import Image from datetime import datetime impor ...
php图片转换软件,能能图片格式转换器支持主流图片格式批量转换,简单实用的图片转换软件...
今天给大家分享一个我平常用的能能图片格式转换器,这个能能图片格式转换器也是非常强大,集合所有图片格式,支持相互转换哦,能能图片格式转换器还有图片剪切,调整分辨率,添加水印等功能.在这里也推荐大家看一下 ...
图片格式怎么转换？推荐三种实用的转换方法
在日常办公中,小伙伴们会不会和我一样,经常会需要在网上找一些图片素材进行编辑.可是有时候找到的是WEBP格式的图片,有一些软件是没办法直接编辑的,只能先转为JPG格式才可以继续编辑.是不是有的小伙伴还 ...
【我的Android进阶之旅】推荐一款视频转换GIF图片格式的转换工具（Video to GIF）
一.背景最近想把一些Android Demo的运行效果图获取下来,但是一直使用真机进行调试,在电脑上不好截取一段gif动画.而之前使用模拟器的时候可以使用 GifCam 工具进行屏幕动画截取.Gif ...
【我的Android进阶之旅】推荐一款视频转换GIF图片格式的转换工具（Video to GIF）...
一.背景最近想把一些Android Demo的运行效果图获取下来,但是一直使用真机进行调试,在电脑上不好截取一段gif动画.而之前使用模拟器的时候可以使用 GifCam 工具进行屏幕动画截取.Gif ...
图片格式怎么转换jpg？jpg格式怎么转换？
在我们的日常生活中总是会遇到一些特殊的图片格式,这个时候我们就需要将图片转换为jpg格式,而最简单的方法就是使用jpg图片转换工具去处理.这里小编就来给大家介绍一个可以在线格式转换(https://w ...
通过PIL模块批量对图片格式进行转换（如jpg转png）
通过PIL模块批量对图片格式进行转换(如jpg转png) python的pil模块相当的智能,如果你需要对图片格式进行转换,比如jpg转换成tif.jpg转换成gif.png转换成jpg.只需要在保存 ...
图片格式怎么转换？这两招帮你快速修改图片格式
图片格式怎么转换?图片在我们平时的工作生活当中是非常常见的,一张小小的图片却并不简单,常见的格式就有jpg.png.webp.bmp.icon等,不同的情况下需要使用不同格式的图片,例如jpg是最广泛 ...
jfif转换jpg，jfif图片格式怎么转换jpg？
jfif转换jpg,jfif图片格式怎么转换jpg?谈到图片,我们就会想到图片的各种后缀格式,比如tiff.bmp.jfif.tga等.那每张图片在下载和保存时都拥有自己的存在格式,只是因为很多系统无 ...

用JS实现图片格式的转换

用JS实现图片格式的转换相关推荐

最新文章

热门文章