vue 将图片url转base64

  <img :src="imgList[0]" width="600" @error="handleImageError" alt="0" @load="onloadImg" />
//当图片加载完成时,将图片url转成base64onloadImg(event) {this.urlTobase64(event.target.src, event.target.alt)},urlTobase64(url, index) {var that = thisvar img = new Image()img.src = url + '?time=' + new Date().valueOf() // 加上时间结尾,处理缓存//支持http跨域图片。需要后端设置图片支持跨域为*(如果后端不处理,加上这行会无法显示图片,导致拿不到base64)img.setAttribute('crossOrigin', '*')if (url) {img.onload = function () {var base64Url = that.getBase64Image(img)// console.log(base64Url) // 最终拿到的base64值that.img64[index] = base64Url		// 	保存数据}}},getBase64Image(img) {var canvas = document.createElement('canvas')canvas.width = img.widthcanvas.height = img.heightvar ctx = canvas.getContext('2d')ctx.drawImage(img, 0, 0, img.width, img.height)const dataURL = canvas.toDataURL('image/jpeg') // 可根据图片后缀,动态变换如 image/pngreturn dataURL},

推荐扩展阅读
【VUE】将图片的url或file类型转换成base64,并压缩图片大小
链接: http://t.csdnimg.cn/VUD9Y

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/22089.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mac 使用Docker安装Elasticsearch、Kibana

安装ElasticSearch 通过docker安装es docker pull elasticsearch:8.6.2 在本地创建elasticsearch.yml文件 mkdir /Users/ky/Documents/learn/es/elasticsearch.yml 编辑yml文件内容 http: host: 0.0.0.0 xpack.security.enabled: false xpack.security.enrollment.enabled: t…

Scala 练习一 将Mysql表数据导入HBase

Scala 练习一 将Mysql表数据导入HBase 续第一篇&#xff1a;Java代码将Mysql表数据导入HBase表 源码仓库地址&#xff1a;https://gitee.com/leaf-domain/data-to-hbase 一、整体介绍 HBase特质 连接HBase, 创建HBase执行对象 初始化配置信息&#xff1a;多条(hbase.zookeeper.…

ARM学习(28)NXP 双coreMCU IMX1160学习

笔者最近接触到一块IMXRT1160的双core板子&#xff0c;特依次来记录学习一下 1、IMXRT1160 板子介绍 介绍一下NXP的Demo板子&#xff0c;是一个双core的板子&#xff0c;Cortex-M7和Cortex-M4&#xff0c;总计1MB的RAM空间&#xff0c;256KB的ROM空间&#xff0c;提供了丰富的…

excel工资表基本操作

1.基本操作 1)新建工作表:点击下方田可以新建一张工作表。 2)切换工作表:点击工作表名称可以切换工作表。o 3)如果我们有很多张工作表的话&#xff0c;在切换工作表处右键可选择你所需要 腿除 叫打开的工作表。4)插入删除:随意选择一张工作表右键&#xff0c;可以看到右圩、 名…

c++ 录制电脑屏幕桌面

1&#xff1a;调用windows GDI bool WindowsGDI::init(int idx) {mHWinSta GetProcessWindowStation();if (!mHWinSta) {LOGE("%s GetProcessWindowStation error", getCapture());return false;}mHWnd GetDesktopWindow();//GetActiveWindow();mWndHDC GetDC(mH…

UE5 插件第三方库的build写法记录

// Copyright Epic Games, Inc. All Rights Reserved.using UnrealBuildTool; using System.IO;//方法为创建第三方库插件,CoustemOpenCV为插件名称 public class CoustemOpenCV : ModuleRules {public CoustemOpenCV(ReadOnlyTargetRules Target) : base(Target){PCHUsage = …

Window10磁盘的分盘和合并

注意&#xff1a; 当我们c盘不够大需要扩大磁盘空间时&#xff0c;当c盘后面没有未划分的磁盘时候&#xff0c;我们是无法进行扩充c盘的&#xff0c;此时&#xff0c;我们可以先删除后面一个磁盘&#xff0c;再进行扩大。 如下&#xff1a;c盘后没有未分配的空间&#xff0c;…

nginx优化和重写功能rewrite

一、nginx优化 1.防盗链 防盗链基于客户端携带的referer实现&#xff0c;referer是记录打开一个页面之前记录是从哪个页面跳转过来的标记信息&#xff0c;如果别人只链接了自己网站图片或某个单独的资源&#xff0c;而不是打开了网站的整个页面&#xff0c;这就是盗链&#x…

【项目管理常见问题大揭秘】每个管理者都要Get的「五维思维」~

走上管理岗☸要懂得五维思维 &#x1f4bc;自我管理——做自己的CEO 严于律己&#xff1a;严格要求自己&#xff0c;注重个人品牌建设 宽以待人&#xff1a;接纳不同观点&#xff0c;提升团队凝聚力 尊重事实&#xff1a;鼓励团队成员发挥优势&#xff0c;避免负面评价 坚守诚…

