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 ...
随机推荐
- LeetCode-398 随机数索引
来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/random-pick-index 题目描述 给定一个可能含有重复元素的整数数组,要求随机输出给定 ...
- LeetCode-825 适龄的朋友
来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/friends-of-appropriate-ages 题目描述 在社交媒体网站上有 n 个用户. ...
- 智能指针 shared_ptr weak_ptr shared_from_this 笔记
shared_ptr 当指向对象的std::shared_ptr一创建,被管理对象的控制块SharedPtrControlBlock(参考下面的图)就建立了. 被管理的对象的控制块中有引用计数(ref ...
- golang输出字母a-z
方法1: func main() { for i := 0; i < 10; i++ { ss := 'a' + i fmt.Printf("==%c", ss) } }
- 【C学习笔记】day3-3 编写程序数一下 1到 100 的所有整数中出现多少个数字9
#include <stdio.h> int main() { int cou=0; for (int i = 1; i <= 100; i++) { if (i % 10 == 9 ...
- 你不能只会flex居中布局,精制动画讲解所有flex布局方式!通俗易懂纯干货教程!...
flex布局相信很多人都已经有不少了解,其优势和作用被越来越多的开发者所喜爱,网上也有很多关于关于flex的介绍和教程.但是根据笔者的面试经验发现,很多人尤其是初中级开发者对flex布局都仅仅停留下c ...
- apk文件查看指纹证书方法
1. 先将apk文件重命名为zip文件 2. 解压zip到指定一个文件夹下,其中的META-INF/CERT.RSA文件即MD5签名文件 3. cmd下打开窗口,输入如下命令: keytool -pr ...
- (app笔记)Memory Fill内存填充
Memory Fill 是实现app内存填充工具(运行内存,物理内存,网络空间内存) Used:已用内存 filled:未回收内存 Free:自由内存 1.Ram(Total Ram):手机运行内存 ...
- JQUERY动态的修改<div>样式
首先需要引入JQUERY <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> & ...
- 【SSO单点系列】(10):CAS4.0 之 https证书
来源: http://m.blog.csdn.net/zrk1000/article/details/51166603 http://blog.csdn.net/zhurhyme/article/de ...