vue h5页面长按保存为图片

npm install html2canvas  -d
<template>
  <div class="index">
      <div id="captureId" class="capture"   v-show="firstFlag">
        <ul>
          <li>itemi</li>
          <li>itemi</li>
          <li>itemi</li>
          <li>itemi</li>
          <li>itemi</li>
          <li>itemi</li>
          <li>itemi</li>
        </ul>
        <h2>helloworld</h2>
      </div>
    <img :src="dataURL" alt="" v-show="!firstFlag">
  </div>
</template>
<script>
    import html2canvas from 'html2canvas';
    export default {
        data () {
            return {
                dataURL:'',
                firstFlag:true,
            };
        },
      
        mounted(){
            html2canvas(document.querySelector('#captureId')).then(canvas => {
                let imgUrl = canvas.toDataURL('image/png');
                this.dataURL = imgUrl;
                this.firstFlag = false;
            })
        },
        methods: {

        }
    }
</script>
<style lang='less' scoped>
</style>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现在Vue编写的APP中,保存图片至本地,可以参考以下步骤: 1. 首先,在Vue组件中引入HTML5的FileSaver库,用于将文件保存到本地。 ``` npm install file-saver --save ``` 2. 在需要保存图片的地方,添加一个按事件(例如图片),并获取图片的URL。 ``` <template> <img src="your-image-url" @touchstart="onLongPress"> </template> <script> import { saveAs } from 'file-saver'; export default { methods: { onLongPress(e) { e.preventDefault(); const imgUrl = e.target.src; // ... }, }, }; </script> ``` 3. 接下来,使用XMLHttpRequest获取图片数据,并将其转换为Blob对象。 ``` const xhr = new XMLHttpRequest(); xhr.open('GET', imgUrl, true); xhr.responseType = 'blob'; xhr.onload = () => { if (xhr.status === 200) { const blob = xhr.response; // ... } }; xhr.send(); ``` 4. 最后,使用FileSaver库将Blob对象保存为文件。 ``` const fileName = 'your-file-name.png'; saveAs(blob, fileName); ``` 完整示例代码: ``` <template> <img src="your-image-url" @touchstart="onLongPress"> </template> <script> import { saveAs } from 'file-saver'; export default { methods: { onLongPress(e) { e.preventDefault(); const imgUrl = e.target.src; const xhr = new XMLHttpRequest(); xhr.open('GET', imgUrl, true); xhr.responseType = 'blob'; xhr.onload = () => { if (xhr.status === 200) { const blob = xhr.response; const fileName = 'your-file-name.png'; saveAs(blob, fileName); } }; xhr.send(); }, }, }; </script> ``` 注意:由于涉及到文件下载,需要确保浏览器支持download属性,以及用户授权下载。在移动端需要使用touchstart事件,而不是click事件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值