在线图片转base64
function ImgToBase64(url, callback, outputFormat) { // outputFormat 用于指定输出格式的,遵循 MIME 标准
var canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'),
img = new Image;
img.crossOrigin = 'Anonymous';
img.onload = function () {
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0);
const quality = 0. 7; // 压缩的的关键所在,压缩比例
var dataURL = canvas.toDataURL(outputFormat || 'image/jpeg',quality ); // 指定输出格式的地方,遵循 MIME 标准
callback.call(this, dataURL, img);
canvas = null;
};
img.src = url;
}
// 调用函数
ImgToBase64('http://7x2wdd.com2.z0.glb.qiniucdn.com/8eb43ae8fcbc01e130562908e6629bbe?imageMogr2/thumbnail/500%3E', function (base64, img) {
// Base64DataURL
img.src = base64;
document.querySelector('#img').appendChild(img);
});
- 如此便可以将图片以 base64 的形式展示出来了,至于之后是要保存还是怎么做就随你啦!
- 这里转自 ting_125的博客
转本地图片
function convertImgToBase64(url, callback, outputFormat){
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var img = new Image;
img.crossOrigin = 'Anonymous';
img.onload = function(){
var width = img.width;
var height = img.height;
// 按比例压缩4倍
var rate = (width<height ? width/height : height/width)/4;
canvas.width = width*rate;
canvas.height = height*rate;
ctx.drawImage(img,0,0,width,height,0,0,width*rate,height*rate);
var dataURL = canvas.toDataURL(outputFormat || 'image/png');
callback.call(this, dataURL);
canvas = null;
};
img.src = url;
}
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // web_kit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
// 前端只需要给input file绑定这个change事件即可(上面两个方法不用管)huodong-msg为input class
$('.huodong-msg').bind('change',function(event){
var imageUrl = getObjectURL($(this)[0].files[0]);
convertImgToBase64(imageUrl, function(base64Img){
// base64Img为转好的base64,放在img src直接前台展示(<img src="data:image/jpg;base64,/9j/4QMZRXh...." />)
alert(base64Img);
// base64转图片不需要base64的前缀data:image/jpg;base64
alert(base64Img.split(",")[1]);
});
event.preventDefault();
});
- 此处转自按兵不动
在线图片转base64的更多相关文章
- 本地与在线图片转Base64及图片预览
查看效果:http://sandbox.runjs.cn/show/tgvbo9nq 本地图片转Base64(从而可以预览图片): function localImgLoad() { var src ...
- Base64和本地以及在线图片互转
package com.ruoyi.common.utils; import java.io.ByteArrayOutputStream; import java.io.FileInputStream ...
- 在线图片上传、预览、裁切、放大、缩小之 cropbox.js 的应用
cropbox.js 是一个实现了图像在线剪裁的 jQuery .YUI 插件和 JavaScript 库. 上DEMO: 上传的图片可以使用滚轮放大与缩小当前选择的图片,后点击“裁切”后,在右侧的预 ...
- 将图片转换为Base64编码的字符串
图片以文件的形式存在,可以在表单中使用. 也可以转换成Base64编码的字符串,从而在css.js中以字符串的形式使用图片.例如,在css中设置背景图片.在js中用ajax上传图片. <!DOC ...
- php实现图片以base64显示的方法达到效果
目前Data URI scheme支持的类型有: data:text/plain,文本数据data:text/html,HTML代码data:text/html;base64,base64编码的HTM ...
- .net C# 图片转Base64 Base64转图片
//图片 转为 base64编码的文本 private void button1_Click(object sender, EventArgs e) { OpenFileDialog dlg = ne ...
- html5 图片转为base64格式异步上传
因为有这个需求(移动端),所以就研究了一下,发现还挺不错的.这个主要是用了html5的API,不需要其他的JS插件,不过只有支持html5的浏览器才行,就现在而言应该大部份都支持的.<!DOCT ...
- 将图片转换为base64 格式
1.页面上的图片,转换成base64格式,可以通过canvas 的 toDataURL 例子:给定图片的url 将图片转换为base64 var imageSrc = "../images/ ...
- 图片的 base64 编码
图片的 base64 编码就是将一幅图片编码成一串字符串,使用该字符串代替图像地址.我们所看到的网页上的图片,都是需要消耗一个 http 请求下载而来的:(所有才有了 csssprites 技术< ...
随机推荐
- C语言之对指针概念的初步探究
指针?什么是指针? 指针(pointer)是一个值为内存地址的变量(或数据对象). 接下来从变量的角度分析: 变量有两个属性,一个是地址,一个是值. 指针与普通变量的不同之处在于:指针变量的值是一个内 ...
- Kibana源码启动报错记录--ENOSPC
执行该命令可解决:echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysc ...
- P2905 [USACO08OPEN]农场危机Crisis on the Farm
传送门 DP 设 f [ i ] [ j ] [ k ] 表示已经走了 i 步,向上走了 j 步,向右走了 k 步时能拯救的最多奶牛数(j,k可以为负,表示反向) 设 g [ i ] [ j ] 表示 ...
- 在IntelliJ IDEA中配置Google Java Code Style及代码格式化快捷键
google-java-format plugin should intercept the “Reformat Code” action in IDEA (Ctrl+Alt+L) and apply ...
- Photoshop入门教程(四):混合模式
学习心得:混合模式在Photoshop常容易被忽视,最大原因就是它所处的位置比较隐蔽,在图层面板左上部的角落里.使用混合模式,决定图像中上图层像素如何与图像中的下层像素进行混合,使图层的叠加更加炫酷. ...
- 修改jupyter notebook的默认浏览器
1.打开命令行 2.输入jupyter notebook --generate-config 3.显示出jupyter_notebook_config.py 文件所在的目录.按文件目录找到这个文件. ...
- win10重装完登录不了微软账号
in10重装完登录不了微软账号解决方法如下: 点击win键+R,然后输入services.msc回车,进入本地服务管理,查看以下服务是否正常启用了: Microsoft Account Sign-in ...
- 查看CPU和内存,用机器指令和汇编指令编程【Debug模式】
命令 作用 举例 R 查看,改变CPU寄存器的内容 查看:r 改写:r ax D 查看内存中的内容 d 1000:0 f E 改写内存中的内容 e 1000:0 f U 将内存中的机器指令翻译成汇编指 ...
- RTT学习之BSP
---恢复内容开始--- 一 根据相近型号的demo BSP进行修改制作自己的BSP https://github.com/RT-Thread/rt-thread/blob/master/bsp/st ...
- linux 查看页大小
# getconf PAGE_SIZE 一般是4096