这次给大家带来html5联合canvas实现图片压缩，主要以代码的形式体现，下面就是实战案例，一起来看一下。
lianxi 名字： 上传： 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) })
需要注意的是后端需要加上header(“Access-Control-Allow-Origin:*”);以实现跨域
相关链接：
html5+canvas实现图片的压缩上传
HTML5 Canvas 实现本地压缩图片
立即学习“前端免费学习笔记（深入）”；
HTML5 canvas实现图片拉伸、压缩与裁剪
以上就是HTML5联合canvas实现图片压缩的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1545957.html
微信扫一扫 
支付宝扫一扫 
