如何将canvas转化为图片

有时候，我们绘制好的canvas想存储为本地图片，该怎么做呢?canvas提供了一个重要的方法toDataURL()，这个方法能把画布里的图案转变成base64编码格式的png或者其他格式的图片(根据你传入的mine类型的参数)，然后返回 Data URL数据。

下面是html中的canvas画布

<canvas id="canvas"></canvas>
<button class="button-balanced" id="save">save</button>
<br />
<a href="" download="canvas_love.png" id="save_href"><img src="" id="save_img"/>
</a>

对应的js实现

var c=document.getElementById("canvas");
function drawLove(canvas){let ctx = canvas.getContext("2d");ctx.beginPath();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");
butSave.οnclick=function(){var svaeHref = document.getElementById("save_href");/** 传入对应想要保存的图片格式的mime类型* 常见：image/png，image/gif,image/jpg,image/jpeg*/var img = document.getElementById("save_img");var tempSrc = canvas.toDataURL("image/png");svaeHref.href=tempSrc; img.src=tempSrc;
};

点击save按钮后，显示图片，点击图片即可弹出下载对话框。

如何将canvas转化为图片相关推荐

canvas转化为图片并下载
jQuery("canvas").each(function(i){function downloadImage(url,filename){var a = document.cr ...
qrcode生成二维码，canvas转化为图片
可以用jquery.qrcode.min.,js将一个页面生成二维码,该插件支持canvas和table,默认为canvas 核心代码: $('#qrcodeCanvas').qrcode({ ...
uni-app 组件中的canvas转化为图片报错：errMsg：“canvasToTempFilePath:fail canvas is empty”
项目场景: uni-app,开发微信小程序使用: wx.canvasToTempFilePath({canvasId: 'line',success: function(res) {console. ...
将canvas转化为图片
1.首先把浏览器设置为可跨域的模式点此查看 2.然后找到canvas的 canves的绘制的 Id,将下方的id:canvas的替换为自己的canvasID var img = document.c ...
app canvas渲染后图片黑色_H5 基于 canvas 实现电子签名并生成PDF文档
(给前端大全加星标,提升前端技能) 转自:coyota666 https://juejin.cn/post/6901273585428463624 前言电子签名通俗来说就是通过技术手段实现在电子文档 ...
python html转图片失真_html dom 转化成图片踩坑记（canvas toDataURL）
需求在开发过程中遇到这么一个需求,h5页面需要将一个html dom转化成图片,便于用户保存. 面向百度搜索第三方得 html2canvas 和 dom-to-image 两者在写这篇笔记之前在gi ...
如何通过canvas 把页面代码转化为图片
今天分享下"如何通过canvas 把页面代码转化为图片"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一 ...
Vue使用html2canvas将Dom转化为图片
Vue使用html2canvas将页面转化为图片工具: 官网入口一.下载 npm install --save html2canvas 二.使用 <template><div&g ...
domtoimage -- html转化为图片
html转化为图片前言这段时间的工作中,一直在做canvas类的H5,开发的过程中很关键的一部分是将dom节点转化为图片.起初是用html2canvas来做的,做完之后感觉图片清晰度的效果不是很好 ...

如何将canvas转化为图片

如何将canvas转化为图片相关推荐

最新文章

热门文章