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

最新推荐文章于 2024-06-13 18:29:48 发布
最新推荐文章于 2024-06-13 18:29:48 发布
阅读量2.6w 收藏 28
点赞数 5
分类专栏： js 文章标签： js canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34803821/article/details/84668284
版权
js实现html页面转图片，并保存图片在本地，实现原理为（html转canvas、canvas转image）需要的库：canvas2image.js 下载地址：https://github.com/SuperAL/canvas2image；需要的库：html2canvas.js 下载地址：http://html2canvas.hertzen.com/dist/html2canvas.mi...
摘要由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;
        }
最低0.47元/天 解锁文章
StarFishing
关注
  • 5
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
网页HTML转图片image并下载
01-14
HTML2image，网页HTML保存成img并下载到本地，基于HTML2Image的一个demo
js实现html转图片并下载保存
03-13
在JavaScript的世界里，将HTML页面转换为图片并允许用户下载保存是一种常见的需求，例如用于屏幕截图、页面预览或者数据可视化。本篇文章将详细介绍如何利用`html2canvas.js`和`canvas2image.js`这两个库来实现这个...
使用 js 把当前面下载成为图片
hjh15827475896的博客
01-27 1951
我们在前端有时会把当前的页面显示成图片， 如订单， 物流信息打印出来， 这时， 我们要不用是使用截图工具转发， 要没就是手机拍照， 如果使用 js 来把当前的 html下载成为图片， 怎么做到呢 这里有一个工具 html2canvas 使用起来很简单 用法也很简单，html2canvas(这是里的参数是要使用 canvas 画的 html 上的文档节点) 看下面的这段代码 daochu(){ let node = this.$refs.aaa; html2canv
JS使用html2canvas将html元素转换为图片并添加水印
最新发布
路人贾！
06-13 253
JS使用html2canvas将html元素转换为图片并添加水印
js将网页保存成图片
qq_45602658的博客
11-23 2542
js将网页保存成图片
使用js将网页导出为图片并下载
weixin_49408113的博客
04-25 3554
将网页导出为图片并保存在电脑客户端
js将html转换成图片并下载
weixin_52168983的博客
06-28 2274
1：首先页面引入html2canvas.min.js，下载到本地。总结：希望对大家有所帮助，有其他好的方法或建议可以一起沟通。2：逻辑直接下载代码里了，上代码。
js一键保存当前页面所有图片
码农Robin的博客
03-08 733
一键保存
js实现HTML转换成图片
shengsaihong的博客
08-10 2万+
html2image
HTML5使用html2canvas转化为图片，然后再转为base64.
m0_58266149的博客
10-08 1559
场景：今天同事提了个协助，将HTML5文件中的元素转为图片，并且最终转为base64格式传给后端。感觉还挺有意思就记录下。（试例如下）html部分（这个例子有一个特殊的地方，就是它会显示多个二维码标签。所有我这边使用 DOM来获取下父元素，然后再获取到底下的子元素。遍历下，一个一个转化为图片。代码如下，有不理解的可以留言讨论）">div内容">div内容//1、获取下父元素。
ie下js将html转为图片格式,前端使用html2Canvas或dom-to-image将html生成图片（兼容IE）...
weixin_39781323的博客
05-31 379
准备工作导入框架"canvas-toBlob": "^1.0.0", // yarn add canvas-toBlob or npm install canvas-toBlob --save"file-saver": "^2.0.2", // yarn add file-saver or npm install file-saver --save"html2canvas": "^1.0....
html2canvas实现将dom生成图片并保存至本地
03-29
通过以上介绍，我们可以了解到html2canvas是如何帮助我们在浏览器端实现DOM到图片的转换，以及如何在实际项目中运用这个库来生成和保存网页截图。虽然它有一些限制，但在许多场景下，如用户自定义分享内容、生成预览...
使用HTML截图并保存为本地图片的实现代码
09-22
在网页开发中，有时我们需要将网页的一部分或者整个页面转换为图片并保存到本地，这通常用于截图分享、页面预览等功能。HTML2Canvas是一个JavaScript库，它允许我们在浏览器环境中将HTML渲染为Canvas，进一步可以将...
js链接生成二维码并实现保存二维码到本地
11-29
本文将深入探讨如何使用JavaScript生成链接的二维码并将其保存到本地，主要涉及HTML5和JavaScript技术。 首先，我们需要一个库来生成二维码。QRCode.js是一个流行的JavaScript库，它可以轻松地在网页上生成二维码。...
网页保存图片并下载到本地 兼容IE浏览器
02-20
在网页开发中，有时我们需要将用户当前浏览的页面保存为图片或者将其下载到本地，以供日后查看或分享。在不支持现代Web API的浏览器，尤其是像Internet Explorer（IE）这样的旧版本浏览器中，实现这一功能可能会面临...
js将html生成为图片，并保存在本地
热门推荐
yyhlichao的专栏
07-12 4万+
html生成图片的方式有很多种，有的需要下载安装插件，如phantomjs 。显得未免麻烦了些，有的又是通过后台来实现的，但个人感觉没必要做这种交互，也没必要在服务端生成这些零时文件，那么问题来了，有没有什么方法，能直接在页面生成图片然后保存在本地呢，答案是肯定的。在这里我为大家介绍的是html2canvas，这款js，能将html转换为canvas，然后我们在将转换的图片保存下来，废话不多，实现...
html元素转canvas并一键生成png图片(支持img图片元素)html2canvas、canvas2image
csl125的博客
01-31 2万+
在做项目的时候遇到一个需要把页面上的一些元素一键转成图片并且可以下载，在这里就做一个简单的介绍，希望可以帮到大家！！ 需要引入html2canvas.js、canvas2image.js、base64.js 点击获取资源 需要在header中引入html2canvas.js、canvas2image.js、base64.js 库文件 html2image思路   需要获取
js转换页面为图片并下载
weixin_30883271的博客
03-14 531
1 <div style="background:red;width: 600px;height: 600px;" class="test"> 2 <div id="imgs" style="background:green;"> 3 <div style="background:blue;"> 4 ...
js生成二维码的插件
学习使我快乐_玉祥
11-16 600
引入js文件，测试下面这个代码，应该是管用的。
怎么写html 和 Js 把本地图片上传到canvas里，实现旋转和画图，编辑后并保存下来
04-24
html和Js可以实现本地图片上传到canvas的操作，具体实现方式如下： 1.在HTML页面中添加一个用于上传文件的标签： <input type="file" id="fileInput" /> 2.JS代码中获取到上传的文件数据，并将其绘制到canvas上，代码如下： var canvas = document.getElementById('canvasId'); var ctx = canvas.getContext('2d'); var fileInput = document.getElementById('fileInput'); fileInput.addEventListener('change', function () { var file = fileInput.files[0]; var reader = new FileReader(); reader.onload = function (event) { var img = new Image(); img.onload = function () { canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); } img.src = event.target.result; } reader.readAsDataURL(file); }) 3.实现拖拽功能，代码如下： canvas.addEventListener('dragover', function (e) { e.preventDefault(); }); canvas.addEventListener('drop', function (e) { e.preventDefault(); var file = e.dataTransfer.files[0]; var reader = new FileReader(); reader.onload = function (event) { var img = new Image(); img.onload = function () { canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); } img.src = event.target.result; } reader.readAsDataURL(file); }); 4.实现旋转和画图功能，代码如下： var angle = 0; document.getElementById('rotateBtn').addEventListener('click', function () { angle += 90; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.save(); ctx.translate(canvas.width / 2, canvas.height / 2); ctx.rotate(Math.PI / 180 * angle); ctx.drawImage(img, -img.width / 2, -img.height / 2); ctx.restore(); }); document.getElementById('drawBtn').addEventListener('click', function () { ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(100, 100); ctx.lineTo(150, 50); ctx.closePath(); ctx.lineWidth = 2; ctx.strokeStyle = 'red'; ctx.stroke(); }); 5.实现保存功能，代码如下： document.getElementById('saveBtn').addEventListener('click', function () { var imgData = canvas.toDataURL("image/png"); var a = document.createElement('a'); a.href = imgData; a.download = 'canvas.png'; document.body.appendChild(a); a.click(); document.body.removeChild(a); }); 以上就是如何实现本地图片上传并在canvas中编辑保存的方法。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值