vue 图片转base 64
// 将图片转换为Base64
imageUrlToBase64(img) {
// 一定要设置为let,不然图片不显示
let image = new Image();
// 解决跨域问题
image.setAttribute('crossOrigin', 'anonymous');
let imageUrl = img;
image.src = imageUrl;
// image.onload为异步加载
image.onload = () => {
this.getImage(image);
};
},
getImage(image) {
let canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
let context = canvas.getContext('2d');
context.drawImage(image, 0, 0, image.width, image.height);
let quality = 0.8;
// 这里的dataurl就是base64类型
let dataURL = canvas.toDataURL('image/jpeg', quality);
},
vue 图片转base 64的更多相关文章
- 浅谈 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 & URL & blob & FileReader & createObjectURL
Base 64 & URL & blob & FileReader & createObjectURL /** * let blob = item.getAsFile( ...
- base 64 & blob & image url
base 64 & blob & image url base 64 image & e.clipboardData.items[1] https://codepen.io/x ...
- 快速掌握 Base 64 | 学 Java 密码系列
Java 密码系列 - Java 和 JS Base 64 Base 64 不属于密码技术,仅是编码方式.但由于在 Java.JavaScript.区块链等出现的频率较高,故在本系列文章中首先分享 B ...
- 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 ...
- js/vue图片压缩
js版 新建compressImage.js,内容如下: // 将base64转换为blob(有需要可加上,没需要可不加) function convertBase64UrlToBlob(urlDat ...
- Vue图片懒加载插件
图片懒加载是一个很常用的功能,特别是一些电商平台,这对性能优化至关重要.今天就用vue来实现一个图片懒加载的插件. 这篇博客采用"三步走"战略--Vue.use().Vue.dir ...
随机推荐
- 红米手机刷 LineageOS (实操)
参考:https://miuiver.com/how-to-flash-lineageos/ 实操机型:红米note8 1. 下载Android Platform-Tools 2. 下载对应机型的TW ...
- Hive数仓基础
架构图: 组成:SQL语句到任务执行需要经过解释器,编译器,优化器,执行器 解释器:调用语法解释器和语义分析器将SQL语句转换成对应的可执行的java代码或业务代码 编译器:将对应的java代码转 ...
- Linux驱动、应用调试技巧
原文地址:https://hceng.cn/2019/04/08/Linux%E9%A9%B1%E5%8A%A8%E3%80%81%E5%BA%94%E7%94%A8%E8%B0%83%E8%AF%9 ...
- JavaWeb 之 Cookie
0x01:为什么会有Cookies? 早期的互联网只是单纯的浏览信息,就像一个窗口一样,可以看但是没办法触摸到外面的风景,即是所谓的没有交互. 慢慢发展逐渐有了交互式Web,这里提一嘴HTTP无状态( ...
- Ubuntu docker安装、验证、卸载
卸载Docker CE 卸载Docker CE软件包: sudo apt-get purge docker-ce 主机上的图像,容器,卷或自定义配置文件不会自动删除.要删除所有图像,容器和卷: sud ...
- 关于paddleocr2.6 布局分析的踩坑总结(一)
8月24日paddleocr发布了2.6.0,之前使用过2.5版本的布局分析,整体比较好用.近期就尝试了一下paddleocr的新版本,记录一下尝鲜经历.2.6版本的公告中指出,布局分析模型缩小了95 ...
- kafak学习总结
高可用 多副本机制: 主副本和从副本,从副本只负责同步主副本数据,只有主副本进行读写. 高并发 网络结构设计 多路复用 多selector -> 多线程-> 多队列 高性能 写 把数据先写 ...
- 一些JVM指令
1.jps:查看本机java进程信息. 2 .jstack:打印线程的栈信息,制作线程dump文件. 3.jmap:打印内存映射,制作堆dump文件 4.jstat:性能监控工具 5.jhat:内存分 ...
- docker 部署mongodb 并建立用户和授权数据库
docker pull mongo:4.4.8 (拉取镜像) docker run --name mongo -v /data/mongo-data:/data/db -p 27018:27017 - ...
- uniapp对接ChatGPT 简单实现对话功能
最近很火的ChatGPT来了!我也是做了一个最最基础的模型,让大家更通俗易懂! 先看效果: 接下来直接上代码: <template> <view class="conte ...