HTML5联合canvas实现图片压缩

零到壹度
发布: 2018-03-24 16:36:03
原创
1961人浏览过


这次给大家带来html5联合canvas实现图片压缩,主要以代码的形式体现,下面就是实战案例,一起来看一下。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>
 <title>lianxi </title>
 <style type="text/css">
    </style>
</head>
<body>
    <form>
 名字:<input type="text " name = 'username' id = 'username'/>
 上传:<input type="file" name = 'fileimage' id = 'fileimage' />
 </form>
 <button>button</button>
 <script>
 var file = document.querySelector('#fileimage')
 var username = document.querySelector('#username')
 var canvas = document.createElement('canvas');
 var span = document.createElement('span')
 var formData = new FormData()
 file.addEventListener('change',function() {
 //实现的原理的new formData()然后把这个formData 用ajax传进去
 span.innerHTML = '预览图加载中...'
 document.body.appendChild(span)
 console.log(file.files[0])
 username.value ? formData.append('username',username.value) : null;
 resize(file.files[0]);
 })
 //上传前的图片压缩
 function resize(file) {
 var reader = new FileReader()
 reader.readAsDataURL(file)
 var img = new Image()
 reader.onload = function (e) {
 // this.result就是图片的base64地址信息
 img.src = this.result;
 }
 
 var context = canvas.getContext('2d');
 var gif = document.createElement('img')
 
 // base64地址图片加载完毕后
 img.onload = function () {
 // 图片原始尺寸
 //定义画布的大小
 if (img.width > 300 || img.height > 300) {
 if (img.width > img.height) {
 canvas.width = 300
 canvas.height = img.height / img.width * 300
 }
 else {
 canvas.height = 300
 canvas.width = img.width / img.height * 300
 }
 }
 //从那里开始截取图片
 context.drawImage(img, 0, 0, canvas.width, canvas.height)
 /*第一个参数是创建的img对象;第二个参数是左上角坐标,后面两个是画布区域宽高*/
 //压缩后的图片base64 url
                /*canvas.toDataURL(mimeType, qualityArgument),mimeType 默认值是'image/jpeg';
                 * qualityArgument表示导出的图片质量,只要导出为jpg和webp格式的时候此参数才有效果,默认值是0.92*/
 //var newUrl = canvas.toDataURL('image/jpeg', 0.92);//base64 格式
 document.body.removeChild(span)
 document.querySelector('body').appendChild(canvas)
 };
 }
 //这是上传的
 document.querySelector('button').addEventListener('click',function(){
 canvas.toBlob(function(blob){
 var xhr = new XMLHttpRequest()
 formData.append('fileimage', blob,'002.webp')
 xhr.open('POST', 'test.php', true)//默认true 为异步
 //上传进度
 xhr.upload.addEventListener('progress',function (e) {
 console.log('上传进度为:'+ (e.loaded/e.total*100).toFixed(2)+'%')//多次出现
 // event.total是需要传输的总字节,event.loaded是已经传输的字节
 })
 xhr.upload.addEventListener('loadstart', function () {
 console.log('上传开始')//只出现一次
 })
 xhr.onreadystatechange = function () {
 if (xhr.readyState === 4) {
 if (xhr.status >= 200 && xhr.status <300 || xhr.status == 304) {
 console.log(JSON.parse(xhr.responseText))//成功后的返回值
 }
 else {
 console.log("Request was unsuccessful: " + xhr.status);
 } 
 }
 
 }
 //xhr.setRequestHeader("Content-type", "multipart/form-data");
 xhr.send(formData)
 }, 'image/webp',0.9)
 })
 </script>
</body>
</html>
登录后复制

需要注意的是后端需要加上header("Access-Control-Allow-Origin:*");以实现跨域

相关链接:

html5+canvas实现图片的压缩上传

HTML5 Canvas 实现本地压缩图片

立即学习前端免费学习笔记(深入)”;

HTML5 canvas实现图片拉伸、压缩与裁剪

以上就是HTML5联合canvas实现图片压缩的详细内容,更多请关注php中文网其它相关文章!

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号