首页 > 其他分享 >url图片转base64

url图片转base64

时间:2024-04-02 10:13:53浏览次数:22  
标签:src canvas const img url base64 height width 图片

const base64Str: string = await new Promise(resolve => {
      const img = new Image()
      img.crossOrigin = 'anonymous';
      img.src = url; // 图片链接
      img.onload = function () {
        const canvas = document.createElement('canvas')
        canvas.width = img.width;
        canvas.height = img.height;
        const ctx = canvas.getContext('2d');
        ctx?.drawImage(img, 0, 0, img.width, img.height);
        const ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase();
        const dataURL = canvas.toDataURL('image/' + ext);
        resolve(dataURL);
      }
    });

 

标签:src,canvas,const,img,url,base64,height,width,图片
From: https://www.cnblogs.com/atao24/p/18109963

相关文章

  • 微信小程序裁剪图片(上传头像裁剪)完整源码
    效果图(将下面的代码复制粘贴就可以做出来了)第一步    将资源文件解压放到utils目录下第二步        页面json配置文件引入组件{"usingComponents":{"image-cropper":"/utils/image-cropper/image-cropper"},"navigationStyle":"custom"......
  • uniapp上传图片
     如图:<viewclass="flex-subflex"v-else-if="field.type=='image'||!field.type"> <viewclass="flex-sub"> <imagev-if="form[field.name]":src="form[field.name]"mode="aspectF......
  • 把请求参数放到 url 上
    get请求把查询条件放在url上现有功能,要求在前端传递一个id给后端,有下述两种情况加以区分:(/xxx/addYyy?id=${data})(/xxx/addYyy/${data})前端请求:(/xxx/addYyy?id=${data})这种id是作为查询参数(queryparameter)传递的。查询参数附加在URL的路径之后,以问号(?)开......
  • MISC专项-图片隐写
    一、大白1.打开压缩包,发现是一张图片,但是明显的不完整,下面少了一块。2.右击图片查看属性,该图片的宽度和高度分别是679、256。3.用winhex打开该图片,去修改它的高度,256对应的16进制为100,对找到相应的地方进行修改,改成300即可。4.保存修改,再次打开图片即可得到flag。二、隐......
  • cURL error 60: SSL certificate problem: unable to get local issuer certificate
    阿里云短信window报cURLerror60:SSLcertificateproblem:unabletogetlocalissuercertificate原文链接:https://blog.csdn.net/qq_41408081/article/details/124309075序:帮客户接一个阿里云短信验证码提醒,新版的SDK,一下,折磨简单,在Windows上搞的差点心力交瘁,差点怀疑......
  • Python与CAD系列高级篇(二十六)根据图片生成cad轮廓矢量
    目录0简述1功能描述2应用3功能实现0简述本篇介绍根据图片文件提取出轮廓特征信息并在cad中绘制出相应的轮廓矢量。1功能描述功能:①获取对象轮廓的图片文件。②对图片进行分析与轮廓提取。③将提取的轮廓信息通过pyautocad绘制在cad中。2......
  • nodejs爬图片(二)
    前言    网上一张一张下载是不是很麻烦,直接批量下载,解决你的问题。高清不是梦!        具体步骤不说了,直接上代码constcheerio=require("cheerio");constaxios=require("axios");constfs=require("fs");constpath=require("path");letht......
  • CSS3制作图片样式
    问题:如果在img上直接使用CSS3的border-radius和box-shadow应用在图片,浏览器并不会完全显示。前面在《jQuery和CSS3给图片制作圆角》中说过其解决方法,就是把图片作为背景图片,这样我们就可以应用任何样式来修饰图片,而且此时浏览器也会完美的呈现出来。解决方法:要让浏览器能正常渲......
  • php采用aes算法,字符编码utf8,填充模式ECB,填充:ZeroPadding,编码:base64,实现加密
    原文:https://blog.csdn.net/yinxinyue0621/article/details/129813334一、php:三种填充模式的区别(PKCS7Padding/PKCS5Padding/ZeroPadding)(一)常见的三种填充方式:我们知道某些加密算法要求明文需要按一定长度对齐,叫做块大小(BlockSize),比如16字节,那么对于一段任意的数据,加密前需要......
  • Java 实现OCR扫描/识别图片文字
    图片内容一般无法编辑,如果想要读取图片中的文本,我们需要用到OCR工具。本文将介绍如何在Java中实现OCR识别读取图片中的文字。所需工具:IDEASpire.OCRforJava-JavaOCR组件,支持识别多种语言、字体,可读取JPG、PNG、GIF、BMP和TIFF等常用图片中的文本信息。    ......