Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Js图片转base64,base64转file上传服务器

Js图片转base64,base64转file上传服务器

作者头像
明知山
发布于 2022-05-05 12:11:29
发布于 2022-05-05 12:11:29
6.4K00
代码可运行
举报
文章被收录于专栏:前端开发随笔前端开发随笔
运行总次数:0
代码可运行
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function imgToBase64(url, callback) {
    let canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d'),
        img = new Image
    img.crossOrigin = 'Anonymous'
    img.src = url
    img.onload = () => {
        canvas.height = img.height
        canvas.width = img.width
        ctx.drawImage(img, 0, 0)
        let dataURL = canvas.toDataURL('image/png')
        callback(dataURL)
        canvas = null
    }
}

function base64ToFile(data, callback) {
    let base = window.atob(data.substring(data.indexOf(',') + 1))
    let length = base.length
    let url = new Uint8Array(length)
    while (length--) {
        url[length] = base.charCodeAt(length)
    }
    let file = new File([url], `${new Date().getTime()}.jpg`, {
        type: 'image/jpg'
    })
    callback(file)
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-04-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
js 图片转换base64 base64转换为file对象
相关: https://www.cnblogs.com/fps2tao/p/9268380.html
全栈程序员站长
2022/07/21
9.9K1
使用 html2canvas 生成分享图片,CDN图片不展示问题
生成分享图片,包含后端返回的图文,图片是 cdn 资源。开始尝试使用 html2canvas 时,使用的是本地图片,生成截图无问题。
用户10106350
2022/10/28
2.1K0
img 转为base64(转)
参考文献: https://www.cnblogs.com/tugenhua0707/p/4666076.html
山河木马
2019/03/05
3.4K0
js实现图片资源转化成base64的各种场景
网络上有很多片介绍通过js将图片转换成base64的文章,之所以再写这篇文章的原因时发现没有找到系统的介绍的文章,有的介绍如何实现本地项目的图片转码,有的介绍如何实现网络资源的图片转化,但是系统介绍的少之又少,所以我就在这里将各种场景系统的介绍一下:
yaphetsfang
2020/07/30
2K0
base64图片压缩并转换二进制流
base64 压缩 function dealImage(base64, w, callback) { var newImage = new Image(); var quality = 0.6; newImage.src = base64.url; newImage.setAttribute('crossOrigin', 'Anonymous'); var imgWidth, imgHeight; newImage.onload = function() { imgWid
我乃小神神
2021/12/07
1.9K0
js 图片与base64互相转换
参考地址:http://www.cnblogs.com/mr-wuxiansheng/p/6931077.html
lin_zone
2018/08/15
6K0
《你不知道的 Blob》番外篇
原文对 Blob 的知识点介绍得非常完整清晰,本文通过四个问题来总结本文核心知识:
pingan8787
2020/06/08
2.7K0
面试官昨天问我对base64的理解,着实被问懵了
我们知道一个字节可表示的范围是 0 ~ 255(十六进制:0x00 ~ 0xFF), 其中 ASCII 值的范围为 0 ~ 127(十六进制:0x00 ~ 0x7F);而超过 ASCII 范围的 128~255(十六进制:0x80 ~ 0xFF)之间的值是不可见字符。
用户3806669
2021/03/25
4.8K0
面试官昨天问我对base64的理解,着实被问懵了
本地与在线图片转Base64及图片预览
查看效果:http://sandbox.runjs.cn/show/tgvbo9nq
全栈程序员站长
2022/06/29
2.6K0
get两个js小技能——JS截取视频第一帧&图片转Base64
背景 由于开发之前做的VisualDrag拖拽模板优化的时候,拖拽进去的图片、视频文件等需要进行截图作为封面,目前采用的截图方法是htme2canvas,使用canvas进行的截图操作,所以就会遇到这样的问题,视频和图片图床简单的使用标签加入canvas画布里面无法正确的截图成功。最后采取的措施就是将图片转为base64画入canvas,将视频截取第一帧图片,然后画进canvas,最后进行截图,最后经过折腾,这个方法好像成功了,写这篇博客进行记录下。 JS截取视频第一帧 截取视频的第一帧作为视频的封面
不愿意做鱼的小鲸鱼
2023/03/23
7.1K0
get两个js小技能——JS截取视频第一帧&图片转Base64
base64编码图片数据存储服务器
我在刚开始接触base64编码图片数据时,就是把base64编码图片数据传到后台来解码生成图片。导致生成的图片无法打开,后来才发现其实传到后台的base64编码根本就不完整,导致解码出现问题,无法显示图片。所以,base64编码只能在前端处理。
全栈程序员站长
2022/07/29
1.9K0
jszip demo
安装包 jszip和file-saver 代码 <template> <div class="jszip"> <span @click="demoZip">downloadZip</span> </div> </template> <script> import JSZip from 'jszip' import { saveAs } from 'file-saver' export default { name: "jszip", data
李维亮
2022/04/07
1.8K0
微信小程序webview保存图片
在小程序的 webview 里保存图片. 因为微信的 js-sdk 没有提供 saveImageToPhotosAlbum 方法
chuchur
2022/10/25
3.6K0
# 前端图片压缩方案
先通过 js 中 img 构造函数,实例化 img 对象,后将图片的路径给转移到中,再建立一个 canvas 画布,后对画布进行各方面的数值的设置。
九旬
2023/10/19
3000
图片转换js (img对象,file对象,base64,canvas对象),以及图片压缩方式(转载)
首先想一想我们有哪些需求?大多时候我们需要将一个File对象压缩之后再变为File对象传入到远程图片服务器;有时候我们也需要将一个base64字符串压缩之后再变为base64字符串传入到远程数据库;有时候后它还有可能是一块canvas画布,或者是一个Image对象,或者直接就是一个图片的url地址,我们需要将它们压缩上传到远程;
李维亮
2021/07/08
5K0
js 根据url 转换图片(base64)
function getBase64(url, callback) { var Img = new Image(), dataURL = ''; Img.src = url + '?v
我乃小神神
2020/04/16
15.8K2
图片压缩原理
说起图片压缩,大家想到的或者平时用到的很多工具都可以实现,例如,客户端类的有图片压缩工具 PPDuck3, JS 实现类的有插件 compression.js ,亦或是在线处理类的 OSS 上传,文件上传后,在访问文件时中也有图片的压缩配置选项,不过,能不能自己撸一套 JS 实现的图片压缩代码呢?当然可以,那我们先来理一下思路。
前端迷
2020/08/02
5K0
开发实例:后端Java和前端vue实现图片管理功能
2. 通过input[type=file]元素上传图片,使用element-ui的Upload组件进行封装。
用户1289394
2024/01/19
7500
开发实例:后端Java和前端vue实现图片管理功能
手把手教你实现一个图片压缩工具(Vue与Node的完美配合)
图片压缩对于我们日常生活来讲,是非常实用的一项功能。有时我们会在在线图片压缩网站上进行压缩,有时会在电脑下软件进行压缩。那么我们能不能用前端的知识来自己实现一个图片压缩工具呢?答案是有的。
Vam的金豆之路
2021/12/01
8330
手把手教你实现一个图片压缩工具(Vue与Node的完美配合)
js将图片转换为base64
直接上代码: var img = "imgurl";//imgurl 就是你的图片路径 function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.dra
lin_zone
2018/08/15
14.3K1
相关推荐
js 图片转换base64 base64转换为file对象
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验