原文出处:https://www.cnblogs.com/wind-dk/p/9056790.html
思路:使用html5的新特性:canvas, 该对象有一个toDataURL() 方法,可以将画布内容转换成一个指定编码的数据。我们可以先根据图片的路径将图片“画出来”,然后得到图片的数据。
具体的TypeScript 代码:
convertImgToBase64(url, callback) {
var canvas = document.createElement('canvas');
canvas.width = 1024;
canvas.height = 768;
var ctx = canvas.getContext('2d');
var img = new Image;
img.crossOrigin = 'Anonymous';
img.onload = function() {
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL('image/jpeg');
callback.call(this, dataURL);
canvas = null;
};
img.src = url;
}
调用的时候:
this.convertImgToBase64(filePath, function(base64Image) {
//filePath 即为图片的路径
//base64 是转化后的图片数据
});