// 将图片转换为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. Android 删除已知路径的文件或文件夹

    转载:https://blog.csdn.net/qq_31939617/article/details/89414714[功能]delete(String delFile):删除文件或文件夹 del ...

  2. 100、 FilenameUtils

    FilenameUtils import org.apache.commons.io.FilenameUtils; 测试数据 String fileDirectory = "/D:/aa/b ...

  3. element ui 浏览器表单自动填充默认样式

    ::v-deep .el-input__inner {     -webkit-text-fill-color: #000000;     caret-color: #0a0a0a;     box- ...

  4. 查电脑并修改IP地址,你晓得吗?

    查电脑并修改IP地址,你晓得吗?   好记性不如烂笔头,古人的话,浅显却好有深意,越品越有味道.   每次都会忘记怎么查电脑IP,那么今天就写下来吧! 方法一:通过命令行查询IP地址   快捷键Win ...

  5. JAVA线段树模板

    public class LineTree{ int[] tree,nums; int n; public LineTree(int[] nums){ this.nums = nums; n = nu ...

  6. 浅谈storm

    storm分布式,可容错的实时计算框架,低延迟能做到毫秒级的响应,storm进程是常驻内存,Hadoop是不断启停的,storm中的数据不经过磁盘,都在内存中,处理完成后就没有了,但是可以写到数据库中 ...

  7. MySQL Workbench部分出错及可能解决方案

    出错一:8.0.23.0版本,在workbench内建立表eg1,select * from eg1无返回结果,无法向表内导入数据,在如下图的下一步,workbench会直接闪退 可行的办法:(不建议 ...

  8. linux挂载磁盘步骤

    一.查看需要挂载设备,如下sda(默认路径/dev/sda) 二.新建分区,执行如下命令进入操作 fdisk /dev/sda 1.m 查看可操作的命令 2.键入 n ,根据需要新建分区 3.键入 d ...

  9. 《CSOL大灾变》Mobile开发进度记录——扔掉与拾取武器的逻辑

    在武器系统的开发过程中,涉及到武器的丢弃逻辑.由于场景是复制场景,而自己写碰撞测试和抛物线以及重力下落来模拟扔掉一把武器,并且要防止武器扔到墙里.如果自己实现这些逻辑,那么会占用渲染线程的时间开销,即 ...

  10. laravel-hash表的简单使用