h5长按保存图片

最新推荐文章于 2024-03-01 17:22:45 发布

白柚Y

最新推荐文章于 2024-03-01 17:22:45 发布

阅读量185

点赞数

文章标签： java 前端 javascript

本文链接：https://blog.csdn.net/m0_67084957/article/details/132427558

版权

      <div class="wrapper">
        <div class="pop_main">
           <div class="sub_title">
            <span>谢谢你，你捐赠的</span>
            <span class="highlight">{{ projectS.donationInfo.welfareDonationNum }}</span>
            <span>公益值，将用于兑换</span>
          </div>
        </div>
         <button class="share_btn" ref="shareBtnRef" @click="onShare">长按保存图片</button>
     </div>

const onShare = () => {
  html2canvas(document.querySelector('.pop_main'), {
    logging: false,
    allowTaint: true,
    scale: window.devicePixelRatio * 2,
    scrollY: 0,
    scrollX: 0,
    useCORS: true,
    backgroundColor: 'transparent',
  }).then((canvas) => {
    const imgUrl = canvas.toDataURL("image/png");
const base64 = imgUrl.replace('data:image/png;base64,', '');
      emit('onShareCallback', base64);
   
      // H5保存图片
      const imgDom = document.createElement('img');
      imgDom.className = 'download_img'
      imgDom.src = imgUrl;
      const pop_main = document.querySelector('.pop_main');
      const wrapper = document.querySelector('.wrapper');
      const share_btn = document.querySelector('.share_btn');
      wrapper.removeChild(pop_main);
      wrapper.insertBefore(imgDom, share_btn);
  
  });

};