在线图片转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();
});
- 此处转自按兵不动
如果你发现你的学习缺乏动力了,那么你只需要在这里调出这篇博客的一大堆毛病并对作者嗤之以鼻,不断抨击作者直到作者的修改让你满意为止,那么你的动力就自然而来了!