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 ...
随机推荐
- 访问不通github的解决办法
访问不通github, 在hosts文件中手动加下域名IP 在hosts里添加github的ip 140.82.113.3 github.com #不要.199.232.5.194 github.gl ...
- 【剑指Offer】【数组】数组中出现次数超过一半的数字
题目:数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数字2在数组中出现了5次,超过数组长度的一半,因此输出2.如果 ...
- Java面向对象之创建对象内存分析
创建对象内存分析 代码 内存分析 属性 属性:字段Field 成员变量 默认初始化: 1.数字: 0 0.0 2.char: u0000 3.boolean:false 4.引用数据类型:null 5 ...
- SpringBoot运行就停止
检查下是不是没有引入springboot-starter-web依赖 <dependency> <groupId>org.springframework.boot</gr ...
- list集合之流操作
1.根据某一个实体字段进行去重(分组)操作 List<Object> list = objectList.stream().collect(Collectors.collectingAnd ...
- SQL数据库常用命令
数据库操作: 创建库:create database 数据库名 删除库:drop database 数据库名 选择库:use 数据库名 Database changed 关闭安全模式:set sql_ ...
- matlab如何关闭figure
如果想要关闭之前打开的figure,用**close()**函数就可以了. close(H):关闭句柄为H的figure: close('name'):关闭指定name的figure: close a ...
- java 注解基础
java 内置注解 注解 作用 描述 @Override 将覆盖父类中的方法 作用在子类的方法上 @Deprecated 代码被弃用 使用了被@Deprecated注解的代码则编译器将发出警告 @Su ...
- 初学银河麒麟linux笔记 第六章 发布qt程序
本章参考了@长沙红胖子Qt 的笔记 https://blog.51cto.com/hongpangzi/5788384 这里纪录一下步骤 linux上的QT程序已经能正常编译运行,这里需要进行发布. ...
- c# Winform 缓动动画
一.定义缓动动画类public class AnimationHelper { Timer animationTimer = new Timer(); double velocity = 0.0; P ...