// 将图片转换为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. 溢出标志位OF与进位标志位CF判断

    1.OF与CF概述 OF(Overflow Flag,溢出标志位):有符号数之间加减运算的溢出标志 CF(Carry Flag,进位标志位):无符号数之间加减运算的溢出标志 快速判断(加法)(减法可转 ...

  2. K8存储之ConfigMap、Secret

    ConfigMap ConfigMap是一种API对象,用来将非加密数据保存到键值对中.可以用作环境变量.命令行参数或者存储卷中的配置文件. ConfigMap供容器使用的典型用法如下: 生成为容器内 ...

  3. django-drf知识点梳理

  4. Oracle 查看表空间使用率

    SELECT Upper(F.TABLESPACE_NAME) "TablespaceName", D.TOT_GROOTTE_MB "Total(M)", D ...

  5. docker容器SSH服务自启动

    使用ubuntu容器,会在容器内安装ssh服务,但是会发现当容器重启后,如何实现ssh服务自动重启呢?可以使用Dockerfile参看此处 ,本文介绍一种在docker容器中进行配置的方法 安装ssh ...

  6. 写出干净的 JavaScript 5 个小技巧

    携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第15天,点击查看活动详情 降低阅读负担,启发创作心智,轻松学习 JavaScript 技巧,日拱一卒,jym,冲~ 1. 将数字定 ...

  7. 利用for循环同步执行异步方法

    //定义一个异步函数 const foo1 = (i) => { return new Promise((resolve, reject) => { setTimeout(() => ...

  8. 在centos环境下利用docker安装kail

    配置好国内阿里云镜像 vim  /etc/docker/daemon.json {"registry-mirrors":["https://cq20bk8v.mirror ...

  9. 不需要鼠标交互的UI去掉RaycastTarget

    UI事件会在EventSystem在Update的Process触发.UGUI会遍历屏幕中所有RaycastTarget是true的UI,接着就会发射线,并且排序找到玩家最先触发的那个UI,在抛出事件 ...

  10. wendows 批量修改文件后缀(含递归下级)

    for /r %%a in (*.jpg)do ren "%%a" "%%~na.png" //-- or :for /r %a in (*.jpg)do re ...