js实现canvas保存图片为png格式并下载到本地

js

function exportCanvasAsPNG(id, fileName) {

    var canvasElement = document.getElementById(id);

    var MIME_TYPE = "image/png";

    var imgURL = canvasElement.toDataURL(MIME_TYPE);

    var dlLink = document.createElement('a');
    dlLink.download = fileName;
    dlLink.href = imgURL;
    dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');

    document.body.appendChild(dlLink);
    dlLink.click();
    document.body.removeChild(dlLink);
}

html

<button onclick="exportCanvasAsPNG('pieChart','nianling')">保存</button>
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用HTML5中的Canvas API来实现将本地图片上传到canvas中进行编辑。具体步骤如下: 1.创建一个HTML5的Canvas元素。 2.创建一个FileReader对象,用来读取本地的图片文件。 3.在FileReader对象的onload事件中,将读取的图片文件转换为图片对象。 4.使用Canvas API将图片绘制到Canvas元素上。 5.进行编辑处理,比如绘制图形、添加文字等。 6.将编辑后的图片导出PNG或JPEG格式,并保存到本地。 以下是示例代码,您可以根据具体需求进行修改: ``` // HTML代码 <canvas id="canvas"></canvas> <input type="file" id="fileInput"> // JavaScript代码 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var fileInput = document.getElementById('fileInput'); fileInput.addEventListener('change', function(e) { var file = fileInput.files[0]; if (file.type.match(/image.*/)) { var reader = new FileReader(); reader.onload = function(e2) { var img = new Image(); img.onload = function() { canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); // 在Canvas中绘制图形 ctx.beginPath(); ctx.fillStyle = '#FF0000'; ctx.fillRect(50, 50, 100, 100); ctx.closePath(); // 在Canvas中添加文字 ctx.font = '32px Arial'; ctx.fillStyle = '#000000'; ctx.fillText('Hello', 200, 100); // 将Canvas导出PNG格式图片 var png = canvas.toDataURL('image/png'); // 将图片保存到本地 var downloadLink = document.createElement('a'); downloadLink.href = png; downloadLink.download = 'edited-image.png'; document.body.appendChild(downloadLink); downloadLink.click(); document.body.removeChild(downloadLink); }; img.src = e2.target.result; }; reader.readAsDataURL(file); } }); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值