Ваш выбор — делать это или не делать, но если вы этого не сделаете, у вас никогда не будет шанса.
предисловие
Прослушайте событие вставки из буфера обмена, прочитайте файл изображения в буфере обмена, преобразуйте его в base64 и отобразите его с помощью тега img. В это время изображение в буфере обмена может быть слишком большим, что приводит к низкой скорости загрузки. Далее я поделится с вами. Поделитесь, как сжать изображения base64. Позвольте мне показать вам окончательный результат:
Реализовать идеи
- Прослушивание событий вставки из буфера обмена
- Получите объект изображения в clipboardData из обратного вызова события и объявите переменную для получения объекта
- Загрузите объект изображения в ClipboardData, используя Reader.ReadasDataURL.
- Получите код изображения base64 в обратном вызове reader.onload
- Создайте объект изображения и назначьте код base64 изображения атрибуту src текущего объекта.
- Вызовите функцию onload объекта Image, чтобы получить информацию о ширине и высоте изображения.
- Объявите ширину и высоту холста как текущую ширину и высоту изображения, деленную на коэффициент масштабирования.
- Используйте метод 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);
});
- Реализовать функцию сжатия изображений 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");
}
}
}
Приведенный выше адрес кода github:chat-system
Адрес онлайн-опыта:chat-system
напиши в конце
- Если в статье есть ошибки, исправьте их в комментариях, если статья вам поможет, ставьте лайк и подписывайтесь 😊
- Эта статья была впервые опубликована на Наггетс, перепечатка без разрешения запрещена 💌