html5 上传图片压缩,使用canvas压缩图片上传的方法示例

因为原型图跟插件ui有出入,所以自己写了一个方法。。

首先得有一个上传按钮。

入正题:

uploadFile:function(event){

let file = event.target.files[0]; //获取input的图片file值

let param = new FormData(); // 创建form对象

if(param.getAll('file')[0] == "undefined"){

return false //判断是不是空

}

let reader = new FileReader()

reader.readAsDataURL(file) //读取文件并将文件以URL的形式保存在resulr属性中 base64格式 ,,,网上文档好像规定了格式。。我就选了一个base64

reader.onload = function(e) { // 文件读取完成时触发

let result = e.target.result // base64格式图片地址

var image = new Image()

image.src = result // 设置image的地址为base64的地址

image.onload = function(){

var canvas = document.getElementById("canvas");

var context = canvas.getContext("2d");

canvas.width = image.width; // 设置canvas的画布宽度为图片宽度

canvas.height = image.height;

context.drawImage(image, 0, 0, image.width, image.height) // 在canvas上绘制图片

let dataUrl = canvas.toDataURL('image/jpeg', 0.001) //设置压缩比,可根据需要设置,设置过小会影响图片质量,dataUrl 为压缩后的图片资源,可将其上传到服务器

let tupian = _this.dataURLtoFile(dataUrl, file.name)

param.append('file', tupian);//对应后台接收图片名

//然后这里就可以写axios方法。去将这个param上传到后台

}

}

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
压缩HTML: 可以使用多种工具来压缩HTML,例如HTMLMinifier或UglifyJS等。这些工具可以删除不必要的空格、注释和其他字符,从而减小文件大小。以下是使用HTMLMinifier进行HTML压缩示例代码: ```javascript const html = '<html><head><title>Hello World</title></head><body><p>Hello, world!</p></body></html>'; const minifiedHtml = htmlMinifier.minify(html, { collapseWhitespace: true, removeComments: true, minifyCSS: true, minifyJS: true }); ``` 图片上传: 可以使用HTML5的File API来实现图片上传。以下是一个基本的示例: ```html <input type="file" id="upload-input"> <script> const input = document.getElementById('upload-input'); input.addEventListener('change', (e) => { const file = e.target.files[0]; const reader = new FileReader(); reader.onload = (event) => { const imageData = event.target.result; // 图片数据 // 将图片数据上传到服务器 }; reader.readAsDataURL(file); }); </script> ``` JS Canvas 修改图片尺寸和压缩大小: 可以使用canvas的API来修改图片的尺寸和压缩图片大小。以下是一个基本的示例: ```html <input type="file" id="upload-input"> <canvas id="canvas"></canvas> <script> const input = document.getElementById('upload-input'); const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); input.addEventListener('change', (e) => { const file = e.target.files[0]; const reader = new FileReader(); reader.onload = (event) => { const img = new Image(); img.onload = () => { // 计算缩小后的尺寸 const maxWidth = 300; const maxHeight = 300; let width = img.width; let height = img.height; if (width > height) { if (width > maxWidth) { height *= maxWidth / width; width = maxWidth; } } else { if (height > maxHeight) { width *= maxHeight / height; height = maxHeight; } } canvas.width = width; canvas.height = height; // 绘制缩小后的图片 context.drawImage(img, 0, 0, width, height); // 压缩图片 const quality = 0.7; const imageData = canvas.toDataURL('image/jpeg', quality); // 将图片数据上传到服务器 }; img.src = event.target.result; }; reader.readAsDataURL(file); }); </script> ``` 以上是一个基本的实现,具体的实现方式可以根据需求进行修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值