实现思想：主动滚动一段距离，截一个图，然后裁剪拼接
必备插件：QS-SharePoster
关键步骤：
1.截长图准备
2.截取图片组
3.拼接长图片
1.截长图准备 preparePicture()
获取屏幕可用宽高，页面宽高，及页面底部位置
// 在这之前隐藏无用的模块和元素
setTimeout(function() {
_this.$nextTick(function() {
uni.getSystemInfo({
success: function(res) {
let sh = res.screenHeight;
let sw = res.screenWidth;
let wh = res.windowHeight;
let ww = res.windowWidth;
_this.screenHeight = wh;
_this.screenWidth = ww;
let info = uni.createSelectorQuery().in(_this);
info.select('.page').boundingClientRect(function(data) {
_this.pageHeight = data.height;
_this.pageWidth = data.width;
_this.pageBottom = data.bottom;
}).exec();
}
});
});
}, 100);
// 紧接着开始滚动截图
setTimeout(function() {
_this.getPicture();
}, 300);2.截取图片组 getPicture()
滚动到指定位置，截取和保存图片。
滚动等待：scrollPicture(top)
let _this = this;
return new Promise(function(resolve, rejcet) {
uni.pageScrollTo({
scrollTop: top,
duration: 10,
complete: function() {
setTimeout(function() {
resolve();
}, 300);
},
fail: function() {
reject();
}
});
});获取WebviewObject：getCWV()
let _this = this;
return new Promise(function(resolve, reject) {
// let pages = getCurrentPages();
// let cwv = pages[pages.length - 1].$getAppWebview();
let cwv = _this.$scope.$getAppWebview();
cwv.checkRenderedContent(
{},
async function() {
const bmp = await savePage(cwv, 'cwv_' + _this.cwvArr.length, 0, _this.screenHeight);
_this.cwvArr.push(bmp);
resolve(cwv);
},
function() {
reject();
}
);
});获取每一个截图：getPicture()
try {
let _this = this;
let sh = this.screenHeight;
let sw = this.screenWidth;
let ph = this.pageHeight;
let pw = this.pageWidth;
let pb = this.pageBottom;
let bmpNum = Math.ceil(ph / sh);
for (let i = 0; i < bmpNum; i++) {
if (i == 0) {
console.log('第一页' + i);
await _this.scrollPicture(0);
let cwv = await _this.getCWV();
_this.bmpArr[i] = await cutPage(_this.cwvArr[i], 'bmp_' + i, 0, ph > sh ? sh : ph);
} else if (i == bmpNum - 1) {
console.log('最后一页' + i);
// await _this.scrollPicture( sh * i );
await _this.scrollPicture(ph);
let cwv = await _this.getCWV();
_this.bmpArr[i] = await cutPage(_this.cwvArr[i], 'bmp_' + i, (i + 1) * sh - ph, sh);
} else {
console.log('中间页' + i);
await _this.scrollPicture(sh * i);
let cwv = await _this.getCWV();
_this.bmpArr[i] = await cutPage(_this.cwvArr[i], 'bmp_' + i, 0, sh);
}
}
_this.makePicture(_this.bmpArr);
} catch (e) {
await _this.scrollPicture(0);
this.$showToast('长图生成异常' + e);
}3.拼接长图片 makePicture(urlArr)
try {
let _this = this;
let sh = this.screenHeight;
let sw = this.screenWidth;
let ph = this.pageHeight;
let pw = this.pageWidth;
let pb = this.pageBottom;
let bmpNum = Math.ceil(ph / sh);
let tmp = [];
for (let i = 0; i < bmpNum; i++) {
if (i == 0) {
tmp[i] = {
type: 'image',
id: i,
url: urlArr[i],
dx: 0,
dy: 0,
serialNum: i,
dWidth: sw,
dHeight: ph > sh ? sh : ph
};
} else if (i == bmpNum - 1) {
tmp[i] = {
type: 'image',
id: i,
url: urlArr[i],
dx: 0,
dy: i * sh,
serialNum: i,
dWidth: sw,
dHeight: ph - i * sh
};
} else {
tmp[i] = {
type: 'image',
id: i,
url: urlArr[i],
dx: 0,
dy: i * sh,
serialNum: i,
dWidth: sw,
dHeight: sh
};
}
}
this.imageArr = tmp;
console.log(this.imageArr);
try {
_app.log('准备生成:' + new Date());
const d = await getSharePoster({
_this: _this, //若在组件中使用
type: 'testShareType',
formData: {
//访问接口获取背景图携带自定义数据
},
// bbgh是底部图片高度
background: {
height: ph,
width: sw
},
posterCanvasId: 'canvasId',
delayTimeScale: 30, //延时系数
setCanvasWH: ({ bgObj, type, bgScale }) => {
_this.poster = bgObj;
},
drawArray({ bgObj, type, bgScale, setBgObj, getBgObj }) {
return _this.imageArr;
}
});
_app.log('海报生成成功, 时间:' + new Date() + '， 临时路径: ' + d.poster.tempFilePath);
_this.tempFilePath = d.poster.tempFilePath;
// uni.saveImageToPhotosAlbum({
// filePath: _this.tempFilePath,
// success(res) {
// _app.showToast('保存到相册成功');
// },
// fail() {
// _app.showToast('保存到相册失败');
// }
// });
} catch (e) {
console.log(JSON.stringify(e));
}
// 清除碎图片
for (let i = 0; i < bmpNum; i++) {
let bmp = new plus.nativeObj.Bitmap('bmp_' + i, urlArr[i]);
bmp.recycle();
bmp.clear();
}
} catch (e) {
this.$showToast('保存长图异常' + e);
}savePicture.js
export const savePage = function(wbv, id, starth, endh) {
return new Promise((resolve, reject) => {
try {
let sh = starth;
let eh = endh;
let filePath = _doc/${id}.png
let bmp = new plus.nativeObj.Bitmap(id, filePath);
wbv.draw(
bmp,
function() {
console.log('图片绘制成功' + sh + 'px' + eh + 'px');
// eh - sh + 'px'
bmp.save(
filePath, {
overwrite: true,
format: 'png',
quality: 100
},
function(e) {
console.log('保存图片成功');
console.log(bmp);
let target = e.target; // 保存后的图片url路径，以"file://"开头
let size = e.size; // 保存后图片的大小，单位为字节（Byte）
let width = e.width; // 保存后图片的实际宽度，单位为px
let height = e.height; // 保存后图片的实际高度，单位为px
console.log("width:"+width)
console.log("height:"+height)
// console.log(target)
// console.log(filePath)
resolve(target);
},
function(e) {
console.log('保存图片失败' + JSON.stringify(e));
}
);
},
function(e) {
console.log('图片绘制失败：' + JSON.stringify(e));
},
{
clip:{
top: sh + 'px',
left: '0px',
width: '100%',
height: eh - sh + 'px'
}
}
);
} catch (e) {
console.log('保存图片失败' + JSON.stringify(e));
reject(e);
}
})
}
export const cutPage = function(filePath, id, starth, endh) {
let sh = starth;
let eh = endh;
let bmp = new plus.nativeObj.Bitmap(id);
return new Promise((resolve, reject) => {
try {
// let bmp = new plus.nativeObj.Bitmap(id, filePath);
bmp.load(filePath, function() {
console.log('图片绘制成功' + sh + 'px' + eh + 'px');
bmp.save(
filePath, {
overwrite: true,
format: 'png',
quality: 100,
clip: {
top: sh + 'px',
left: '0px',
width: '100%',
height: eh - sh + 'px'
}
},
function(e) {
console.log('保存图片成功');
console.log(bmp);
let target = e.target; // 保存后的图片url路径，以"file://"开头
let size = e.size; // 保存后图片的大小，单位为字节（Byte）
let width = e.width; // 保存后图片的实际宽度，单位为px
let height = e.height; // 保存后图片的实际高度，单位为px
console.log("width:"+width)
console.log("height:"+height)
// console.log(target)
// console.log(filePath)
resolve(target);
},
function(e) {
console.log('保存图片失败' + JSON.stringify(e));
}
);
}, function(e) {
console.log('图片绘制失败' + JSON.stringify(e));
rejcet(e)
})
} catch (e) {
console.log('保存图片失败' + JSON.stringify(e));
reject(e);
}
})
}
5 个评论
要回复文章请先登录或注册