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

最新推荐文章于 2024-05-31 10:03:48 发布
最新推荐文章于 2024-05-31 10:03:48 发布
阅读量2.6w 收藏 27
点赞数 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;
        }
        .title
最低0.47元/天 解锁文章
StarFishing
关注
  • 5
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
网页HTML转图片image并下载
01-14
HTML2image，网页HTML保存成img并下载到本地，基于HTML2Image的一个demo
html2canvas实现将dom生成图片并保存至本地
03-29
使用html2canvas实现图片截图并保存至本地或在页面中以canvas的方式渲染
推荐开源神器：wkhtmltoimage - 瞬间将网页转化为图片的利器！
最新发布
gitblog_00053的博客
05-31 411
推荐开源神器：wkhtmltoimage - 瞬间将网页转化为图片的利器！ 项目地址:https://gitcode.com/h4cc/wkhtmltoimage-amd64 项目介绍 wkhtmltoimage 是一个强大的命令行工具，其源自 wkhtmltopdf 项目，能够轻松地将网页内容转化为高质量的图片。它基于WebKit渲染引擎，能够完美地捕获页面上的HTML、CSS以及JavaSc...
js 将页面保存为图片，并保存到本地，以供使用
u012442504的专栏
04-11 829
<!DOCTYPE html> <html> <head> <title>保存为images</title> <meta charset="utf-8" > </head> <body class="Body"> <div class="AllWrap relative"> &l...
html元素转canvas并一键生成png图片(支持img图片元素)html2canvas、canvas2image
csl125的博客
01-31 2万+
在做项目的时候遇到一个需要把页面上的一些元素一键转成图片并且可以下载，在这里就做一个简单的介绍，希望可以帮到大家！！ 需要引入html2canvas.js、canvas2image.js、base64.js 点击获取资源 需要在header中引入html2canvas.js、canvas2image.js、base64.js 库文件 html2image思路   需要获取
ie下js将html转为图片格式,前端使用html2Canvas或dom-to-image将html生成图片（兼容IE）...
weixin_39781323的博客
05-31 375
准备工作导入框架"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....
js将html转换成图片并下载
weixin_52168983的博客
06-28 2240
1：首先页面引入html2canvas.min.js，下载到本地。总结：希望对大家有所帮助，有其他好的方法或建议可以一起沟通。2：逻辑直接下载代码里了，上代码。
js一键保存当前页面所有图片
码农Robin的博客
03-08 719
一键保存
js实现HTML转换成图片
shengsaihong的博客
08-10 2万+
html2image
HTML5使用html2canvas转化为图片，然后再转为base64.
m0_58266149的博客
10-08 1492
场景：今天同事提了个协助，将HTML5文件中的元素转为图片，并且最终转为base64格式传给后端。感觉还挺有意思就记录下。（试例如下）html部分（这个例子有一个特殊的地方，就是它会显示多个二维码标签。所有我这边使用 DOM来获取下父元素，然后再获取到底下的子元素。遍历下，一个一个转化为图片。代码如下，有不理解的可以留言讨论）">div内容">div内容//1、获取下父元素。
js将html生成为图片，并保存在本地
热门推荐
yyhlichao的专栏
07-12 4万+
html生成图片的方式有很多种，有的需要下载安装插件，如phantomjs 。显得未免麻烦了些，有的又是通过后台来实现的，但个人感觉没必要做这种交互，也没必要在服务端生成这些零时文件，那么问题来了，有没有什么方法，能直接在页面生成图片然后保存在本地呢，答案是肯定的。在这里我为大家介绍的是html2canvas，这款js，能将html转换为canvas，然后我们在将转换的图片保存下来，废话不多，实现...
js实现html转图片并下载保存
03-13
在JavaScript的世界里，将HTML页面转换为图片并允许用户下载保存是一种常见的需求，例如用于屏幕截图、页面预览或者数据可视化。本篇文章将详细介绍如何利用`html2canvas.js`和`canvas2image.js`这两个库来实现这个...
使用HTML截图并保存为本地图片的实现代码
09-22
在网页开发中，有时我们需要将网页的一部分或者整个页面转换为图片并保存到本地，这通常用于截图分享、页面预览等功能。HTML2Canvas是一个JavaScript库，它允许我们在浏览器环境中将HTML渲染为Canvas，进一步可以将...
js链接生成二维码并实现保存二维码到本地
11-29
本文将深入探讨如何使用JavaScript生成链接的二维码并将其保存到本地，主要涉及HTML5和JavaScript技术。 首先，我们需要一个库来生成二维码。QRCode.js是一个流行的JavaScript库，它可以轻松地在网页上生成二维码。...
网页保存图片并下载到本地 兼容IE浏览器
02-20
在网页开发中，有时我们需要将用户当前浏览的页面保存为图片或者将其下载到本地，以供日后查看或分享。在不支持现代Web API的浏览器，尤其是像Internet Explorer（IE）这样的旧版本浏览器中，实现这一功能可能会面临...
将HTML页面生成图片
Breaking_xu的博客
05-21 1万+
    Today,客户又又又提出一个需求:"这个页面我要一个图片,要能下载的图片!" 把html页面变成图片这个应该不是太难,于是我只能去百度查我需要的答案,百度上好多前辈给了一个html2canvas这个东西.   这是对它的介绍:  html2canvas通过获取页面的DOM和元素的样式信息，并将其渲染成canvas图片，从而实现给页面截图的功能。     其实它的用法非常简单,有的...
使用原生JavaScript代码将HTML保存为图片
冰凌的博客
01-02 841
svg转jpeg或png再下载方案：将其转为base64码后，自建img标签并设置src为base64码，为img标签加载事件添加处理函数，函数内容为：将img图片绘制到一个自建canvas标签中，并转为jpeg或png的base64码，再自建a标签并模拟点击进行下载。有朋友了解了我上篇svg绘制中国象棋棋盘后，想要将其使用代码保存下来，正好今天有时间，顺便给大家介绍一下我的解决方案。svg直接下载方案：将其转为base64码，自建a标签并模拟点击进行下载。svg标签内代码从菜鸟教程第一课中拷贝而来。
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 594
引入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、付费专栏及课程。

余额充值