// 将图片转换为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的更多相关文章

  1. 浅谈 Data URI 与 BASE 64 编码

    前言(废话):鼓捣 Stylish 的时候发现了这么个奇怪的代码行: Data:image/gif;BASE64,R0lGODlhEAAQAKEAAEKF9NPi/AAAAAAAACH5BAEAAAI ...

  2. C# base 64图片编码解码

    使用WinForm实现了图片base64编码解码的 效果图: 示例base 64编码字符串: /9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKD ...

  3. Base 64 编码

    原创地址:http://www.cnblogs.com/jfzhu/p/4020097.html 转载请注明出处 (一)Encoding VS. Encryption 很多人都以为编码(Encodin ...

  4. Base 64 & URL & blob & FileReader & createObjectURL

    Base 64 & URL & blob & FileReader & createObjectURL /** * let blob = item.getAsFile( ...

  5. base 64 & blob & image url

    base 64 & blob & image url base 64 image & e.clipboardData.items[1] https://codepen.io/x ...

  6. 快速掌握 Base 64 | 学 Java 密码系列

    Java 密码系列 - Java 和 JS Base 64 Base 64 不属于密码技术,仅是编码方式.但由于在 Java.JavaScript.区块链等出现的频率较高,故在本系列文章中首先分享 B ...

  7. base 64 编解码器

    base 64 编解码 1. base64的编码都是按字符串长度,以每3个8bit的字符为一组, 2. 然后针对每组.首先获取每一个字符的ASCII编码. 3. 然后将ASCII编码转换成8bit的二 ...

  8. Base 64 & decodeURIComponent

    Base 64 & decodeURIComponent js btoa() & atob() let obj = [{"key":"q",&q ...

  9. js/vue图片压缩

    js版 新建compressImage.js,内容如下: // 将base64转换为blob(有需要可加上,没需要可不加) function convertBase64UrlToBlob(urlDat ...

  10. Vue图片懒加载插件

    图片懒加载是一个很常用的功能,特别是一些电商平台,这对性能优化至关重要.今天就用vue来实现一个图片懒加载的插件. 这篇博客采用"三步走"战略--Vue.use().Vue.dir ...

随机推荐

  1. 红米手机刷 LineageOS (实操)

    参考:https://miuiver.com/how-to-flash-lineageos/ 实操机型:红米note8 1. 下载Android Platform-Tools 2. 下载对应机型的TW ...

  2. Hive数仓基础

    架构图: 组成:SQL语句到任务执行需要经过解释器,编译器,优化器,执行器 解释器:调用语法解释器和语义分析器将SQL语句转换成对应的可执行的java代码或业务代码 ​ 编译器:将对应的java代码转 ...

  3. 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 ...

  4. JavaWeb 之 Cookie

    0x01:为什么会有Cookies? 早期的互联网只是单纯的浏览信息,就像一个窗口一样,可以看但是没办法触摸到外面的风景,即是所谓的没有交互. 慢慢发展逐渐有了交互式Web,这里提一嘴HTTP无状态( ...

  5. Ubuntu docker安装、验证、卸载

    卸载Docker CE 卸载Docker CE软件包: sudo apt-get purge docker-ce 主机上的图像,容器,卷或自定义配置文件不会自动删除.要删除所有图像,容器和卷: sud ...

  6. 关于paddleocr2.6 布局分析的踩坑总结(一)

    8月24日paddleocr发布了2.6.0,之前使用过2.5版本的布局分析,整体比较好用.近期就尝试了一下paddleocr的新版本,记录一下尝鲜经历.2.6版本的公告中指出,布局分析模型缩小了95 ...

  7. kafak学习总结

    高可用 多副本机制: 主副本和从副本,从副本只负责同步主副本数据,只有主副本进行读写. 高并发 网络结构设计 多路复用 多selector -> 多线程-> 多队列 高性能 写 把数据先写 ...

  8. 一些JVM指令

    1.jps:查看本机java进程信息. 2 .jstack:打印线程的栈信息,制作线程dump文件. 3.jmap:打印内存映射,制作堆dump文件 4.jstat:性能监控工具 5.jhat:内存分 ...

  9. docker 部署mongodb 并建立用户和授权数据库

    docker pull mongo:4.4.8 (拉取镜像) docker run --name mongo -v /data/mongo-data:/data/db -p 27018:27017 - ...

  10. uniapp对接ChatGPT 简单实现对话功能

    最近很火的ChatGPT来了!我也是做了一个最最基础的模型,让大家更通俗易懂! 先看效果:  接下来直接上代码: <template> <view class="conte ...