需求:h5页面弹窗展示的dom和长按保存到手机的图片不一样,保存下来的带二维码
思路:弹窗展示一个dom,用canvas插件针对另外一个弹窗内容(透明度不为0,放到展示弹窗的下层),生成一个img放到弹窗的上层 opacity设置为0即可。
代码如下:
this.imgRef = React.createRef();
state 中存放img
getBase64Image = (url, callback, outputFormat) => { var canvas = document.createElement(‘CANVAS‘), ctx = canvas.getContext(‘2d‘), img = new Image(); img.crossOrigin = ‘‘; img.onload = (res) => { canvas.height = img.height; canvas.width = img.width; ctx.drawImage(img, 0, 0); var dataURL = canvas.toDataURL(outputFormat || ‘image/png‘); this.setState({ img: dataURL, }, () => { this.createPicture(); }) canvas = null; }; img.src = `${url}?timeStamp=${+new Date()}`; } createPicture = () => { const scale = this.getPixelRatio(); // 获取要转换的元素 html2canvas(this.imgRef.current, { scale: scale, useCORS: true, // 开启跨域设置,需要后台设置cors }).then((canvas) => { // toDataURL函数生成img标签的可用数据 图片格式转成 base64 let dataURL = canvas.toDataURL("image/png"); this.setState({ share_image: dataURL, canvasImgOnLoad: true, }); }); };
getPixelRatio = () => {
if (window.devicePixelRatio && window.devicePixelRatio > 1) {
return window.devicePixelRatio;
}
return 1;
};
{/* 隐藏的弹窗 */}
<Modal
transparent
visible={show_share_hide_modal}
onClose={this.close_share}
wrapClassName="member_center_share_modal"
maskTransitionName=‘hide‘
>
<div className="pos-r main_back_color pb24" ref={this.imgRef} >
<main>
<header>
<img src={modal_back} />
</header>
<figure className="middle_figure c-bg-fff radius24">
<div>
<img className="share_modal_left pos-a" src={share_modal_left} />
<img className="share_modal_level_img pos-a" src={img} />
<img className="share_modal_right pos-a" src={share_modal_right} />
<img src={share_modal_name_img} className="share_modal_bottom pos-a" />
</div>
</figure>
<div className="code_share_footer radius16 pl32 mlr0 " >
<>
<QRCode
className={"qr_code_img"}
value={window.location.origin + ‘/#/chou/my/member_center?fr=member_center_htzrwzx_ewm‘}
size={size}
fgColor="#000000"
bgColor="#F7F7F8"
/>
<div className="code_title_box tl">
<div>
<p className={‘fs28 ff-pfr fw-4 c-272A2A code_sub_title‘}>长按或者扫描二维码</p>
</div>
<img src="https://p4.nicaifu.com/hz/3c33a49a2c3c94fa15f9c81741460e22.png" className="code_img" />
</div>
</>
</div>
</main>
</div>
</Modal>
<Modal
transparent
visible={show_share_modal}
onClose={this.close_share}
wrapClassName="member_center_share_modal"
maskTransitionName=‘hide‘
>
{show_loading && <Loading></Loading>}
<div className="pos-r main_back_color pb24" >
{share_image && (
<img className={`show_img pos-a `} onLoad={this.handleImageLoaded} src={share_image} />
)}
<main>
<header>
<img src={modal_back} />
</header>
<figure className="middle_figure c-bg-fff radius24">
<div>
<img className="share_modal_left pos-a" src={share_modal_left} />
<img className="share_modal_level_img pos-a" src={img} />
<img className="share_modal_right pos-a" src={share_modal_right} />
<img src={share_modal_name_img} className="share_modal_bottom pos-a" />
</div>
</figure>
<div className="code_share_footer radius16 pl24 mlr0 ">
<div className={`‘zIndex‘ code_title_box tl`}>
<div className=‘code_title_box_left‘>
<p className={‘fs28 ff-pfr fw-4 c-272A2A code_title‘}>长按图片,保存到手机</p>
<p className={‘fs28 ff-pfr fw-4 c-272A2A code_sub_title‘}>或点击右上角“...”分享你的成就</p>
</div>
</div>
</div>
</main>
</div>
</Modal>