signShare() {
this.toImage();
},
toImage() {
Toast.loading();
const node = this.$refs.luckyInfo;
htmlToImage(node, 2).then(img => {
this.shareObject.image = img;
// launchSharePanelPic(this.shareObject);
// 展示海报
this.showPicNewyear(this.shareObject.image, this.shareObject.title);
// this.goPage();
Toast.hide();
}).catch(err => {
console.log(err);
Toast.hide();
})
},
其中，`htmlToImage`为利用`html2canvas`方法将页面`html`转换为`base64`。// 利用html2canvas将页面html转换为base64
export function htmlToImage(node, ratio = 16/9) {
// 获取像素比
const scale = getDPR();
let canvasOptions = document.createElement(“canvas”);
canvasOptions.width = window.innerWidth * scale;
canvasOptions.height = window.innerWidth * ratio * scale;
return new Promise((resolve, reject) => { html2canvas(node, { canvas: canvasOptions }).then(canvas => { let dataUrl = canvas.toDataURL("image/png"); const image = dataUrl.replace(/^.+?base64,/, ""); resolve(image); }).catch(err => { reject(err); });})}
其中，`luckyInfo`为待保存图片区域。点击预览图片后，触发保存事件：saveImgFile() {
const bitmap = new plus.nativeObj.Bitmap(“test”);
bitmap.loadBase64Data(this.footerUrlBase64, function() {
const url = “_doc/” + new Date().getTime() + “.png”; // url为时间戳命名方式
// uni.showToast({
// title: ‘saveHeadImgFile:’ + url,
// icon: ‘none’
// })
bitmap.save(url, {
overwrite: true, // 是否覆盖
// quality: ‘quality’ // 图片清晰度
}, (i) => {
// uni.showToast({
// title: ‘成功回调函数:’ + JSON.stringify(i),
// icon: ‘none’
// })
plus.gallery.save(i.target, function() {
uni.showToast({
title: ‘图片保存至相册成功’,
icon: ‘none’
})
bitmap.clear()
},
function(e) {
uni.showToast({
title: ‘图片保存至相册失败:’ + JSON.stringify(e),
icon: ‘none’
})
bitmap.clear()
},
);
}, (e) => {
uni.showToast({
title: ‘图片保存失败1:’ + JSON.stringify(e),
icon: ‘none’
})
bitmap.clear()
});
}, (e) => {
uni.showToast({
title: ‘图片保存失败2:’ + JSON.stringify(e),
icon: ‘none’
})
bitmap.clear()
});
总结
为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。
包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。
前端面试题汇总
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
JavaScript
性能
linux
