Vue 中使用 html2canvas 把 html 元素导出为图片

忘是亡心i 2022-09-04 07:49 225阅读 0赞

一、安装

npm install html2canvas

二、引入并注册 html2canvas

import html2canvas from 'html2canvas';
    
    components: { 
        html2canvas
    }

三、基础使用，document.body 为要截图的元素

html2canvas(document.body).then(function(canvas) { 
        document.body.appendChild(canvas);
    });

四、Vue 中使用

// 给元素设置一个 id 方便获取该元素
    <div @click="jieping" id="imageWrapper"> html2canvas </div>
    
    // 导出图片
    jieping() { 
      this.$nextTick(() => { 
        html2canvas(document.getElementById('imageWrapper'),{ 
          scale:3,      // 放大
          useCORS: true, // 使用CORS从服务器加载图像
          async: false, // 异步解析和呈现元素
          background: "#ffffff", // 背景颜色
          dpi: 300, // 处理模糊问题
        }).then(canvas => { 
          const img = canvas.toDataURL("image/jpeg").replace("data:image/jpeg;base64,", "")
          const finalImageSrc = "data:image/jpeg;base64," + img
          // 添加a标签用于下载
          const aElem = document.createElement('a')
          document.body.appendChild(aElem)  // 223kb
          aElem.href  = finalImageSrc
          // 图片下载名
          aElem.download = "组织机构图.jpg"
          aElem.click()
          document.body.removeChild(aElem)
        });
      })
    },

发表评论取消回复

表情：

评论列表（有 0 条评论，225人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue使用html2canvas将页面转化为图片

需求是微信端将页面截屏之后保存到本地，使用了html2canvas插件 install `npm install --save html2canvas` 在所需页面

傷城~/ 2023年10月11日 16:42/ 0 赞/ 39 阅读

相关 vue使用jspdf导出表格(非html2canvas导出)

看了所有的博客都是用`html2canvas`导出的，画质都很模糊，它的原理是将你要导出的页面放进一个`dom`，然后利用这个插件把这个`dom`转换为一张`canvas`图片

逃离我推掉我的手/ 2023年05月21日 07:03/ 0 赞/ 15 阅读

相关 html2canvas、canvas2image将HTML网页生成图片

[html2canvas][] [canvas2image][] [参考这个文章][Link 1] [canvas教程][canvas] [html2canvas]

Love The Way You Lie/ 2023年01月18日 12:22/ 0 赞/ 9 阅读

相关 html2canvas.js----html网页指定div保存为图片canvas

1、使用到的插件:html2canvas.js [html2canvas官方网站][html2canvas] 2、使用： <div id="saveWra

不念不忘少年蓝@/ 2022年12月17日 00:29/ 0 赞/ 240 阅读

相关 vue中使用html2canvas

vue中使用html2canvas 解决方法： 1.下载依赖包 npm install --save html2canvas或者cnpm install --sav

男娘i/ 2022年11月27日 07:10/ 0 赞/ 327 阅读

相关使用html2canvas制作图片

@{ ViewBag.Title = "Index"; } <!DOCTYPE html> <html>

阳光穿透心脏的1/2处/ 2022年11月22日 10:28/ 0 赞/ 187 阅读

相关 Vue 中使用 html2canvas 把 html 元素导出为图片

一、安装 npm install html2canvas 二、引入并注册 html2canvas import html2canvas from 'htm

忘是亡心i/ 2022年09月04日 07:49/ 0 赞/ 226 阅读

相关 html元素转canvas并一键生成png图片(支持img图片元素)html2canvas、canvas2image

在做项目的时候遇到一个需要把页面上的一些元素一键转成图片并且可以下载，在这里就做一个简单的介绍，希望可以帮到大家！！需要引入html2canvas.js、canvas2i

╰半夏微凉°/ 2022年06月01日 14:09/ 0 赞/ 220 阅读

相关 vue 使用html2canvas将DOM转化为图片

一、前言我发现将DOM转化为图片是一个非常常见的需求，而自己手动转是非常麻烦的，于是找到了html2canvas这个插件，既是用得比较多的也是维护得比较好的一个插件。

Bertha 。/ 2022年04月10日 01:37/ 0 赞/ 495 阅读

相关 html2canvas 把h5网页保存为图片区域保存

html2canvas 把h5网页保存为图片 > 想把一个网页得某些元素，绘制成图片保存，有些数据是接口动态加载的，所以不能UI给到图片，需要我们把api的数据也绘制到图

你的名字/ 2021年10月19日 11:34/ 0 赞/ 464 阅读