本文章主要讲解的是前端在上传富文本内容时，把常规的图片src 全部转换为base64图片再进行上传保存。做这个功能的原因是文章保存后查看PDF时图片内容不显示，只有base64图片的内容PDF才能预览。
这个功能主要分为四个部分：
1、截取富文本内容的图片src为数组，并定义一个全局变量用于判断所有图片是否转换完成
let _this = this;
let srcArr = content.split(/src="/g);//截取全部图片为数组
let isEnd = 1;//全局变量
2、用 canvas 生成base64图片的方法
function getBase64Image (img) {//用 canvas 生成base64图片
let canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
let ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
let ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
let dataURL = canvas.toDataURL("image/" + ext);
isEnd++
return dataURL;
}
3、循环img数组 生成新的富文本内容方法，这里return 一个 Promise 返回结果，先要把数据再拼接为字符串再返回给调用者。
function creatBase64(srcArr) {//循环img数组 转换为图片
for (let i = 1; i < srcArr.length; i++) {
let lastIndex = srcArr[i].indexOf('"');//找到第一个 "双引号
let src = srcArr[i].slice(0, lastIndex); //用下标获取每个图片的src
let image = new Image();//动态创建一个图片
image.src = src;
image.onload = function () {//创建后 调用base64 图片转换方法 获取base64格式图片
let base64 = getBase64Image(image);
let newSrc = srcArr[i].slice(lastIndex);//获取 第一个双引号 之后的字符再把 生成的 base64格式的图片的字符拼接起来
srcArr[i] = base64+newSrc;
if (isEnd == srcArr.length) {//用全局变量 判断是否创建完所有6base4图片，返回数组
let result = srcArr.join('src="');//拿到创建完的base64图片数组，拼接为一个字符串，抛出去
resolve(result)
}
}
}
}
creatBase64(srcArr)
总结：这个里使用了Promise，是因为有异步数据再里面，需要等待结果执行完成再返回结果，外部调用者也要等待结果后再发送请求。这虽然实现了功能但本人觉得还有更简洁的方式，如果后期还有新的想法，再做优化更新。
CTRL+C的朋友注意了！！！这三段代码其实是一个函数内的，createBase64函数里面有一个resolve是外层函数 的new Promise的回调，随意复制粘贴会报错的。
了解到部分同行朋友的需求，附上完整的代码案例。
setImageSrc (content) {//重组IMG 图片转换为base64
return new Promise((resolve, reject) => {
let _this = this;
let srcArr = content.split(/src="/g);//截取全部图片为数组
let isEnd = 1;//初始化是否转换完毕
function getBase64Image (img) {//用 canvas 生成base64图片
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
var dataURL = canvas.toDataURL("image/" + ext);
isEnd++
return dataURL;
}
function creatBase64(srcArr) {//循环img数组 转换为图片
for (let i = 1; i < srcArr.length; i++) {
let lastIndex = srcArr[i].indexOf('"');//找到第一个 "双引号
let src = srcArr[i].slice(0, lastIndex); //用下标获取每个图片的src
let image = new Image();//动态创建一个图片
image.src = src;
image.onload = function () {//创建后 调用base64 图片转换方法 获取base64格式图片
let base64 = getBase64Image(image);
let newSrc = srcArr[i].slice(lastIndex);//获取 第一个双引号 之后的字符再把 生成的 base64格式的图片的字符拼接起来
srcArr[i] = base64+newSrc;
if (isEnd == srcArr.length) {//用全局变量 判断是否创建完所有6base4图片，返回数组
let result = srcArr.join('src="');//拿到 创建2完的base64图片数组，拼接为一个字符串，抛出去
resolve(result)
}
}
}
}
creatBase64(srcArr)
})
}
//content需要转换富文本内容
this.setImageSrc(content).then((res) => {
console.log(res);//res转换好的富文本内容
})
网友评论