android自动截图，并利用插件canvas生成可自定义的图片分享到微信（5+接口因为map地图和echarts截图后会出现黑色部分）

分类：uni-app

第一步：自动截图
使用的插件市场的大佬：https://ext.dcloud.net.cn/plugin?id=1886
// 转码
getBase64ByUri(screenrShotUri) {
console.log("654321");
return new Promise((resolve, reject) => {
try {
console.log("123456");
plus.io.resolveLocalFileSystemURL(
screenrShotUri,
function(entry) {
// 可通过entry对象操作test.html文件
// console.log("可通过entry对象操作test.html文件");
entry.file(function(file) {
var fileReader = new plus.io.FileReader();
// console.log("getFile:" + JSON.stringify(file));

                            fileReader.onloadend = function(evt) {  
                                // console.log(evt.target.result)  
                                resolve(evt.target.result);  
                            };  
                            // fileReader.readAsText(file, 'utf-8');  
                            fileReader.readAsDataURL(file);  
                        });  
                    },  
                    function(e) {  
                        console.log('Resolve file URL failed: ', e);  
                        uni.showToast({  
                            title: '图片读取失败',  
                            icon: 'none'  
                        });  
                        reject();  
                    }  
                );  
            } catch (e) {  
                uni.showToast({  
                    title: '图片读取失败',  
                    icon: 'none'  
                });  
                reject();  
            }  
        });  
    },  
    // 分享  
    shareTraing() {  
        const ssTest = uni.requireNativePlugin('hsj-screenshothsj');  
        ssTest.handle2ScreenShotNotDialogFuncV2({ msg: 'handle2ScreenShotNotDialogFuncV2 ...' }, result => {  
            switch (result.type) {  
                case 0:  
                    this.backText.push(result.data.toString());  
                    break;  
                case 1:  
                    //显示图片  
                    this.src = result.data.toString();  
                    console.log(this.src);  
                    this.getBase64ByUri(this.src).then(res => {  
                        // console.log(res)  
                        this.src = res;  
                        // this.istestshow = true  
                        this.shareFc();  
                    });  
                    this.backText.push('-图片地址路径：' + result.data.toString());  

                    break;  
                default:  
                    console.log('no have type');  
            }  
        });

另附上5+的方法：
/ let pages = getCurrentPages();
let page = pages[pages.length - 1];
// #ifdef APP-PLUS
let ws = page.$getAppWebview();
// #endif
// ws.append(this.mapCtx);
let bitmap = new plus.nativeObj.Bitmap('drawScreen');
// 将webview内容绘制到Bitmap对象中
ws.draw(bitmap, () => {
// 保存图片到本地
bitmap.save("_doc/"+new Date().getTime()+".jpg", {
overwrite: true
}, res => {
console.log(res.target); // 图片地址
}, error => {
console.log(JSON.stringify(error)); // 保存失败信息
});
bitmap.clear(); // 清除Bitmap对象
}, error => {
console.log(JSON.stringify(error)); // 绘制失败
}, {
check: true, // 设置为检测白屏
}); /

第二步：将截图自定义成想要的图片
插件大佬：https://ext.dcloud.net.cn/plugin?id=471#custom
// 画布
async shareFc() {
try {
_app.log('准备生成:' + new Date())
const d = await getSharePoster({
_this: this, //若在组件中使用必传
type: 'testShareType',
formData: {
//访问接口获取背景图携带自定义数据

                },  
                posterCanvasId: this.canvasId,  //canvasId  
                delayTimeScale: 20, //延时系数  
                backgroundImage: this.src,  
                drawArray: ({  
                    bgObj,  
                    type,  
                    bgScale  
                }) => {  
                    const dx = bgObj.width * 0.3;  
                    const fontSize = bgObj.width * 0.045;  
                    const lineHeight = bgObj.height * 0.06;  
                    //可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报  
                    return new Promise((rs, rj) => {  
                        rs([{  
                                type: 'custom',  
                                setDraw(Context) {  
                                    Context.setFillStyle('black');  
                                    Context.setGlobalAlpha(0.7);  
                                    Context.fillRect(0, bgObj.height - bgObj.height * 0.13, bgObj.width, bgObj.height * 0.13);  
                                    Context.setGlobalAlpha(1);  
                                }  
                            },  
                            {  
                                type: 'image',  
                                url: 'http://哈哈哈哈.png', // 图标或者用户头像  
                                alpha: 1,  
                                dx,  
                                dy: bgObj.height - bgObj.width * 0.25,  
                                infoCallBack(imageInfo) {  
                                    let scale = bgObj.width * 0.2 / imageInfo.height;  
                                    return {  
                                        circleSet: {  
                                            x: imageInfo.width * scale / 2,  
                                            y: bgObj.width * 0.2 / 2,  
                                            r: bgObj.width * 0.2 / 2  
                                        }, // 圆形图片 , 若circleSet与roundRectSet一同设置 优先circleSet设置  
                                        dWidth: imageInfo.width * scale, // 因为设置了圆形图片 所以要乘以2  
                                        dHeight: bgObj.width * 0.2,  
                                        /* roundRectSet: { // 圆角矩形  
                                            r: imageInfo.width * .1  
                                        } */  
                                    }  
                                }  
                            },  
                            {  
                                type: 'text',  
                                text: 'app 名称或者其他想要展示的文字',  
                                fontWeight: 'bold',  
                                size: fontSize,  
                                color: 'white',  
                                alpha: 1,  
                                textAlign: 'left',  
                                textBaseline: 'middle',  
                                serialNum: 1,  
                                infoCallBack(textLength) {  
                                    return {  
                                        dx: bgObj.width - textLength - fontSize,  
                                        dy: bgObj.height - lineHeight + 20  
                                    }  
                                }  
                            },  
                            {  
                                type: 'qrcode',  
                                text: 'http:/我的 app下载连接aab0e4d9ebd89d.apk', // 这里是可以将连接或者文件，生成二维码。  
                                size: bgObj.width * 0.2,  
                                dx: bgObj.width*0.05,  
                                dy: bgObj.height - bgObj.width*0.25  
                            }  
                        ]);  
                    })  
                },  
                setCanvasWH: ({  
                    bgObj,  
                    type,  
                    bgScale  
                }) => { // 为动态设置画布宽高的方法，  
                    this.poster = bgObj;  
                }  
            });  
            _app.log('海报生成成功, 时间:' + new Date() + '， 临时路径: ' + d.poster.tempFilePath)  
            this.poster.finalPath = d.poster.tempFilePath;  
            this.qrShow = true;  
        } catch (e) {  
            _app.hideLoading();  
            _app.showToast(JSON.stringify(e));  
            console.log(JSON.stringify(e));  
        }  
    },  
    saveImage() {  
        // #ifndef H5  
        uni.saveImageToPhotosAlbum({  
            filePath: this.poster.finalPath,  
            success(res) {  
                _app.showToast('保存成功');  
            }  
        })  
        // #endif  
        // #ifdef H5  
        _app.showToast('保存了');  
        // #endif  
    },  
    share() {  
        // #ifdef APP-PLUS  
        _app.getShare(false, false, 2, '', '', '', this.poster.finalPath, false, false);  
        // #endif  

        // #ifndef APP-PLUS  
        _app.showToast('分享成功');  
        // #endif  
    },

0 赞关注分享