// 将图片转换为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. 代码随想录-day2

    哈希表 基础知识 哈希表和链表都是属于基础数据结构的一种,都是必须掌握牢靠的知识. 哈希表是根据关键码的值而直接进行访问的数据结构. 简单来说就是使用数据得到的哈希值来作为哈希表的key用于获取数据. ...

  2. Java打印裴波那契数列

    //裴波那契数列的定义:他的第一项和第二项均为1,以后各项都为前两项的和.如: 1,1,2,3,5,8,13,21,34,55,89,144,233,~~~~ 关键代码如下: package fuxi ...

  3. typescript - 学习档案

    由于内容繁多,使用掘金来记录此笔记,方便索引跟随!未完待续~~~ 地址如下: https://juejin.cn/post/6899350420541014030/#heading-20

  4. appsettings.json用机密替换字符串-利用 VisualStudio 管理用户机密

    以纯文本形式存储密码是不安全的. 例如,存储在中的数据库连接字符串 appsettings.json 可能包含指定用户的 密码: { "ConnectionStrings": { ...

  5. wandb: Network error (ConnectionError), entering retry loop.

    超算使用wandb总是连接超时,设置为offline模式即可 import os import wandb os.environ["WANDB_API_KEY"] = 'KEY' ...

  6. nodejs web学习

    命令行 和python一样,出奇的简单 npm i serve -g serve -s softwares 如果当前目录,就直接 serve express /** * 服务器代码 * 启动方式: * ...

  7. (前端面试题)详解 JS 的 setTimeout 和 setInterval 两大定时器

    程序员面试题库分享 1.前端面试题库 (面试必备)            推荐:★★★★★ 地址:前端面试题库 2.前端技术导航大全      推荐:★★★★★ 地址:前端技术导航大全 3.开发者颜色 ...

  8. P1002 [NOIP2002 普及组] 过河卒

    P1002 [NOIP2002 普及组] 过河卒 题目见上. 一个经典的递推题 递推不会的看下面: https://www.cnblogs.com/haoningdeboke-2022/p/16247 ...

  9. Java使用Calendar获取月最大天数

    Calendar calendar = Calendar.getInstance(); calendar.set(Calendar.YEAR, year); calendar.set(Calendar ...

  10. P2016题解

    P2016题解 题目描述 Bob要建立一个古城堡,城堡中的路形成一棵无根树.他要在这棵树的结点上放置最少数目的士兵,使得这些士兵能瞭望到所有的路. 注意,某个士兵在一个结点上时,与该结点相连的所有边将 ...