文件(图片)转base64
普通图片转base64
function getBase64(url, callback){
var canvas = document.createElement('canvas'),//创建canvas元素
dataURL= '',
ctx = canvas.getContext('2d'),
img = new Image; //通过构造函数来创建的 img 实例,在赋予 src 值后就会立刻下载图片,相比 createElement() 创建 <img> 省去了 append(),也就避免了文档冗余和污染
img.crossOrigin = 'Anonymous';
img.onload = function(){
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img,0,0,);
dataURL = canvas.toDataURL('image/jpeg', 0.5);
callback?callback(dataURL):null; //调用回调函数
canvas = null;
};
img.src = url; // 图片预览
}
获取file对象 ,获取base64URL
var file=document.querySelector("input[type='file']");
var file1 = file.files[0]// 获取文件对象
var reader = new FileReader();
reader.onload=function(ev){
console.log(this.result)
// console.log(ev.target.result)
}
reader.readAsDataURL(file1);
文件(图片)转base64的更多相关文章
- js 将图片文件转换成base64
1.情景展示 在JavaScript中,如何使用图片文件转换成base64? 2.解决方案 /** * 网络图像文件转Base64 * @param img dom对象 */ function g ...
- js如何将选中图片文件转换成Base64字符串?
如何将input type="file"选中的文件转换成Base64的字符串呢? 1.首先了解一下为什么要把图片文件转换成Base64的字符串 在常规的web开发过程中,大部分上传 ...
- 将input type="file" 类型的图片文件转成base64
带有图片的form表单上传数据是很麻烦的,因为图片通常都是和文字分开上传,这是很麻烦的,所有吧图片转成base64就可以和当成文字上传了.话不多少,看代码: 首先定义一个类型为file的input标签 ...
- base64编码的 文件 图片
//图片 转为 base64编码的文本 private void button1_Click(object sender, EventArgs e) { OpenFileDialog dlg = ne ...
- Visual Studio 2017中使用正则修改部分内容 如何使用ILAsm与ILDasm修改.Net exe(dll)文件 C#学习-图解教程(1):格式化数字字符串 小程序开发之图片转Base64(C#、.Net) jquery遍历table为每一个单元格取值及赋值 。net加密解密相关方法 .net关于坐标之间一些简单操作
Visual Studio 2017中使用正则修改部分内容 最近在项目中想实现一个小工具,需要根据类的属性<summary>的内容加上相应的[Description]特性,需要实现的效 ...
- MD文件图片base64自动编码
看工具链接请直接将文章拉到最后.. 概述 不知道你在使用markdown写文章的时候有没有遇到过这样的烦恼, 文件写完了, 想将写完的文章粘贴到博客的时候, 你满心欢喜的复制粘贴, 但是发现图片根本复 ...
- php 将图片文件转成base64编码的方法
php 将图片文件转成base64编码的方法<pre><?php /** 文件转base64输出 * @param String $file 文件路径 * @return Strin ...
- 将图片转换为base64 格式
1.页面上的图片,转换成base64格式,可以通过canvas 的 toDataURL 例子:给定图片的url 将图片转换为base64 var imageSrc = "../images/ ...
- 图片的 base64 编码
图片的 base64 编码就是将一幅图片编码成一串字符串,使用该字符串代替图像地址.我们所看到的网页上的图片,都是需要消耗一个 http 请求下载而来的:(所有才有了 csssprites 技术< ...
随机推荐
- hdu 1166 敌兵布阵 (线段树、单点更新)
敌兵布阵Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submiss ...
- Linux入门之安装及相关知识。
一.VMware虚拟机安装与使用 1.1.VMware 简介 VMware是一个虚拟PC的软件,可以在现有的操 作系统上虚拟出一个新的硬件环境,相当于模拟 出一台新的PC.以此来实现在一台机器上真正 ...
- django_5:表单1——文件上传
上传文件1 class UserForm(forms.Form): name = forms.CharField() headImg = forms.FileField() def regist(re ...
- vue引用组件的两个方法
<template> <div> <myComponent></myComponent> </div> </template> ...
- 解决django或者其他线程中调用scrapy报ReactorNotRestartable的错误
官网中关于ReactorNotRestartable的错误描述(摘自:https://twistedmatrix.com/documents/16.1.0/api/twisted.internet.e ...
- GitHub 标星 1.6w+,我发现了一个宝藏项目,作为编程新手有福了!
大家好,我是 Rocky0429,一个最近老在 GitHub 上闲逛的蒟蒻... 特别惭愧的是,虽然我很早就知道 GitHub,但是学会逛 GitHub 的时间特别晚.当时一方面是因为菜,看着这种全是 ...
- 掌握Python系统管理-调试和分析脚本2- cProfile和timeit
调试和分析在Python开发中发挥着重要作用. 调试器可帮助程序员分析完整的代码. 调试器设置断点,而剖析器运行我们的代码,并给我们执行时间的详细信息. 分析器将识别程序中的瓶颈.我们将了解pdb P ...
- linux计算机网络基础
OSI7层协议和TCP/IP4层网络协议 第一层:物理层,定义各种物理设备的规范,如通信距离,接口大小等. 第二层:数据链路层,基于mac地址通信是,数据报文封装和相应方式. 第三层:网络层,基于IP ...
- Head First设计模式——模板方法模式
前言:本篇我们讲解模板方法模式,我们以咖啡和茶的冲泡来学习模板方法.关于咖啡另一个设计模式例子也以咖啡来讲解,可以看下:Head First设计模式——装饰者模式 废话不多说,开始进入模板方法模式. ...
- Winows下安装RabbitMQ
RabbitMQ的简介 RabbitMQ是一套开源(MPL)的消息队列服务软件,是由 LShift 提供的一个 Advanced Message Queuing Protocol (AMQP) 的开源 ...