在我们日常做项目中,有时候需要把图片转化称base64格式,下面此方法能将本地图片以及网络图片转成base64格式
首先,第一步,我们需要实例化一个 canvas ,因为我们是借助canvas实现格式转化
在Vue项目中 可这样实例化:
<canvas v-show="false"></canvas>
在其他项目中可这样:
<canvas style="dispaly:node"></canvas>
接着是核心部分;
// 图片转为base64格式
export const imageToBase64 = (url, ext, callback) => {
let canvas = document.createElement('canvas'); // 创建canvas DOM元素
const ctx = canvas.getContext('2d');
// eslint-disable-next-line no-var
const img = new Image();
img.crossOrigin = 'Anonymous';
img.src = url;
img.onload = function () {
canvas.width = img.width ;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.height, img.width); // 参数可自定义
// eslint-disable-next-line no-shadow
const dataURL = canvas.toDataURL(`image/${ext}`);
callback(dataURL); // 回掉函数获取Base64编码
canvas = null;
};
};
最后使用时:
imageToBase64(
`${window.location.origin}${imgUrl}`,
'jpg',
(base64) => {
}
)