canvas学习——toDataURL()方法

2024-06-24 10:20:27

toDataURL()方法

1、toDataURL()方法是什么？

toDataURL()是canvas对象的一种方法，用于将canvas对象转换为base64位编码；

2、利用canvas的toDataURL()方法如何将图片转换为base64编码？

通过将图片绘制到canvas中，然后将canvas对象转换为base64编码，从而实现图片转为base64编码；

3、将图片转换为base64位编码有什么好处？

将图片转换为base64位编码后，图片会跟随代码（html、css、js）一起请求加载，不会再单独进行请求加载；
可以防止由于图片路径错误导致图片加载失败的问题；

4、toDataURL()方法的两个参数：

toDataURL(type, encoderOptions)

type指定转换为base64编码后图片的格式，如：image/png、image/jpeg、image/webp等等，默认为image/png格式；
encoderOptions用于设置转换为base64编码后图片的质量，取值范围为0-1，超出取值范围用默认值0.92代替；

5、利用canvas将图片转换为base64编码：

function imgToBase64(imgSrc, imgType, callback) {let type = imgType || 'image/png',dataURL,img = new Image();// 允许资源跨域使用img.setAttribute('crossOrigin', 'anonymous');img.src = imgSrc;img.onload = function () {let imgWidth = img.width,imgHeight = img.height;let canvas = document.createElement('canvas'),ctx = canvas.getContext('2d');canvas.width = imgWidth;canvas.height = imgHeight;ctx.drawImage(img, 0, 0, imgWidth, imgHeight);dataURL = canvas.toDataURL(type);console.log(dataURL);callback && callback(dataURL)return dataURL}
}

参考文献：

[1] 用canvas的toDataURL()将图片转为dataURL(base64)
[2] canvas-toDataURL()将图片转为dataURL（base64）
[3] Uncaught SecurityError: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.
[4] 原生js使用canvas实现图片格式webp/png/jpeg在线转换

canvas学习——toDataURL()方法相关推荐

canvas的toDataURL()方法
canvas的toDataURL()方法是返回一个包含图片展示的数据URL.可以使用 type 参数其类型,默认为 PNG 格式.图片的分辨率为96dpi. 一.语法 canvas.toDataUR ...
使用canvas的toDataURL方法将图片转为base64报错：Tainted canvases may not be exported
toDataURL()报错在使用Canvas对图片进行裁切功能时,用到了toDataURL方法. 在调试过程中,发现执行到该方法是会报以下错误: Uncaught DOMException: Fai ...
html5 图片文字提取,HTML5 Canvas：获取canvas内容-toDataURL()
我们可以通过canvas的toDataURL()方法来获取绘制在HTML5 canvas中的内容.做法类似下面的示例代码: var canvas = document.getElementById(& ...
java todataurl_利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
将图片转为base64的好处将图片转换为Base64编码,可以让你很方便地在没有上传文件的条件下将图片插入其它的网页.编辑器中. 这对于一些小的图片是极为方便的,因为你不需要再去寻找一个保存图片的地 ...
canvas生成图片toDataURL报错的原因和解决方法
canvas生成图片toDataURL报错的原因和解决方法参考文章: (1)canvas生成图片toDataURL报错的原因和解决方法 (2)https://www.cnblogs.com/suna ...
java todataurl_html2canvas 转化的 canvas 不能调用toDataURL 方法?
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 //将dom树转换为canvas function print_body() { var test = $('div.helloworld'); html ...
canvas学习和滤镜实现
最近学习了 HTML5 中的重头戏-- canvas .利用 canvas,前端人员可以很轻松地.进行图像处理.其 API 繁多,这次主要学习常用的 API,并且完成以下两个代码: 实现去色滤镜实现 ...
html5无法处理像素点导致图片花了,教你使用Canvas处理图片的方法
Canvas,中文译为"画布",HTML5中新增了元素,可以结合JavaScript动态地在画布中绘制图形. 今天,我们不讲Canvas的图形绘制,而是讲如何对图片进行处理. 大概 ...
小猿圈html5教程之canvas绘制线段方法
HTML5现在是时下较火的编程语言之一,但是对于怎么学习很多朋友都是不了解的,不知道从何处下手,针对以上内容小猿圈web前端讲师每天会分享一个web前端知识,希望对你的前端学习有一定的帮助,今天分享的 ...

最新文章

热门文章