canvas toDataURL() 方法如何生成部分画布内容的图片
2018-12-10 11:45
253 查看
HTMLCanvasElement.toDataURL()
方法返回一个包含图片展示的 data URI 。可以使用
type参数其类型,默认为 PNG 格式。图片的分辨率为96dpi。
- 如果画布的高度或宽度是0,那么会返回字符串"data:,"
。
- 如果传入的类型非"image/png",但是返回的值以"data:image/png"开头,那么该传入的类型是不支持的。
- Chrome支持"image/webp"类型。
语法
canvas.toDataURL(type, encoderOptions);
参数
type可选图片格式,默认为
image/png
encoderOptions可选在指定图片格式为
image/jpeg 或
image/webp的情况下,可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围,将会使用默认值
0.92。其他参数会被忽略。
返回值
示例
简单生成图片
var canvas = document.getElementById("canvas"); var dataURL = canvas.toDataURL(); console.log(dataURL); // "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby // blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
设置图片质量
var fullQuality = canvas.toDataURL("image/jpeg", 1.0); // data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z" var mediumQuality = canvas.toDataURL("image/jpeg", 0.5); var lowQuality = canvas.toDataURL("image/jpeg", 0.1);
截取canvas部分内容
toDataURL() 是将整个canvas的内容导出,很多时候我们只需要截图canvas中的部分内容,这个时候可以通过 getImageData() 复制画布上指定矩形的像素数据,然后通过 putImageData() 将图像数据放回某个设定了图片相同尺寸的新画布中,然后再使用toDataURL()导出图片。
具体操作代码及效果如下:
相关文章推荐
- 将canvas画布内容转化为图片(toDataURL(),创建url)
- canvas.toDataUrl 画布导出功能(将canvas画板保存为图片格式)!
- Visual Studio 2017中使用正则修改部分内容 如何使用ILAsm与ILDasm修改.Net exe(dll)文件 C#学习-图解教程(1):格式化数字字符串 小程序开发之图片转Base64(C#、.Net) jquery遍历table为每一个单元格取值及赋值 。net加密解密相关方法 .net关于坐标之间一些简单操作
- 如何上传 canvas 的 toDataURL 中的内容
- canvas.toDataURL 画布导出图片
- 微信小程序导出当前画布指定区域的内容并生成图片保存到本地相册(canvas)
- 利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
- 关于如何把canvas中的内容转换为图片上传到服务器的操作过程
- 使用PS切片工具进行切片生成div布局的页面的方法以及如何确定图片中某个点在图片中的位置
- 基于html中canvas标签的验证码图片生成方法
- 安装DZ时出现“UCenter 的URL地址不正确”错误的解决方案 和首页上部分插入flash图片调用的方法!非网上复制!
- shareSDK分享平台分享内容出去显示“来自XXX”的问题及其如何修改分享菜单的背景图片以及调用无UI方法自定义UI分享
- 快速解决Canvas.toDataURL 图片跨域的问题
- Android 如何将Canvas上绘制的内容保存成本地图片(转)
- 如何将Canvas中内容保存为图片
- 用JavaScript将Canvas内容转化成图片的方法
- 将HTML5 Canvas的内容保存为图片借助toDataURL实现
- canvas-toDataURL()将图片转为dataURL(base64)
- 解决webgl使用canvas.toDataURL()没有内容的问题
- 如何将Canvas中内容保存为图片