前端vue3——html2canvas给网站截图生成宣传海报

news2024/11/18 2:23:47

文章目录

- ⭐前言
- ⭐选择html2canvas实现网页截图
- - 💖 截图
- ⭐图片url截图显示不出来问题
- - 💖 解决
- ⭐最终效果
- - 💖 定义海报
- ⭐总结
- ⭐结束

⭐前言

大家好，我是yma16，本文分享关于前端vue3——html2canvas给网站截图生成宣传海报。
vue3系列相关文章：
vue3 + fastapi 实现选择目录所有文件自定义上传到服务器
前端vue2、vue3去掉url路由“ # ”号——nginx配置
csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板
认识vite_vue3 初始化项目到打包
python_selenuim获取csdn新星赛道选手所在城市用echarts地图显示
让大模型分析csdn文章质量 —— 提取csdn博客评论在文心一言分析评论区内容
canvas

JavaScript Canvas is a web technology that allows you to dynamically draw and manipulate graphics on a webpage using JavaScript. With Canvas, you can create complex graphics, animations, and interactive applications that respond to user input. It is a 2D drawing API that provides a set of methods and properties to create and manipulate graphics, images, and animations.

JavaScript Canvas 是一种 Web 技术，允许您使用 JavaScript 在网页上动态绘制和操作图形。使用 Canvas，您可以创建复杂的图形、动画和交互式应用程序，以响应用户输入。它是一个 2D 绘图 API，它提供了一组用于创建和操作图形、图像和动画的方法和属性。

前端截图

前端截图通常使用浏览器提供的 API，例如，利用 HTML5 的 canvas 元素，使用 JavaScript
绘制网页内容，并将结果输出到图片；或者使用浏览器提供的 window 和 document
对象，将内容转换成图片。另外，也可以使用第三方库，例如，html2canvas 和
Puppeter，它们将网页转换为图片并提供了更多功能和控制选项。无论是使用浏览器自带的 API
还是第三方库，它们都需要运行在具有一定的运算和内存资源的计算机上，并且相关的代码需要在浏览器环境中执行。

⭐选择html2canvas实现网页截图

npm安装——html2canvas

$ npm install html2canvas

安装成功！
在inscode环境运行
install-p
使用示例: html2canvas(element, options)
返回html的canvas对象

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

💖 截图

js实现html2canvas截图

import html2canvas from 'html2canvas';
/** 下载图片 */
const downloadBase64 = (content,fileName) => {
  const base64ToBlob = function (code) {
    let parts = code.split(';base64,');
    let contentType = parts[0].split(':')[1];
    let raw = window.atob(parts[1]);
    let rawLength = raw.length;
    let uInt8Array = new Uint8Array(rawLength);
    for (let i = 0; i < rawLength; ++i) {
      uInt8Array[i] = raw.charCodeAt(i);
    }

    return new Blob([uInt8Array], {
      type: contentType
    });
  };
  let aLink = document.createElement('a');
  let blob = base64ToBlob(content);
  aLink.download = fileName + '.png';
  aLink.href = URL.createObjectURL(blob);
  aLink.click();
};

// 截图
const shotAction=()=>{
    html2canvas(document.getElementById('render-id')).then(function(canvas) {
    console.log('canvas',canvas)
    const base64 = canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, '');
    const base64img = `data:image/png;base64,${base64}`;
    downloadBase64(base64img, state.current);
    // document.body.appendChild(canvas);
});
}

vue3评论分析页面
commit

生成截图效果评论
shot

⭐图片url截图显示不出来问题

html2canvas默认能加载图片。
特殊情况由于图片img使用url，导致html2canvas截图的内容显示不出来

💖 解决

解决方案:

url转为base64
配置html2canvas参数useCORS,proxy
配置文档：https://html2canvas.cn/html2canvas-configuration.html

添加参数

// 截图
const shotAction=()=>{
    html2canvas(document.getElementById('render-id'),{
        useCORS:true,
        proxy:'inscode.csdn.net'
    }).then(function(canvas) {
    console.log('canvas',canvas)
    const base64 = canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, '');
    const base64img = `data:image/png;base64,${base64}`;
    downloadBase64(base64img, state.current);
    // document.body.appendChild(canvas);
});
}

vue3 html页面
city-game

截图效果如下
截图结果
inscode项目

⭐最终效果

csdn 查分截图
search-grade

csdn 赛道可视化截图
game

csdn 分析评论截图
commit

💖 定义海报

封装截图方法

/** 下载图片 */
const downloadBase64 = (content:any,fileName:any) => {
    const base64ToBlob = function (code:any) {
        let parts = code.split(';base64,');
        let contentType = parts[0].split(':')[1];
        let raw = window.atob(parts[1]);
        let rawLength = raw.length;
        let uInt8Array = new Uint8Array(rawLength);
        for (let i = 0; i < rawLength; ++i) {
            uInt8Array[i] = raw.charCodeAt(i);
        }

        return new Blob([uInt8Array], {
            type: contentType
        });
    };
    let aLink = document.createElement('a');
    let blob = base64ToBlob(content);
    aLink.download = fileName + '.png';
    aLink.href = URL.createObjectURL(blob);
    aLink.click();
};

// 截图
const shotAction=(dom:any)=>{
    console.log('dom',dom)
    html2canvas(dom,{
        allowTaint:true,
        useCORS:true,
        proxy:'localhost',
        scale:1
    }).then(function(canvas) {
        console.log('canvas',canvas)
        const base64 = canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, '');
        const base64img = `data:image/png;base64,${base64}`;
        downloadBase64(base64img, '邮件');
        // document.body.appendChild(canvas);
    });
}