base 64 & blob & image url
base 64 & blob & image url
base 64 image & e.clipboardData.items[1]
https://codepen.io/xgqfrms/full/xobamq
// 单聊贴图发送
let box = document.querySelector(`[data-input="text"]`);
box.addEventListener("paste", function (e) {
// log(`e =`, e);
// log(`e.clipboardData`, e.clipboardData);
// log(`e.clipboardData.types`, e.clipboardData.types);
// log(`e.clipboardData.items`, e.clipboardData.items);
// log(`e.clipboardData.items.length`, e.clipboardData.items.length);
// log(`e.clipboardData.items[0]`, e.clipboardData.items[0]);
// log(`e.clipboardData.items[1]`, e.clipboardData.items[1]);
if (e.clipboardData && e.clipboardData.types) {
if (e.clipboardData.items.length > 0) {
if (/^image\/\w+$/.test(e.clipboardData.items[1].type)) {
let blob = e.clipboardData.items[1].getAsFile();
// if (/^image\/\w+$/.test(e.clipboardData.items[0].type)) {
// let blob = e.clipboardData.items[0].getAsFile();
let url = window.URL.createObjectURL(blob);
privewImage(url);
// blob:null/2bc6b76b-7293-458d-bc8c-9d242e94a18e
let uid = conn.getUniqueId();
// 生成本地消息id
let msg = new WebIM.message("img", uid);
// 创建图片 img 消息
msg.set({
apiUrl: WebIM.config.apiURL,
file: {
data: blob,
url: url,
},
// to: "test",
to: "root",
// 接收消息对象
roomType: false,
// 单聊
onFileUploadError(err) {
log("Image Upload Error", err);
},
onFileUploadComplete(data) {
log("Image Upload Complete", data);
},
success(id) {
log("Image Upload Success", id);
alert(`图片发送成功!`);
},
});
conn.send(msg.body);
}
}
}
});
blob image & e.clipboardData.items[0]
https://codepen.io/xgqfrms/full/XLJPQj
// 单聊贴图发送
let box = document.querySelector(`[data-input="text"]`);
box.addEventListener("paste", function (e) {
// log(`e =`, e);
// log(`e.clipboardData`, e.clipboardData);
// log(`e.clipboardData.types`, e.clipboardData.types);
// log(`e.clipboardData.items`, e.clipboardData.items);
// log(`e.clipboardData.items.length`, e.clipboardData.items.length);
// log(`e.clipboardData.items[0]`, e.clipboardData.items[0]);
// log(`e.clipboardData.items[1]`, e.clipboardData.items[1]);
if (e.clipboardData && e.clipboardData.types) {
if (e.clipboardData.items.length > 0) {
if (/^image\/\w+$/.test(e.clipboardData.items[0].type)) {
let blob = e.clipboardData.items[0].getAsFile();
let url = window.URL.createObjectURL(blob);
privewImage(url);
// blob:null/2bc6b76b-7293-458d-bc8c-9d242e94a18e
let uid = conn.getUniqueId();
// 生成本地消息id
let msg = new WebIM.message("img", uid);
// 创建图片 img 消息
msg.set({
apiUrl: WebIM.config.apiURL,
file: {
data: blob,
url: url,
},
// to: "test",
to: "root",
// 接收消息对象
roomType: false,
// 单聊
onFileUploadError(err) {
log("Image Upload Error", err);
},
onFileUploadComplete(data) {
log("Image Upload Complete", data);
},
success(id) {
log("Image Upload Success", id);
alert(`图片发送成功!`);
},
});
conn.send(msg.body);
}
}
}
});
bug
solution
all in one
// 单聊贴图发送
let box = document.querySelector(`[data-input="text"]`);
box.addEventListener("paste", function (e) {
// log(`e =`, e);
// log(`e.clipboardData`, e.clipboardData);
// log(`e.clipboardData.types`, e.clipboardData.types);
// log(`e.clipboardData.items`, e.clipboardData.items);
// log(`e.clipboardData.items.length`, e.clipboardData.items.length);
// log(`e.clipboardData.items[0]`, e.clipboardData.items[0]);
// log(`e.clipboardData.items[1]`, e.clipboardData.items[1]);
if (e.clipboardData && e.clipboardData.types) {
if (e.clipboardData.items.length > 0) {
// if (/^image\/\w+$/.test(e.clipboardData.items[0].type)) {
// let blob = e.clipboardData.items[0].getAsFile();
// if (/^image\/\w+$/.test(e.clipboardData.items[1].type)) {
// let blob = e.clipboardData.items[1].getAsFile();
if (/^image\/\w+$/.test(e.clipboardData.items[0].type) || /^image\/\w+$/.test(e.clipboardData.items[1].type)) {
let blob = e.clipboardData.items[0].getAsFile() || e.clipboardData.items[1].getAsFile();
let url = window.URL.createObjectURL(blob);
privewImage(url);
// blob:null/2bc6b76b-7293-458d-bc8c-9d242e94a18e
let uid = conn.getUniqueId();
// 生成本地消息id
let msg = new WebIM.message("img", uid);
// 创建图片 img 消息
msg.set({
apiUrl: WebIM.config.apiURL,
file: {
data: blob,
url: url,
},
// to: "test",
to: "root",
// 接收消息对象
roomType: false,
// 单聊
onFileUploadError(err) {
log("Image Upload Error", err);
},
onFileUploadComplete(data) {
log("Image Upload Complete", data);
},
success(id) {
log("Image Upload Success", id);
alert(`图片发送成功!`);
},
});
conn.send(msg.body);
}
}
}
});
base 64 & blob & image url的更多相关文章
- Base 64 & URL & blob & FileReader & createObjectURL
Base 64 & URL & blob & FileReader & createObjectURL /** * let blob = item.getAsFile( ...
- 浅谈 Data URI 与 BASE 64 编码
前言(废话):鼓捣 Stylish 的时候发现了这么个奇怪的代码行: Data:image/gif;BASE64,R0lGODlhEAAQAKEAAEKF9NPi/AAAAAAAACH5BAEAAAI ...
- C# base 64图片编码解码
使用WinForm实现了图片base64编码解码的 效果图: 示例base 64编码字符串: /9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKD ...
- Base 64 编码
原创地址:http://www.cnblogs.com/jfzhu/p/4020097.html 转载请注明出处 (一)Encoding VS. Encryption 很多人都以为编码(Encodin ...
- base 64 编解码器
base 64 编解码 1. base64的编码都是按字符串长度,以每3个8bit的字符为一组, 2. 然后针对每组.首先获取每一个字符的ASCII编码. 3. 然后将ASCII编码转换成8bit的二 ...
- Base 64 & decodeURIComponent
Base 64 & decodeURIComponent js btoa() & atob() let obj = [{"key":"q",&q ...
- 关于BASE 24 ,BASE 64原理以及实现程序
关于BASE 24 ,BASE 64原理以及实现程序 来源 https://wangye.org/blog/archives/5/ 可能很多人听说过Base64编码,很少有人听说过Base24编码,B ...
- 快速掌握 Base 64 | 学 Java 密码系列
Java 密码系列 - Java 和 JS Base 64 Base 64 不属于密码技术,仅是编码方式.但由于在 Java.JavaScript.区块链等出现的频率较高,故在本系列文章中首先分享 B ...
- base 64 bug & encodeURIComponent
base64 bug & encodeURIComponent window.btoa("jëh²H¶�%28"); // "autoskiptoclMjiu&q ...
随机推荐
- DP中的树上边/点覆盖问题
目录 树上边覆盖问题 例:luoguP2016 战略游戏 简述题意: Solution: Code 树上点覆盖问题 简述题意 Solution Code: 树上边覆盖问题 例:luoguP2016 战 ...
- 图文并茂-超详解 CS:APP: Lab3-Attack(附带栈帧分析)
CS:APP:Lab3-ATTACK 0. 环境要求 关于环境已经在lab1里配置过了.lab1的连接如下 实验的下载地址如下 说明文档如下 http://csapp.cs.cmu.edu/3e/at ...
- navicat连接阿里云mysql数据库服务器遇到的1130等相关问题
最近搭建自己的博客网站的时候使用了阿里云的云服务器ESC,搭建了一个mysql数据库,在windows下使用navicat连接mysql的时候,总是连接不上,出现了1130的问题等等错误信息. 下面将 ...
- Kubernetes --(k8s)入门
k8s 简介: 什么是k8s? Kubernetes (k8s)是Google开源的容器集群管理系统(谷歌内部:Borg).在Docker技术基础上,为容器化的应用提供部署运行.资源调度.服务发现和动 ...
- ICMP&&PING
ICMP 1.定位:互联网控制报文协议(Internet Control Message Protocol),是TCP/IP协议族的一个子协议,位于网络层.它被IP用于提供许多不同的服务.ICMP是一 ...
- python工业互联网应用实战5—Django Admin 编辑界面和操作
1.1. 编辑界面 默认任务的编辑界面,对于model属性包含"choices"会自动显示下来列表供选择,"datetime"数据类型也默认提供时间选择组件,如 ...
- CF 1326 D. Prefix-Suffix Palindrome
D. Prefix-Suffix Palindrome 题意 给一个字符串 s,求一个字符串 t,t 由 s 的某个前缀以及某个后缀拼接而成,且 t 是回文串,长度不能超过 s.输出最长的 t 分析 ...
- Codeforces Round #651 (Div. 2) B. GCD Compression(数论)
题目链接:https://codeforces.com/contest/1370/problem/B 题意 给出 $2n$ 个数,选出 $2n - 2$ 个数,使得它们的 $gcd > 1$ . ...
- ACdream1414 Geometry Problem
Problem Description Peter is studying in the third grade of elementary school. His teacher of ...
- 功能按钮发post请求 参数放入body中
1.功能按钮事件参数 queryBody_ids:{data.ids} 前端会生成下划线后面的编码ids,并替换{data.ids} 2.后端建参数model后端参数可以只包含前端返回的部分参数 [D ...