思路:使用html5的新特性:canvas, 该对象有一个toDataURL() 方法,可以将画布内容转换成一个指定编码的数据。我们可以先根据图片的路径将图片“画出来”,然后得到图片的数据。
具体的TypeScript 代码:
1 convertImgToBase64(url, callback) { 2 var canvas = document.createElement('canvas'); 3 canvas.width = 1024; 4 canvas.height = 768; 5 var ctx = canvas.getContext('2d'); 6 var img = new Image; 7 img.crossOrigin = 'Anonymous'; 8 img.onload = function() { 9 canvas.height = img.height; 10 canvas.width = img.width; 11 ctx.drawImage(img, 0, 0); 12 var dataURL = canvas.toDataURL('image/jpeg'); 13 callback.call(this, dataURL); 14 canvas = null; 15 }; 16 img.src = url; 17 }
调用的时候:
this.convertImgToBase64(filePath, function(base64Image) { //filePath 即为图片的路径 //base64 是转化后的图片数据 });