html2canvas图片生成问题

最新推荐文章于 2024-05-28 12:04:22 发布

浊清。。。

最新推荐文章于 2024-05-28 12:04:22 发布

阅读量334

点赞数

分类专栏： html2canvas

本文链接：https://blog.csdn.net/qq_28353055/article/details/109806875

版权

html2canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.跨域图片（需要图片设置允许跨域）
Access-Control-Allow-Origin: ‘*’

2.本地图片打开出现空白
可以用http-server开启服务，打开文件，我这边出现直接双击打开截图出现问题

3.字体重叠：样式引起
4.生成的截图模糊
5.上传到服务端

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>
</head>

<body>
  <div id="myShare">
    <div>内容选择</div>
    <img src="https://sun.uda-edu.com/sunschool/58610f132653453bb371e231c325e696.jpg" id="a" @load="load">
    <div class="bottom">
      <div class='text'>图片生成aaaaaa生成图片生成生成图片生成生成图片生成生成图片生成生成图片生成生成图片生成生成图片生成生成图片生成生成图片生成生成图片生成生成</div>
      <img src="https://sun.uda-edu.com/sunschool/bb130881676f40be998e17aad1e160a4.jpg" class="sunImg" @load="load"></img>
    </div>

    <h1>字体避免重叠</h1>
    <div>图片生成aaaaaa生成图片生成生成图片生成生成图片生成生成图片生成生成图片生成生成图片生成生成图片生成生成图片生成生成图片生成生成图片生成生成</div>
  </div>
  <img src="" alt="" id="myImg">
</body>

</html>

<!-- 最后插入js以及style -->
<script>
  getImg() {
      this.$nextTick(() =>{
        let targetDom = document.getElementById('myShare')
        let targetWidth = targetDom.offsetWidth
        let targetHeight = targetDom.offsetHeight
        let canvas = document.createElement('canvas')
        // 放大1.5倍
        var scale = 1.5; 
        canvas.width = targetWidth * scale;
        canvas.height = targetHeight * scale;
              
        canvas.getContext("2d").scale(scale, scale)
        new html2canvas(targetDom, {
          useCORS: true, // 允许跨域
          backgroundColor: null,
          logging: false, // 日子开启
          allowTaint: false,
          scale,
          // canvas,
          width: targetWidth,
          height: targetHeight,
          dpi: window.devicePixelRatio * scale
        }).then((canvas) => {
          // canvas为转换后的Canvas对象
          console.log('图片生成了哦')
          let oImg = new Image();
          oImg.src = canvas.toDataURL("image/jpeg"); // 导出图片
          let imgUri = canvas
            .toDataURL("image/png")
            .replace("image/png", "image/octet-stream");
          this.upload(canvas)
          console.log('imgUri.length')
          console.log(imgUri.length)
          document.getElementById("myImg").src = imgUri;
        })
      })
    },
    // 图片加载成功后canvas加载
    load (a) {
      ++this.num
      if (this.num > 1) {
        setTimeout(() =>{
          this.getImg()
        }, 200)
      }
    },
</script>
<style>
  img {
      max-width: 100%
    }
  body {
    background: #efefef;
  }
  #myShare {
    width: 300px;
    margin-left: 30px;
    background-color: #fff;
    height: 500rpx;
    border-radius: 20px;
    margin-bottom: 30px;
    padding: 20px;
  }
  .bottom {
    display: flex;
    justify-content: space-between;
  }
  .sunImg {
    width: 100px;
    height: 100px;
  }
  .text {
    flex: 1;
    /* height: 40px; */
    margin-top: 40px;
    line-height: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
</style>

图片上传

upload(canvas) {
      canvas.toBlob(async (blob) => {
        //以时间戳作为文件名 实时区分不同文件 按需求自己定义就好
        let filename = `${new Date().getTime()}.jpg`;
        //转换canvas图片数据格式为formData
        let file2 = new File([blob], filename, { type: "image/jpg" });
        
        let formData = new FormData();
        console.log('file2')
        console.log(file2)
        formData.append("file", file2);
        //将转换为formData的canvas图片 上传到服务器
        let ret = await upload(formData)
        let { data = {} } = ret
        if (data.code === 0) {
          this.loading = false
          this.$message({
            message: '海报生成成功',
            type: 'success'
          })
          this.onClose()
          this.$emit('getUrl', data.data.imgUrl)
        } else {
          this.$message.error('海报生成失败')
        }
      });
    },

浊清。。。

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html2canvas图片生成问题

1.跨域图片（需要图片设置允许跨域）Access-Control-Allow-Origin: ‘*’2.本地图片打开出现空白可以用http-server开启服务，打开文件，我这边出现直接双击打开截图出现问题3.字体重叠：样式引起完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="w
复制链接

扫一扫

专栏目录