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 ...
随机推荐
- APP压力稳定性测试-Monkey
一.Monkey工具简介 1.monkey的来源: Monkey是一个命令行工具,使用安卓调试桥(adb)来运行它,模拟用户:触摸屏幕.滑动Trackball.按键等随机事件流来对设备上的程序进行压力 ...
- video.js没有显示已播放时间、总时间?
我们在JS中设置了显示两个时间,但是没有显示. 经过查找,有的博文说或许是JS版本太高?我们没有换JS.另一篇博文给了我们启发,修改下样式就好了,我们一看,真的是样式问题 都改成block后就看到时间 ...
- MS-TCT: Multi-Scale Temporal ConvTransformer for Action Detection概述
1.针对的问题 为了在未修剪视频中建模时间关系,以前的多种方法使用一维时间卷积.然而,受核大小的限制,基于卷积的方法只能直接获取视频的局部信息,不能学习视频中时间距离较远的片段之间的直接关系.因此,这 ...
- thinkphp5框架使用总结
因为采用了mvc模式,所以理解上为了简便,把控制中心作为一个浏览对象去处理,其他不要去考虑只把它们当做附属物 一.路径访问方式 http://网址/index.php/模块/控制器/操作.html 其 ...
- 1055. Combinations
1055. Combinations Time limit: 1.0 secondMemory limit: 64 MB As you have known MMM corporation lab r ...
- 【4】Postman之Tests(断言)
简介:使用postman完成请求后,验证返回结果,会用到tests断言.官方提供了很多可以直接使用的方法~ 接下来主要介绍这些方法是如何使用. 1. 变量相关: Get an environment ...
- Java——File类
File类 File:代表一个文件或者文件夹 方法 createNewFile() exists() getAbsolutePath() getName() getParent() isDirecto ...
- Filters in ASP.NET Core(Net6之过滤器)
Filters in ASP.NET Core 如果觉得样式不好:跳转即可 (md文件复制过来有些样式会不一样) 原文地址:https://lifengying.site/archives/net6% ...
- Server2008通过bat命令自动定时备份MySQL数据库
第一种方法: 环境: MySQL 安装位置:D:\MySQL 论坛数据库名称为:Db_Test 数据库备份目的地:D:\db_bak\ 1.首先新建一个bat文件 rem ************** ...
- 【Python】【算法】【排序】用Python实现排序的三种算法
class SortTest: def __init__(self): pass # 冒泡排序 def BubbleSort(self, value): if isinstance(value, li ...