实现思想：主动滚动一段距离，截一个图，然后裁剪拼接

关键步骤：

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);

}

})

}

贴的有点乱，有空再写第二个方案吧