實現思想：主動滾動一段距離，截一個圖，然后裁剪拼接

關鍵步驟：

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

}

})

}

貼的有點亂，有空再寫第二個方案吧

總結

以上是生活随笔為你收集整理的android 生成长截图,【UNIAPP截长图】方案之一：滚动截屏 Android的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。