求助:西莫电子期刊 交流互助 传递

点击上方 “机械电气电机杂谈 ” → 点击右上角“...” → 点选“设为星标 ★”&#xff0c;为加上机械电气电机杂谈星标&#xff0c;以后找夏老师就方便啦&#xff01;你的星标就是我更新动力&#xff0c;星标越多&#xff0c;更新越快&#xff0c;干货越多&#xff01; 关注…

Java面经——SpringCloud微服务

SpringCloud SpringCloud的五大组件 注册中心网关远程调用负载均衡熔断降级 谈谈你对SpringCloud的理解 SpringCloud是为了解决微服务架构中出现的一系列服务治理难题的而提出的一套规范&#xff0c;统一了标准。降低了微服务架构的开发难度。有了 Spring Cloud 这样的技术生…

【CSS】object-fit 和 object-position 属性详解

目录 object-fit属性属性值&#xff1a;使用场景&#xff1a; object-position 属性语法&#xff1a;例如&#xff1a;使用场景&#xff1a; object-fit和object-position是CSS属性&#xff0c;用于控制图像或视频在其容器中的适应和定位方式。 object-fit属性 属性值&#xf…

【android 9】【input】【8.发送按键事件2——InputDispatcher线程】

系列文章目录 本人系列文章-CSDN博客 目录 系列文章目录 1.简介 1.1流程介绍 1.2 时序图 2.普通按键消息发送部分源码分析&#xff08;按键按下事件&#xff09; 2.1 开机后分发线程阻塞的地方 2.2 InputDispatcher::dispatchOnceInnerLocked 2.3 InputDispatcher::disp…

使用C语言实现贪吃蛇(超详细)

目录 实现贪吃蛇我们要知道哪些&#xff1f; Easyx图形库 Easyx的安装 游戏思路 游戏实现 头文件的使用 ​编辑和食物以及控制方向的初始化 对于坐标的实现&#xff1a; 食物颜色的实现&#xff1a; 游戏数据的初始化 加载音乐 图形窗口的设置&#xff1a; 蛇身节数…

GEE案例——归一化差异水体指数丰水期、枯水期的水域面积和水深分析(青海湖为例)

简介 水深反演是指利用遥感技术从航空或卫星平台上获取的数据来推断水体的深度信息。这种技术在海洋学、湖泊和河流的科学研究与管理中非常重要。以下是几种常用的水深反演方法: 1. **光学遥感反演**: - 基于水体颜色和透明度的变化与水深的关系,使用光学遥感影像(如L…

【动手学深度学习】多层感知机之暂退法问题研究详情

目录 &#x1f30a;问题研究1 &#x1f31e;问题研究2 &#x1f332;问题研究3 &#x1f30d;问题研究4 &#x1f333;问题研究5 &#x1f30c;问题研究6 &#x1f30a;问题研究1 如果更改第一层和第二层的暂退法概率&#xff0c;会发生什么情况&#xff1f;具体地说&am…

深入理解指针(4)--新手小白都能明白的指针解析

深入理解指针(4)–新手小白都能明白的指针解析 文章目录 深入理解指针(4)--新手小白都能明白的指针解析1. 回调函数2. qsort使用举例2.1 冒泡排序2.2 qsort函数介绍2.3 用冒泡排序实现qsort 结语 1. 回调函数 回调函数就是⼀个通过函数指针调用的函数 如果我们把函数的指针&a…

C++ Primer 类与构造函数 三五法则

前言 本文介绍C中类的基础知识&#xff0c;介绍所有的构造函数&#xff0c;和什么时候应该该写哪些构造函数&#xff0c;并介绍经典的三五法则。 在C中&#xff0c;只是声明一个空类&#xff0c;不做任何事情的话&#xff0c;编译器会自动为你生成如下八个默认函数&#xff1…

Android、Java 中的位运算使用小结

文章目录 位运算符如何记住?实际编程中有什么实际应用呢?1. 权限控制2. 图形处理&#xff1a;3. 网络通信&#xff1a;4. 数据加密&#xff1a;5. 数据压缩&#xff1a;6. 高效计算&#xff1a;7. 底层编程&#xff1a;8. 算法优化&#xff1a;9 .硬件交互&#xff1a;10. 位…

玩转微服务-GateWay

目录 一. 背景二. API网关1. 概念2. API网关定义3. API网关的四大职能4. API网关分类5. 开源API网关介绍6. 开源网关的选择 三. Spring Cloud Gateway1. 文档地址2. 三个核心概念3. 工作流程4. 运行原理4.1 路由原理4.2 RouteLocator 5. Predicate 断言6. 过滤器 Filter6.1. 过…