// 将图片转换为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. 转码服务serverless探索

    背景 公司目前主要聚焦于视频这个领域,利用视频为媒体.文旅.会议等行业进行赋能. 既然聚焦于视频领域,那么视频转码则是绕不开的话题. 为了降低成本,以及保证产品的核心能力,公司自建了一套转码系统. 转 ...

  2. ubuntu 启动脚本变化

    ubuntu-16.10 开始不再使用initd管理系统,改用systemd- 快速看了 systemd 的使用方法,发现改动有点大, 包括用 systemctl 命令来替换了 service 和 c ...

  3. 通过docker 安装部署sentry

    一.下载项目 git clone https://github.com/getsentry/self-hosted 二.安装 1.安装docker和docker-compose 2.运行sentry ...

  4. vue - 开发必须知道的 36 个技巧

    来源于:https://juejin.im/post/6844903959266590728  

  5. Prometheus监控操作

    一.架构说明 ➢ Prometheus Server:Prometheus 生态最重要的组件,主要用于抓取和存储时间序列数据, 同时提供数据的查询和告警策略的配置管理: ➢  Alertmanager ...

  6. offer_48

    题目:写一个函数,求两个整数之和,要求在函数体内不得使用+.-.*./四则运算符号. 思路: /* 首先看十进制是如何做的: 5+7=12,三步走 第一步:相加各位的值,不算进位,得到2. 第二步:计 ...

  7. Servlet-随机生成验证码(初级版本)

    Servlet之 验证码(初级) 需求: 使用Servlet向页面响应验证码,并且点击验证码或者"看不清楚,换一张"可以刷新验证码 需求分析: Servlet中需要完成的需求: 验 ...

  8. 论文阅读: CCF A 2022 MVD: 基于流敏感图神经网络的内存相关漏洞检测 (ICSE)

    Motivation: 内存相关漏洞会导致性能下降和程序崩溃,严重威胁到现代软件的安全性. 静态分析方法使用一些预定义的漏洞规则或模式来搜索不正确的内存操作,然而,定义良好的漏洞规则或模式高度依赖于专 ...

  9. 发现一个API接口自动化测试平台

    gitee地址:https://gitee.com/season-fan/autometer-api 记录一下: 1.API测试平台的5个需求: ①支持不同的项目,不同的角色,技术人员多人协作 ②支持 ...

  10. Advanced Rest Client 测试工具安装

    浏览器安装测试工具: Advanced Rest Client 1.下载插件,下载后解压 链接:https://pan.baidu.com/s/1DD5PgmkX_AG-JhUh8EVtqQ?pwd= ...