js实现html页面转图片、并保存到本地

最新推荐文章于 2024-08-07 14:10:18 发布

StarFishing

最新推荐文章于 2024-08-07 14:10:18 发布

阅读量2.6w

点赞数 5

分类专栏： js 文章标签： js canvas

本文链接：https://blog.csdn.net/qq_34803821/article/details/84668284

版权

本文介绍如何利用js将HTML页面转换成canvas，再转化为image，最终保存到本地。涉及到的关键技术包括html2canvas库和canvas2image库。在pc端和移动端需要注意不同的保存策略，移动端可以通过长按保存图片，而pc端则需要通过特定的代码来触发保存。同时，文章提到了在本地测试时可能出现的跨域问题，建议在线上环境测试以避免该问题。

摘要由CSDN通过智能技术生成

js实现html页面转图片，并保存图片在本地，实现原理为（html转canvas、canvas转image）

需要的库：canvas2image.js 下载地址：https://github.com/SuperAL/canvas2image；
需要的库：html2canvas.js 下载地址：http://html2canvas.hertzen.com/dist/html2canvas.min.js
效果如下：
在这里插入图片描述

首先是html页面:

<head>
    <meta charset="utf-8">
     <meta name="viewport" content="width=320,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>实现HTML转图片</title>
    <style type="text/css" media="screen">
        .bg{
    
                width: 100%;
                min-height: 100%;
                height: 100vh;
                background-color: #a799ac;
                text-align: center;
        }
        .text{
    
            width: 50%;
            margin-top: 20%;
            height: 25px;
            border: 1px solid #b7c092;
            border-radius: 10px;
            outline: none;
        }
        .save, .picture{
    
            border-radius: 10px;
            border: none;
            width: 60px;
            padding: 0;
            height: 25px;
            background: #9cd8b1;
            outline: none;
        }