使用canvas压缩图片

使用canvas压缩图片，图片不容易失真变形。

1.首先在js文件写入


/** 图片压缩，默认同比例压缩*  @param {Object} fileObj*  图片对象*  回调函数有一个参数，base64的字符串数据*/
export function compress(fileObj, callback) {try {const image = new Image()image.src = URL.createObjectURL(fileObj)image.onload = function () {const that = this// 默认按比例压缩let w = that.widthlet h = that.heightconst scale = w / hw = fileObj.width || wh = fileObj.height || (w / scale)let quality = 0.7 // 默认图片质量为0.7// 生成canvasconst canvas = document.createElement('canvas')const ctx = canvas.getContext('2d')// 创建属性节点const anw = document.createAttribute('width')anw.nodeValue = wconst anh = document.createAttribute('height')anh.nodeValue = hcanvas.setAttributeNode(anw)canvas.setAttributeNode(anh)ctx.drawImage(that, 0, 0, w, h)// 图像质量if (fileObj.quality && fileObj.quality <= 1 && fileObj.quality > 0) {quality = fileObj.quality}// quality值越小，所绘制出的图像越模糊const data = canvas.toDataURL('image/jpeg', quality)// 压缩完成执行回调const newFile = convertBase64UrlToBlob(data)callback(newFile)}} catch (e) {}
}

2.在自定义公共组件Global.vue中引入创建全局变量

<script>
import { getToken } from "@/utils/auth";
import { compress } from "@/utils/index";
const fileUrl = "";
const token = getToken();
const myHeaders = { token: token };
export default {fileUrl, //附件地址myHeaders, //element-ui上传带tokencompress //压缩图片函数
};
</script>

3.在main.js，注册全局文件

// 定义全局 变量
import global_ from '@/components/Global/Global.vue'//引用文件
Vue.prototype.GLOBAL = global_//挂载到Vue实例上面

4.在文件中使用

 fileChangePlans(file, fileList) {this.$refs.uploadPrice.clearFiles();let _this = this;let obj = {imgUrl: "",name: ""};const testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);const isJpgOrPng =testmsg === "jpg" ||testmsg === "JPG" ||testmsg === "png" ||testmsg === "PNG" ||testmsg === "GIF" ||testmsg === "gif";let fileListData = [];for (let x = 0; x < fileList.length; x++) {let item1 = fileList[x];if (isJpgOrPng) {// 图片才压缩this.GLOBAL.compress(item1.raw, async function(val) {let newfile = new window.File([val], file.name, {type: file.type});newfile.uid = file.uid;fileListData.push(newfile);const formData = new FormData();formData.append(`img`, fileListData[0]);await img(formData).then(res => {_this.$set(_this.dailyFinishFiles, "imgUrl", res.data.data);});setTimeout(() => {_this.stats = true;}, 100);});var file = item1.raw;obj.name = item1.name;var reader = new FileReader();reader.onload = function(e) {// 转base64obj.imgUrl = e.target.result;};reader.readAsDataURL(file);} else {this.$message({showClose: true,message: "请上传图片",type: "error"});}}},

使用canvas压缩图片相关推荐

android h5 多图上传源码,JS移动端/H5同时选择多张图片上传并使用canvas压缩图片...
最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...
JavaScript 使用canvas压缩图片
压缩思路 JS 的图片压缩,一般是需要用到 Canvas 的绘图能力,通过调整图片的分辨率或者绘图质量来达到图片压缩的效果. 实现过程 (1)获取上传 Input 中的图片对象 File: (2)将图 ...
canvas压缩图片或者进行视频抓拍
最近在项目中遇到一个需要抓拍正在播放的视频中的图片,就像截图一样进行实时抓拍,并且使用了base64进行上传,要求图片不能大于2M. 先上代码 public captureVideo(id) {//获 ...
canvas压缩图片的秘密
开篇首先明确canvas只适合压缩大的图片,图片size过小并不能有什么用处.那么为什么size过小canvas并不能压缩呢如果不压缩质量,经过canvas的图片变大了图片在经过img标签的时候 ...
使用html5+的plus调起相机拍照，使用canvas压缩图片，转成base64传到后台
html代码: <div class="form-com door"><label for="">门头照:</label>& ...
canvas 压缩图片上传
问题:前端开发过程中难免会将数据提交到后台,但若是提交的数据过大,特别上传图片这类需求,如果不对上传的图片进行压缩处理,就难免会出现请求时间过长的情况,对于用户体验肯定就不是太友好,那么这时候该如何将 ...
前台图片Canvas压缩上传小结
需求来源:之前有个提交审核表单的业务,表单中含有大量附件图片,大约有20多张吧,为了省事,采用的同步上传,一次需要上传很多照片,本来单张图片限制为200KB,这样子总图片大小约为5MB左右,想想也可以 ...
图片上传时用Canvas 压缩和加水印
用菜鸟教程模拟的菜鸟对应链接 https://www.runoob.com/try/try-cdnjs.php?filename=tryhtml5_canvas_tut_img <!DOCTY ...
十分钟教会你原生JS压缩图片，极其精简版
十分钟教会你原生JS压缩图片,极其精简版原文链接:https://blog.csdn.net/yasha97/article/details/83629510 (一)实现思路先通过input标签获 ...
前端实现压缩图片的功能（vue-element）
前言: 随着现在手机像素,拍照功能越来越好,随之而来的是本地图片越来越大,那么如何更好的将本地图片上传到后端接口呢?这是后台管理系统常见的场景和头疼的问题,这里分享下个人的方法. 实现效果: 如下图所 ...

使用canvas压缩图片

使用canvas压缩图片相关推荐

最新文章

热门文章