首页 >> js开发 >> jsVue实现剪切板图片压缩功能js大全
jsVue实现剪切板图片压缩功能js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
监听剪切板粘贴事件，读取剪切板中的图片文件，转成base64通过img标签显示出来，此时可能会存在剪切板中图片过大，产生上传速度慢问题，接下来就跟大家分享下如何将base64图片进行压缩。先跟大家展示下最终实现的效果：实现思路
实现思路实现思路
监听剪切板粘贴事件
从事件回调中获取clipboardData中的image对象声明一个变量接收该对象
使用reader.readAsDataURL方法加载clipboardData中的image对象
在reader.onload回调中获取图片base64码
创建Image对象，赋值图片base64码至当前对象的src属性
调用Image对象的onload函数，获取图片宽高等信息
声明canvas画布宽高分别为当前图片宽高除以缩放比例的值
使用drawImage方法绘制当前图片
监听剪切板粘贴事件从事件回调中获取clipboardData中的image对象声明一个变量接收该对象使用reader.readAsDataURL方法加载clipboardData中的image对象在reader.onload回调中获取图片base64码创建Image对象，赋值图片base64码至当前对象的src属性调用Image对象的onload函数，获取图片宽高等信息声明canvas画布宽高分别为当前图片宽高除以缩放比例的值使用drawImage方法绘制当前图片实现过程
实现过程实现过程本篇文章主要讲解剪切板图片压缩的实现，效果图中如何将剪切板的图片插入可编辑div以及如何发送，请移步我的另一篇文章： Vue解析剪切板图片并实现发送功能监听剪切板粘贴事件: 实现图片粘贴
const that = this;
document.body.addEventListener('paste', function (event) {
that.$fullScreenLoading.show("读取图片中");
// 获取当前输入框内的文字
const oldText = that.$refs.msgInputContainer.textContent;
// 读取图片
let items = event.clipboardData && event.clipboardData.items;
let file = null;
if (items && items.length) {
// 检索剪切板items
for (let i = 0; i < items.length; i++) {
if (items[i].type.indexOf('image') !== -1) {
file = items[i].getAsFile();
break;
}
}
}
// 预览图片
const reader = new FileReader();
reader.onload = function(event) {
// 图片内容
const imgContent = event.target.result;
// 创建img标签
let img = document.createElement('img');//创建一个img
// 获取当前base64图片信息，计算当前图片宽高以及压缩比例
let imgObj = new Image();
let imgWidth = "";
let imgHeight = "";
let scale = 1;
imgObj.src = imgContent;
imgObj.onload = function() {
// 计算img宽高
if(this.width<400){
imgWidth = this.width;
imgHeight = this.height;
}else{
// 输入框图片显示缩小10倍
imgWidth = this.width/10;
imgHeight = this.height/10;
// 图片宽度大于1920，图片压缩5倍
if(this.width>1920){
// 真实比例缩小5倍
scale = 5;
}
}
// 设置可编辑div中图片宽高
img.width = imgWidth;
img.height = imgHeight;
// 压缩图片，渲染页面
that.compressPic(imgContent,scale,function (newBlob,newBase) {
// 删除可编辑div中的图片名称
that.$refs.msgInputContainer.textContent = oldText;
img.src = newBase; //设置链接
// 图片渲染
that.$refs.msgInputContainer.append(img);
that.$fullScreenLoading.hide();
});
};
};
reader.readAsDataURL(file);
});
const that = this;
document.body.addEventListener('paste', function (event) {
that.$fullScreenLoading.show("读取图片中");
// 获取当前输入框内的文字
const oldText = that.$refs.msgInputContainer.textContent;
// 读取图片
let items = event.clipboardData && event.clipboardData.items;
let file = null;
if (items && items.length) {
// 检索剪切板items
for (let i = 0; i < items.length; i++) {
if (items[i].type.indexOf('image') !== -1) {
file = items[i].getAsFile();
break;
}
}
}
// 预览图片
const reader = new FileReader();
reader.onload = function(event) {
// 图片内容
const imgContent = event.target.result;
// 创建img标签
let img = document.createElement('img');//创建一个img
// 获取当前base64图片信息，计算当前图片宽高以及压缩比例
let imgObj = new Image();
let imgWidth = "";
let imgHeight = "";
let scale = 1;
imgObj.src = imgContent;
imgObj.onload = function() {
// 计算img宽高
if(this.width<400){
imgWidth = this.width;
imgHeight = this.height;
}else{
// 输入框图片显示缩小10倍
imgWidth = this.width/10;
imgHeight = this.height/10;
// 图片宽度大于1920，图片压缩5倍
if(this.width>1920){
// 真实比例缩小5倍
scale = 5;
}
}
// 设置可编辑div中图片宽高
img.width = imgWidth;
img.height = imgHeight;
// 压缩图片，渲染页面
that.compressPic(imgContent,scale,function (newBlob,newBase) {
// 删除可编辑div中的图片名称
that.$refs.msgInputContainer.textContent = oldText;
img.src = newBase; //设置链接
// 图片渲染
that.$refs.msgInputContainer.append(img);
that.$fullScreenLoading.hide();
});
};
};
reader.readAsDataURL(file);
});
实现base64图片压缩函数
// 参数: base64地址,压缩比例，回调函数(返回压缩后图片的blob和base64)
compressPic:function(base64, scale, callback){
const that = this;
let _img = new Image();
_img.src = base64;
_img.onload = function() {
let _canvas = document.createElement("canvas");
let w = this.width / scale;
let h = this.height / scale;
_canvas.setAttribute("width", w);
_canvas.setAttribute("height", h);
_canvas.getContext("2d").drawImage(this, 0, 0, w, h);
let base64 = _canvas.toDataURL("image/jpeg");
// 当canvas对象的原型中没有toBlob方法的时候，手动添加该方法
if (!HTMLCanvasElement.prototype.toBlob) {
Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
value: function (callback, type, quality) {
let binStr = atob(this.toDataURL(type, quality).split(',')[1]),
len = binStr.length,
arr = new Uint8Array(len);
for (let i = 0; i < len; i++) {
arr[i] = binStr.charCodeAt(i);
}
callback(new Blob([arr], {type: type || 'image/png'}));
}
});
}else{
_canvas.toBlob(function(blob) {
if(blob.size > 1024*1024){
that.compressPic(base64, scale, callback);
}else{
callback(blob, base64);
}
}, "image/jpeg");
}
}
}
// 参数: base64地址,压缩比例，回调函数(返回压缩后图片的blob和base64)
compressPic:function(base64, scale, callback){
const that = this;
let _img = new Image();
_img.src = base64;
_img.onload = function() {
let _canvas = document.createElement("canvas");
let w = this.width / scale;
let h = this.height / scale;
_canvas.setAttribute("width", w);
_canvas.setAttribute("height", h);
_canvas.getContext("2d").drawImage(this, 0, 0, w, h);
let base64 = _canvas.toDataURL("image/jpeg");
// 当canvas对象的原型中没有toBlob方法的时候，手动添加该方法
if (!HTMLCanvasElement.prototype.toBlob) {
Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
value: function (callback, type, quality) {
let binStr = atob(this.toDataURL(type, quality).split(',')[1]),
len = binStr.length,
arr = new Uint8Array(len);
for (let i = 0; i < len; i++) {
arr[i] = binStr.charCodeAt(i);
}
callback(new Blob([arr], {type: type || 'image/png'}));
}
});
}else{
_canvas.toBlob(function(blob) {
if(blob.size > 1024*1024){
that.compressPic(base64, scale, callback);
}else{
callback(blob, base64);
}
}, "image/jpeg");
}
}
}上述代码github地址： chat-systemchat-system总结总结总结以上所述是小编给大家介绍的Vue实现剪切板图片压缩功能，希望对大家有所帮助！
实现思路实现思路
监听剪切板粘贴事件
从事件回调中获取clipboardData中的image对象声明一个变量接收该对象
使用reader.readAsDataURL方法加载clipboardData中的image对象
在reader.onload回调中获取图片base64码
创建Image对象，赋值图片base64码至当前对象的src属性
调用Image对象的onload函数，获取图片宽高等信息
声明canvas画布宽高分别为当前图片宽高除以缩放比例的值
使用drawImage方法绘制当前图片
监听剪切板粘贴事件从事件回调中获取clipboardData中的image对象声明一个变量接收该对象使用reader.readAsDataURL方法加载clipboardData中的image对象在reader.onload回调中获取图片base64码创建Image对象，赋值图片base64码至当前对象的src属性调用Image对象的onload函数，获取图片宽高等信息声明canvas画布宽高分别为当前图片宽高除以缩放比例的值使用drawImage方法绘制当前图片实现过程
实现过程实现过程本篇文章主要讲解剪切板图片压缩的实现，效果图中如何将剪切板的图片插入可编辑div以及如何发送，请移步我的另一篇文章： Vue解析剪切板图片并实现发送功能监听剪切板粘贴事件: 实现图片粘贴
const that = this;
document.body.addEventListener('paste', function (event) {
that.$fullScreenLoading.show("读取图片中");
// 获取当前输入框内的文字
const oldText = that.$refs.msgInputContainer.textContent;
// 读取图片
let items = event.clipboardData && event.clipboardData.items;
let file = null;
if (items && items.length) {
// 检索剪切板items
for (let i = 0; i < items.length; i++) {
if (items[i].type.indexOf('image') !== -1) {
file = items[i].getAsFile();
break;
}
}
}
// 预览图片
const reader = new FileReader();
reader.onload = function(event) {
// 图片内容
const imgContent = event.target.result;
// 创建img标签
let img = document.createElement('img');//创建一个img
// 获取当前base64图片信息，计算当前图片宽高以及压缩比例
let imgObj = new Image();
let imgWidth = "";
let imgHeight = "";
let scale = 1;
imgObj.src = imgContent;
imgObj.onload = function() {
// 计算img宽高
if(this.width<400){
imgWidth = this.width;
imgHeight = this.height;
}else{
// 输入框图片显示缩小10倍
imgWidth = this.width/10;
imgHeight = this.height/10;
// 图片宽度大于1920，图片压缩5倍
if(this.width>1920){
// 真实比例缩小5倍
scale = 5;
}
}
// 设置可编辑div中图片宽高
img.width = imgWidth;
img.height = imgHeight;
// 压缩图片，渲染页面
that.compressPic(imgContent,scale,function (newBlob,newBase) {
// 删除可编辑div中的图片名称
that.$refs.msgInputContainer.textContent = oldText;
img.src = newBase; //设置链接
// 图片渲染
that.$refs.msgInputContainer.append(img);
that.$fullScreenLoading.hide();
});
};
};
reader.readAsDataURL(file);
});
const that = this;
document.body.addEventListener('paste', function (event) {
that.$fullScreenLoading.show("读取图片中");
// 获取当前输入框内的文字
const oldText = that.$refs.msgInputContainer.textContent;
// 读取图片
let items = event.clipboardData && event.clipboardData.items;
let file = null;
if (items && items.length) {
// 检索剪切板items
for (let i = 0; i < items.length; i++) {
if (items[i].type.indexOf('image') !== -1) {
file = items[i].getAsFile();
break;
}
}
}
// 预览图片
const reader = new FileReader();
reader.onload = function(event) {
// 图片内容
const imgContent = event.target.result;
// 创建img标签
let img = document.createElement('img');//创建一个img
// 获取当前base64图片信息，计算当前图片宽高以及压缩比例
let imgObj = new Image();
let imgWidth = "";
let imgHeight = "";
let scale = 1;
imgObj.src = imgContent;
imgObj.onload = function() {
// 计算img宽高
if(this.width<400){
imgWidth = this.width;
imgHeight = this.height;
}else{
// 输入框图片显示缩小10倍
imgWidth = this.width/10;
imgHeight = this.height/10;
// 图片宽度大于1920，图片压缩5倍
if(this.width>1920){
// 真实比例缩小5倍
scale = 5;
}
}
// 设置可编辑div中图片宽高
img.width = imgWidth;
img.height = imgHeight;
// 压缩图片，渲染页面
that.compressPic(imgContent,scale,function (newBlob,newBase) {
// 删除可编辑div中的图片名称
that.$refs.msgInputContainer.textContent = oldText;
img.src = newBase; //设置链接
// 图片渲染
that.$refs.msgInputContainer.append(img);
that.$fullScreenLoading.hide();
});
};
};
reader.readAsDataURL(file);
});
实现base64图片压缩函数
// 参数: base64地址,压缩比例，回调函数(返回压缩后图片的blob和base64)
compressPic:function(base64, scale, callback){
const that = this;
let _img = new Image();
_img.src = base64;
_img.onload = function() {
let _canvas = document.createElement("canvas");
let w = this.width / scale;
let h = this.height / scale;
_canvas.setAttribute("width", w);
_canvas.setAttribute("height", h);
_canvas.getContext("2d").drawImage(this, 0, 0, w, h);
let base64 = _canvas.toDataURL("image/jpeg");
// 当canvas对象的原型中没有toBlob方法的时候，手动添加该方法
if (!HTMLCanvasElement.prototype.toBlob) {
Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
value: function (callback, type, quality) {
let binStr = atob(this.toDataURL(type, quality).split(',')[1]),
len = binStr.length,
arr = new Uint8Array(len);
for (let i = 0; i < len; i++) {
arr[i] = binStr.charCodeAt(i);
}
callback(new Blob([arr], {type: type || 'image/png'}));
}
});
}else{
_canvas.toBlob(function(blob) {
if(blob.size > 1024*1024){
that.compressPic(base64, scale, callback);
}else{
callback(blob, base64);
}
}, "image/jpeg");
}
}
}
// 参数: base64地址,压缩比例，回调函数(返回压缩后图片的blob和base64)
compressPic:function(base64, scale, callback){
const that = this;
let _img = new Image();
_img.src = base64;
_img.onload = function() {
let _canvas = document.createElement("canvas");
let w = this.width / scale;
let h = this.height / scale;
_canvas.setAttribute("width", w);
_canvas.setAttribute("height", h);
_canvas.getContext("2d").drawImage(this, 0, 0, w, h);
let base64 = _canvas.toDataURL("image/jpeg");
// 当canvas对象的原型中没有toBlob方法的时候，手动添加该方法
if (!HTMLCanvasElement.prototype.toBlob) {
Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
value: function (callback, type, quality) {
let binStr = atob(this.toDataURL(type, quality).split(',')[1]),
len = binStr.length,
arr = new Uint8Array(len);
for (let i = 0; i < len; i++) {
arr[i] = binStr.charCodeAt(i);
}
callback(new Blob([arr], {type: type || 'image/png'}));
}
});
}else{
_canvas.toBlob(function(blob) {
if(blob.size > 1024*1024){
that.compressPic(base64, scale, callback);
}else{
callback(blob, base64);
}
}, "image/jpeg");
}
}
}上述代码github地址： chat-systemchat-system总结总结总结以上所述是小编给大家介绍的Vue实现剪切板图片压缩功能，希望对大家有所帮助！
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
