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

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
  • 5
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
htmlJs可以实现本地图片上传到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、付费专栏及课程。

余额充值