前端如何把图片url地址https://url转成base64

前端如何把图片url地址https://url转成base64

  • 一、直接上代码

一、直接上代码

async getImgImg() {let url = await this.base64(this.From.imageData)
}base64(url) {return new Promise(resolve => {const image = new Image()// 先设置图片跨域属性image.crossOrigin = 'Anonymous'// 再给image赋值src属性,先后顺序不能颠倒image.src = urlimage.onload = function () {const canvas = document.createElement('CANVAS')// 设置canvas宽高等于图片实际宽高canvas.width = image.widthcanvas.height = image.heightcanvas.getContext('2d').drawImage(image, 0, 0)// toDataUrl可以接收2个参数,参数一:图片类型,参数二: 图片质量0-1(不传默认为0.92)const dataURL = canvas.toDataURL('image/jpeg')resolve(dataURL)}image.onerror = () => {resolve({ message: '相片处理失败' })}})
},

链接: https://blog.csdn.net/weixin_63537474/article/details/133380515

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

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

相关文章

JL-03小型气象站气象环境在线监测设备自动上传并保存数据

JL-03小型气象站产品概述 小型气象站用于对风速、风向、雨量、空气温度、空气湿度、太阳辐射、光照强度、土壤温度、土壤湿度、蒸发量、大气压力等气象要素进行现场监测。既可以通过无线通讯将数据传送至云平台,又可以通过配套的数据采集通讯线与计算机进行连接&am…

C/C++内嵌简本语言-LUA

一、LUA简介 Lua [1] 是一个小巧的脚本语言。Lua脚本可以很容易的被C/C 代码调用,也可以反过来调用C/C的函数,这使得Lua在应用程序中可以被广泛应用。不仅仅作为扩展脚本,也可以作为普通的配置文件,代替XML,ini等文件格式&#…

1. 深度学习——激活函数

机器学习面试题汇总与解析——激活函数 本章讲解知识点 什么是激活函数? 为什么要使用激活函数? 详细讲解激活函数 本专栏适合于Python已经入门的学生或人士,有一定的编程基础。本专栏适合于算法工程师、机器学习、图像处理求职的学生或人…

一分钟秒懂人工智能对齐

👉博__主👈:米码收割机 👉技__能👈:C/Python语言 👉公众号👈:测试开发自动化【获取源码商业合作】 👉荣__誉👈:阿里云博客专家博主、5…

C语言的部分逆置

部分逆置 pta c语言&#xff1a; #include <stdio.h>void reverse(int arr[], int start, int end) {while (start < end) {int temp arr[start];arr[start] arr[end];arr[end] temp;start;end--;} }int main() {int n, m;scanf("%d%d", &n, &m…

C++文件的读取和写入

1、C对txt文件的读&#xff0c;ios::in #include<iostream> #include<fstream> using namespace std;int main() {ifstream ifs;ifs.open("test.txt",ios::in);if(!ifs.is_open()){cout<<"打开文件失败&#xff01;"<<endl;}char…

Javaweb之javascript的小案例的详细解析

1.5.4 案例 1.5.4.1 需求说明 鲁迅说的好&#xff0c;光说不练假把式,光练不说傻把式。所以接下来我们需要通过案例来加强对于上述DOM知识的掌握。需求如下3个&#xff1a; 点亮灯泡 将所有的div标签的标签体内容后面加上&#xff1a;very good 使所有的复选框呈现被选中的…

AI毕业设计生成器(基于AI大模型技术开发)

这是一个辅助生成计算机毕业设计的工具&#xff0c;可以自动完成毕业设计的源码。它基于几百个github上面开源的java和python项目&#xff0c;运用tengsorflow技术&#xff0c;训练出了AI大模型。基本实现了计算机毕业设计生成器&#xff0c;能够初步生成Java或python基本源码。…

钉钉API与集简云无代码开发连接:电商平台与营销系统的自动化集成

连接科技与能源&#xff1a;钉钉API与集简云的一次集成尝试 在数字化时代&#xff0c;许多公司面临着如何将传统的工作方式转变为更智能、高效的挑战。某能源科技有限公司也不例外&#xff0c;他们是一家专注于能源科技领域的公司&#xff0c;产品包括节能灯具、光伏逆变器、电…

前端面试题之vue篇

vue基础 vue的基本原理 当一个Vue实例创建时&#xff0c;Vue会遍历data中的属性&#xff0c;用Object.defineProperty(Vue使用proxy)转换为getter/setter&#xff0c;并且在内部追踪相关依赖&#xff0c;在属性被访问和修改时通知变化。每个组件实例都有相应的watcher程序实例…

BM65 最长公共子序列(二)

动态规划 BM65 最长公共子序列&#xff08;二&#xff09; 这道题是动态规划的典型例题。 思路 题目要求获取最长公共子序列&#xff0c;我们要先求最长公共子序列的长度&#xff0c;然后根据这个长度倒推从而获取这个子序列。注意&#xff1a;子序列不是子串&#xff0c;子…

小程序微信登录授权突然没反应的原因和解决方案

之前的小程序微信授权一直用的很好 今天突然点击没反应了 马上在开发工具试一试 返现点击授权返回错误信息 排除所有代码问题&#xff08;之前一直用的好好的&#xff09;和服务器承载问题&#xff08;就几个人点击&#xff09; 第一反应就是小程序有啥政策改变的问题&#x…

用 Golang 采集 Nginx 接口流量大小

简介 在开发和运维中&#xff0c;我们经常需要监控和分析服务器的接口流量大小&#xff0c;特别是对于部署了 Nginx 的服务器。本文将介绍如何使用 Golang 采集 Nginx 接口流量大小&#xff0c;并展示如何将这些数据进行实时监控和分析。 步骤一&#xff1a;准备工作 在开始…

uni-app——項目day01

配置uni-app開發環境 uni-app快速上手 | uni-app官网 创建项目 图中四个划线就是要配置的地方. 选择vue2还是vue3看个人选择。 目录结构 但是现在新版本创建的项目已经没有components目录了&#xff0c;需要自己创建。 项目运行到微信开发者工具 使用git管理项目 node-mod…

10 个拿来就用的 Shell 脚本实例!

脚本 1&#xff1a;该脚本用于读取Linux系统/etc/passwd文件中的所有/bin/bash作为登录默认Shell的用户列表&#xff0c;并提取每个用户的用户名。对于这些用户名进行检查&#xff0c;是否不等于root和tidb。如果用户名不等于root和tidb&#xff0c;则使用usermod命令对该用户的…

nodejs之 crypto-js模块,浏览器端加解密算法库

一、简介 CryptoJS是一个JavaScript加密算法库&#xff0c;用于实现各种加密算法和哈希函数。它提供了一种简单而强大的方式来执行加密操作&#xff0c;包括对称加密算法、非对称加密算法和哈希函数等。 CryptoJS支持的主要功能包括&#xff1a; 1.对称加密&#xff1a;Crypto…

async/await

异步的终极解决方案&#xff1a;async/await 1. 背景 在深入讨论 async/await 之前&#xff0c;我们需要了解一下 JavaScript 的单线程和非阻塞的特性。JavaScript 是单线程的&#xff0c;也就是说在任何给定的时间点&#xff0c;只能执行一个操作。然而&#xff0c;对于需要…

Unity 使用INI文件存储数据或配置参数预设

法1&#xff1a;调用外部Capi库 具体使用&#xff1a; public class Ini{//读取INI文件需要调用C的APP[System.Runtime.InteropServices.DllImport("kernel32")]private static extern long WritePrivateProfileString(string section, string key, string val, st…

强大好用的shell:shell命令

命令名称&#xff1a;就是语法中的“动词”&#xff0c;表达的是想要做的事情&#xff0c;例如创建用户、查看文件、重启系统等操作。 命令参数&#xff1a;用于对命令进行调整让“修&#xff0c;改”过的命令能更好地贴合工作需求&#xff0c;达到事半功倍的效果。 命令对象&a…

Linux各种版本安装详细步骤和root密码破解

文章目录 VMware新建虚拟机硬件设置设置虚拟网络挂载ISO文件 root密码破解 VMware新建虚拟机 硬件设置 设置虚拟网络 编辑>虚拟网络编辑器>VMnet8(NAT模式) 挂载ISO文件 加电>开启次虚拟机 第二项可以检查挂载上来的iso文件是否完整没有破坏 磁盘分区 选自定义分…