canvas画布导出图片并下载

2024-04-12 05:03| 来源: 网络整理| 查看: 265

近期在学习关于画布知识，关于画布导出图片，

在导出jpeg格式的图片时，会发现图片背景色变成了黑色，原因是画布透明的地方默认转成了黑色，可以在绘制画布前设置透明处背景色为白色。

// 背景色转换成白色 ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, c.width, c.height);

转换 var c = document.getElementById("canvas"); function drawLove(canvas) { let ctx = canvas.getContext("2d"); ctx.beginPath(); // 背景色转换成白色 ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, c.width, c.height); // ctx.drawImage(img, 0, 0); ctx.fillStyle = "#E992B9"; ctx.moveTo(75, 40); ctx.bezierCurveTo(75, 37, 70, 25, 50, 25); ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5); ctx.bezierCurveTo(20, 80, 40, 102, 75, 120); ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5); ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25); ctx.bezierCurveTo(85, 25, 75, 37, 75, 40); ctx.fill(); } drawLove(c); var butSave = document.getElementById("save"); console.log(butSave) butSave.onclick = function () { // alert('123') var svaeHref = document.getElementById("save_herf"); /* * 传入对应想要保存的图片格式的mime类型 * 常见：image/png，image/gif,image/jpg,image/jpeg */ var img = document.getElementById("save_img"); var tempSrc = canvas.toDataURL("image/jpeg"); // console.log(tempSrc) svaeHref.href = tempSrc; // a 标签的 href 地址 img.src = tempSrc; };

CanvasRenderingContext2D 接口提供的 2D 渲染背景用来绘制元素，为了这个接口的对象，需要在上调用 getContext() ，并提供一个 "2d" 的参数：

toDataURL()这个方法能把画布里的图案转变成base64编码格式的png，然后返回 Data URL数据

【本文地址】

公司简介

联系我们