18K
18K
  • 发布:2020-07-13 19:24
  • 更新:2023-12-13 12:20
  • 阅读:5800

html2canvas截屏并保存到手机相册

分类:5+ SDK
<div ref="imageWrapper">  
   <p>要截屏的内容</p>  
</div>
// import html2canvas from "html2canvas"; // 当前vue文件引入html2canvas  
// components: {html2canvas}  

 // 点击保存图片  
    justDoIt() {  
      var that = this;  
      if (navigator.userAgent.indexOf("Html5Plus") >= 0) {  
        that.saveCodeBtnHide(1);  
        // 5+app环境  
        console.log("点击保存图片");  
        that.$nextTick(() => {  
          that.toImage();  
        });  
      }  
    },  
    // 网页截图  
    toImage() {  
      var that = this;  
      setTimeout(() => {  
        html2canvas(this.$refs.imageWrapper, {  
          backgroundColor: null,  
          useCORS: true, // 开启跨域配置  
          allowTaint: true, // 允许跨域图片  
          taintTest: true // 是否在渲染前测试图片  
        }).then(canvas => {  
          let dataURL = canvas.toDataURL("image/png");  
          console.log("网页截图");  
          //   console.log(dataURL);  
          that.savePicture(dataURL);  
        });  
      }, 300);  
    },  
    // 保存图片到相册中  
    savePicture(imgurl) {  
      var that = this;  
      var b = new plus.nativeObj.Bitmap("bitblmap");  
      console.log("☆☆☆☆☆☆ 保存图片到相册中");  
      console.log(b);  
      b.loadBase64Data(  
        imgurl,  
        function() {  
          console.log("图片创建成功");  
          var fileName = "_doc/img1.png";  
          b.save(  
            fileName,  
            { overwrite: true },  
            object => {  
              plus.gallery.save(  
                fileName,  
                () => {  
                  console.log("保存图片到相册成功");  
                },  
                () => {  
                  console.log("保存图片到相册失败");  
                }  
              );  
            },  
            () => {  
              console.log("保存失败");  
            }  
          );  
        },  
        function() {  
          console.log("图片创建失败");  
        }  
      );  
    }
1 关注 分享
大图APP

要回复文章请先登录注册

传播星球

传播星球

Error: Document is not attached to a Window 这是什么意思
2023-12-13 12:20
百倍

百倍

Error: Document is not attached to a Window 请问怎么解决报错
2022-08-19 11:33
名图客

名图客

使用云开发,调用自己云存储的图片却不能放在画布上,好搞笑的一件事情。
uniapp一直在推云开发,这个事情却没解决,当然,这也不是他们能解决的。
曲线救国的办法是用云函数读取云存储图片的buffer,本地在转未base64,不然html2canvas用不了
2021-04-10 18:21
4***@qq.com

4***@qq.com

请教一下 uniapp使用这个 保存到相册是空白的 是什么原因
2021-04-10 18:02