// 将图片转换为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. global与nonlocal关键字、函数名的多种用法、函数的嵌套调用、函数的嵌套定义、闭包函数、装饰器简介

    目录 一.global与nonlocal关键字 二.函数名的多种用法 三.函数的嵌套调用 四.函数的嵌套定义 五.闭包函数 六.装饰器简介 一.global与nonlocal关键字 global方法: ...

  2. 详解http和https

    前言 大家好,我是小卷! 近几年,互联网发生着翻天覆地的变化,尤其是我们一直习以为常的HTTP协议,在逐渐的被HTTPS协议所取代,在浏览器.搜索引擎.CA机构.大型互联网企业的共同促进下,互联网迎来 ...

  3. openwrt 网络检测脚本

    背景 openwrt 有些固件不太稳定,会时不时的断网,导致家里无法上网,遇到这种情况只能手动重启openwrt设备,该操作不方便,作为一个极客爱好者,那肯定是要实现自动化处理的了,写一个简单的脚本加 ...

  4. 如何调用别人的接口(包含get请求post请求)

    对于如何调用第三方接口还是有些模糊,所以记录一下,上代码 package com.zhang.miaodou; import java.io.BufferedReader; import java.i ...

  5. Nginx 同一个域名自动识别 pc h5

    首先设置环境变量 我们先设置变量,通过判断来改变变量的值(注: 我写在server中) set $is_mobile false; # 初始值 if ( $http_cookie ~* "A ...

  6. Python3 时间戳格式化和减法运算

    import datetime import time # 获取当前时间(2023-02-16 16:41:36) now_date = datetime.datetime.now().strftim ...

  7. [转载]Net分布式系统之四:RabbitMQ消息队列应用

    消息通信组件Net分布式系统的核心中间件之一,应用与系统高并发,各个组件之间解耦的依赖的场景.本框架采用消息队列中间件主要应用于两方面:一是解决部分高并发的业务处理:二是通过消息队列传输系统日志.目前 ...

  8. Pytest 插件

    1. 执行标记用例执行次数 首先安装 repeat: pip install pytest-repeat @pytest.mark.repeat(n)执行当前用例 n 次 然后再往下执行其他用例 im ...

  9. Pytorch之数据处理

    使用TensorDataset和DataLoader来简化   from torch.utils.data import TensorDataset from torch.utils.data imp ...

  10. boost asio 网络编程案例简单改写

    boost教程:http://zh.highscore.de/cpp/boost/ 改写7.4网络编程案例,服务器支持连接多个客户端 服务端: #include <iostream> #i ...