vue 根据图片地址转换base64字符串

迷南。 2023-01-12 14:56 238阅读 0赞

> getBase64(imgUrl, callback) \{
> 
>       // 一定要设置为let，不然图片不显示
> 
>       const image = new Image();
> 
>       // 解决跨域问题
> 
>       image.setAttribute("crossOrigin", "anonymous");
> 
>       const imageUrl = imgUrl;
> 
>       image.src = imageUrl;
> 
>       // image.onload为异步加载
> 
>       // eslint-disable-next-line no-undef
> 
>       image.onload = function() \{
> 
>         var canvas = document.createElement("canvas");
> 
>         canvas.width = image.width;
> 
>         canvas.height = image.height;
> 
>         var context = canvas.getContext("2d");
> 
>         // eslint-disable-next-line no-undef
> 
>         context.drawImage(image, 0, 0, image.width, image.height);
> 
>         var quality = 0.8;
> 
>         // 这里的dataurl就是base64类型
> 
>         // 使用toDataUrl将图片转换成jpeg的格式,不要把图片压缩成png，因为压缩成png后base64的字符串可能比不转换前的长！
> 
>         const dataurl = canvas.toDataURL("image/jpeg", quality);
> 
>         callback ? callback(dataurl) : null; //调用回调函数
> 
>       \};
> 
>     \}

调用   baseImg为图片地址

> this.getBase64(baseImg, dataURL => \{
> 
>             console.log(dataURL );
> 
>  \});

发表评论取消回复

表情：

评论列表（有 0 条评论，238人围观）

还没有评论，来说两句吧...

相关阅读

相关 Base64字符串与图片的相互转换

本篇博客记载的是一个我们在开发过程中很常用的一个小功能，就是我们在处理图片的时候做数据存放到数据库的功能，我们存放的不再是本地路径而是一个Base64的字符串！然后我们在取

你的名字/ 2024年04月01日 18:51/ 0 赞/ 66 阅读

相关 java 将base64字符串转换成图片

package kf.ats.gvnsvr.client.taizhou.common; import java.io.OutputStream; im

àì夳堔傛蜴生んèń/ 2024年02月19日 21:59/ 0 赞/ 43 阅读

相关获取图片的base64编码以及根据base64编码生成图片

说明：什么是base64编码呢？百度百科上面给出的解释是这样的： > Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字

缺乏、安全感/ 2023年03月14日 13:19/ 0 赞/ 8 阅读

相关 vue 根据图片地址转换base64字符串

> getBase64(imgUrl, callback) \{ > > // 一定要设置为let，不然图片不显示 > > const image

迷南。/ 2023年01月12日 14:56/ 0 赞/ 239 阅读

相关将图片转换为Base64编码字符串、解析Base64编码字符串后生成图片

目录代码结果注意代码 public class Test { pu

深碍√TFBOYSˉ_/ 2022年09月10日 06:14/ 0 赞/ 300 阅读

相关 base64生成图片——图片转换变成base64

base64生成图片——图片转换变成base64 如题。下面上货。 package com.xueyou.demo; import org

桃扇骨/ 2022年06月15日 05:22/ 0 赞/ 428 阅读

相关 android 把图片转换成Base64字符串

import java.io.ByteArrayOutputStream; import java.io.File; import java.io.Fi

柔光的暖阳◎/ 2022年05月13日 00:16/ 0 赞/ 283 阅读

相关 JAVA 图片地址路径转换 Base64 工具类

工具类代码： import sun.misc.BASE64Encoder; import java.io.ByteArrayOutputStream;

￡神魔★判官ぃ/ 2021年11月23日 01:16/ 0 赞/ 357 阅读

相关 base64字符串与图片的相互转换

一.base64字符串转图片原理是当base64字符串作为img标签的src属性时，如果是有效的，则可以预览。而若要下载，则创建一个新的a标签将a标签的

悠悠/ 2021年09月14日 21:18/ 0 赞/ 680 阅读

相关前端图片在线转换Base64 图片编码Base64

首先讲一下什么是图片Base64编码：简单来说，图片的base64编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。为什么要用Base64？我们

比眉伴天荒/ 2021年09月14日 03:02/ 0 赞/ 1032 阅读