img图片转base64

最新推荐文章于 2024-06-21 15:25:50 发布
最新推荐文章于 2024-06-21 15:25:50 发布
阅读量956 收藏
点赞数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.8.0.js"></script>
<script src="base64.js"></script>
</head>
<body>
<input type="file"  id="file"/>
<img src="https://p1.ssl.qhimg.com/t0151320b1d0fc50be8.png" />
<script>
// var img = document.getElementById("file").files[0].name;
</script>
<!--<script>
var img = "1.png";
function getBase64Image(img) {
   var canvas = document.createElement("canvas");
   canvas.width = img.width;
   canvas.height = img.height;
   var ctx = canvas.getContext("2d");
   ctx.drawImage(img, 0, 0, img.width, img.height);
   var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
           var dataURL = canvas.toDataURL("image/"+ext);
   return dataURL;
}
var image = new Image();
image.src = img;
image.onload = function(){
   var base64 = getBase64Image(image);
   console.log(base64);
}
</script>-->
<script>
var img = "https://p1.ssl.qhimg.com/t0151320b1d0fc50be8.png";
//var img = "http://127.0.0.1/base64/1.jpg";
function getBase64Image(img) {
   var canvas = document.createElement("canvas");
   document.getElementsByTagName("body")[0].appendChild(canvas);
   canvas.width = img.width;
   canvas.height = img.height;
   var ctx = canvas.getContext("2d");
   ctx.drawImage(img, 0, 0, img.width, img.height);
   var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
   var dataURL = canvas.toDataURL("image/"+ext);
   return dataURL;
}
var image = new Image();
image.crossOrigin = '';
image.src = img;
document.getElementsByTagName("body")[0].appendChild(image);
image.onload = function(){
   var base64 = getBase64Image(image);
}
</script>
</body>
</html>
zhuhongjin0610
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
c++图片与base64互转
01-09
在本案例中，我们关注的是如何在C++环境下使用OpenCV库进行图片与Base64字符串之间的相互转换。OpenCV是一个强大的计算机视觉库，除了图像处理功能外，它也可以用来读取和写入图像文件。 首先，我们需要理解Base64...
JQ JS javascript 普通图片上传 图片格式转换 图片base64转换 jpg转base64 png转base64
04-18
本文将深入探讨如何使用jQuery（JQ）、JavaScript（JS）以及base64编码技术来实现普通图片的上传、格式转换以及base64编码转换。我们将讨论jpg和png图片如何转化为base64字符串，以便在网络上传输或存储。 首先，让...
base64转img
Helloxd020406的博客
09-08 351
<!DOCTYPE html> <html><head> <meta charset="utf-8"> <title></title> <style> .c { display: flex; } .c #textarea { width: 400px; height: 500px; } .c #img { widt
img转base64
小多的博客
08-08 2877
一个简单的img地址转base64格式，并可以设置压缩比例以及图片格式。
Img、File、Base64类型互相转换
最新发布
qq_42660374的博客
06-21 223
bits img/Blob/base64 格式图片。
Img转base64
weixin_30832351的博客
02-12 95
function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage...
img 转base64
chixian4839的博客
03-13 142
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <b...
img转成base64
qq_41525524的博客
05-28 161
img -> base64 @SuppressWarnings("restriction") public static String imageChangeBase64(String imagePath){ InputStream inputStream = null; byte[] data = null; try { inputStream = new FileInputStream(imagePath);
vue.js图片转Base64上传图片并预览的实现方法
10-18
本文主要介绍了在Vue.js框架中实现图片转Base64编码后上传，并在前端进行预览的方法。在当前的前后端分离开发模式下，前端开发人员往往需要处理各种前端资源，包括图片。在传统做法中，通常会通过Ajax调用接口，以...
python将图片转base64,实现前端显示
09-18
在HTML中，可以使用data URIs方案将图片以Base64字符串的形式内嵌到<img>标签的src属性中。这样浏览器可以解析并显示图片。例如：<img src="data:image/png;base64,这里是base64的编码"/>。 3. 文件大小与编码长度...
vue项目base64字符串转图片的实现代码
10-18
在Vue项目中，将Base64字符串转换为图片是一种常见的需求，这通常涉及到前端与后端的数据交互。本文将详细讲解如何实现这一功能，并提供相关的Vue代码示例以及后端处理Base64字符串的方法。 首先，让我们从Vue组件...
img图片转base64格式方法
rwerewbt的博客
09-02 1148
img图片转base64格式
Base64与img互转
qq_27512271的博客
12-02 4395
1、代码示例： import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import org.apache.co...
前端Canvas绘制图片跨域问题解决
CSDN新星计划JAVA赛道TOP5、CSDN内容合伙人、JAVA领域优质创作者、资深JAVA开发深耕JAVA领域。
08-27 2036
functionimageUrlToBase64(){ //一定要设置为let，不然图片不显示 constimage=newImage(); //解决跨域问题 image.setAttribute('crossOrigin','anonymous'); constimageUrl='http://ip:8081/baseImagePath/appUserHos...
img转Base64
APerson_Hs的博客
09-23 495
img转Base64 /** * img转Base64 * @param imgFile {File} 图片文件 * @param maxLen {Number} 目标大小 * @returns {Promise<any>} */ function imgToBase64(imgFile, maxLen) { return new Promise((resolve, re...
vue项目base64转img
banlungui2132的博客
09-02 4718
最近一个vue项目中，有个需求是， 发送消息是base64时，转换成图片预览发送出去。 输入框： <el-input class="input-box" ref="elInputText" type="textarea" v-model="content" @paste....
img对象,file对象,base64,canvas对象相互转换以及图片压缩
叶子先生的博客
09-18 570
img对象，file对象，base64，canvas对象相互转换以及图片压缩 </h1> <div class="clear"></div> <div class="postBody"> 先上一张图：   以上图片是js几乎所有图片类型的转换方式了。接下来讲讲几种常用的类型转换： 1、 urltoImage(url,fn) 会通过一...
将拖拽的img转换成获取64位base码（附原码）
Yannnnnm的博客
10-24 472
灵感 前几天在浏览器的一个网站上想转换照片变成视频，发现拖进去的图片转换成了64位的base码，所以想着自己写一下 思路 基本框架 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g
img图片转码base64使用（简单版）
热门推荐
Jar_plo的博客
12-09 1万+
前端图片转base64实操代码。
base64转图片img显示
12-13
以下是使用JavaScript将base64转换为图片并在img标签中显示的方法： ```javascript // 获取img标签 var img = document.getElementById('img'); // 将base64转换为Blob对象 function base64ToBlob(base64) { var ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值