关于canvas.toDataURL的那些坑

HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。

如果画布的高度或宽度是0，那么会返回字符串“data:,”。

如果传入的类型非“image/png”，但是返回的值以“data:image/png”开头，那么该传入的类型是不支持的。

Chrome支持“image/webp”类型

html2canvas(element).then(function(canvas) {var contentWidth = canvas.width;var contentHeight = canvas.height;var imgWidth = 2000;var imgHeight = 2000/contentWidth * contentHeight;var pageData = canvas.toDataURL('image/jpeg', 1.0);var pdf = new jsPDF('', 'pt', [imgWidth,imgHeight]);pdf.addImage(pageData, 'png', 0, 0, imgWidth, imgHeight);pdf.save($("#sn").html()+'.pdf');});

此代码是用了jspdf生成当前页面的pdf 发现pageData 由canvas.toDataURL(‘image/jpeg’, 1.0); 获取的变量没有内容，查了好久网上也没发现问题，后来突然想到是有张图片404 导致的有这种问题的同学注意下404 页面有错误 canvas.toDataURL 绘制就会有问题

关于canvas.toDataURL的那些坑相关推荐

android canvas 网络图,【巨坑:toDataURL】canvas合成网络图片
不知有没有小伙伴用过canvas合成图片,然后爆炸报错截图尼玛,然后各种搜索,不外乎以下几种坑爹处理方案: 后端处理,比如Access-Control-Allow-Origin "*&q ...
html5 在线白板,Html5 canvas画图白板踩坑
最近接手了一个小型的H5,最主要的功能大概就是拍照上传和canvas画板了. 主要是记录一下自己菜到像傻子一样的技术. 1.canvas画板隔空打牛!画布越往上部分错位距离越小,越往下距离越大. 2. ...
移动端canvas画图中遇到的坑
处理需求中,遇到一个图片重新绘制拼接的功能,如下图:动态的将二维码重新绘制到图片上面去最开始想到的是有两种解决办法: 1.使用html2canvas插件去将html动态的生成为图片,html2can ...
解决Canvas.toDataURL 图片跨域问题
解决Canvas.toDataURL 图片跨域问题参考文章: (1)解决Canvas.toDataURL 图片跨域问题 (2)https://www.cnblogs.com/ajg016/p/547 ...
canvas.toDataURL()降低图片质量，以减少图片上传大小
注意目前只针对jpg/jpeg格式少部分测试,图片最终是以降低图片质量来限制图片大小,与原图差异较大,如果图片本身是以固定宽高(约150px * 150px)展示时,看不出来差异. canvas针对 ...
php绘制图像黑色的数值,canvas.toDataURL（）通过尝试调整base64的大小而导致黑色图像字符串...
我目前正在尝试调整base64图像的大小,因为图像文件太大而无法在稍后使用php进行处理.我找到了一种通过使用画布调整图像大小来实现这一点的方法.不幸的是,我得到的图像只是一个宽度为300px,高度为 ...
使用FileReader + canvas.toDataURL() 实现图片压缩
主要借助FileReader读取文件.canvas的toDataURL(压缩后图片的格式, 要压缩图片的质量0~1)方法实现图片质量压缩. <template><div>< ...
base64压缩/canvas.toDataURL
"jpg和jpeg没有区别,是缩写的程度不同.jpeg文件扩展名应该为.jpeg,dos 时代的8.3文件规定扩展名不能超过3个字符,就使用了.jpg. canvas.toDataURL(t ...
使用canvas.toDataURL把图片转为base64格式
使用canvas.toDataURL把图片转为base64格式 function getBase64(url) {//通过构造函数来创建的 img 实例,在赋予 src 值后就会立刻下载图片,相比 c ...

关于canvas.toDataURL的那些坑

HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。

如果画布的高度或宽度是0，那么会返回字符串“data:,”。

如果传入的类型非“image/png”，但是返回的值以“data:image/png”开头，那么该传入的类型是不支持的。

Chrome支持“image/webp”类型

关于canvas.toDataURL的那些坑相关推荐

最新文章

热门文章