二维码生成图片 canvas.toDataURL()降低图片质量，以减少图片上传大小

最新推荐文章于 2024-05-16 11:12:50 发布
最新推荐文章于 2024-05-16 11:12:50 发布
阅读量800 收藏
点赞数
分类专栏： js 文章标签： canvas jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34130158/article/details/109670268
版权
本文介绍了如何使用canvas和jQuery来降低jpg/jpeg格式二维码图片的质量，从而减少图片上传的大小。通过设置不同的encoderOptions值，可以在保持可接受的视觉效果的同时，将图片大小控制在特定范围。不过，这种方法不适用于png和gif格式的图片，因为它们的大小可能会增加。代码示例展示了如何处理本地图片，并提供了调整图片质量的选项。
摘要由CSDN通过智能技术生成
  1. 目前只针对jpg/jpeg格式少部分测试，图片最终是以降低图片质量来限制图片大小，与原图差异较大，如果图片本身是以固定宽高（约150px * 150px）展示时，看不出来差异。
  2. canvas针对png、gif图片的质量降低，处理后图片大小反而增加。不适用于png、gif格式图片
  3. canvas转换成url前，需要已加载一张图片（称为原图），因此前后将保留两张图片的加载（了解）
  4. 代码仅处理了本地图片jpg转换（使用new FileReader()创建本地图片路径并以此加载原图），如果需要处理远程图片，则不需要借助new FileReader()来创建本地图片url，但需要为原图增加属性crossOrigin并赋值Anonymous字符串，且原图在页面中加载，才能使用canvas做图片大小转换
  5. 从控制台输出来看，应该在是图片大小的2.7倍左右。

<input type="file" name="" id="file"> <img src="" alt="" id="preimg" style="width: 150px; height: 150px;"/> <img src="" alt="" id="img" style="width: 150px; height: 150px;"/>

// 测试后定义降低图片质量的encoderOptions值
// 转换后的大小不能保证准确，尽量在800KB以下了

最低0.47元/天 解锁文章
cmhong0888
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas-toDataURL()将图片转为dataURL（base64）
xiaowei的博客
08-18 9377
一个应用场景：由于某些特殊原因从服务端请求到图片路径，要求通过该路径获取对应图片的 base64 dataURL. 一个完整的 dataURI 应该是这样的：data:[<mediatype>][;base64],<data>其中mediatype声明了文件类型，遵循MIME规则，如“image/png”、“text/plain”；之后是编码类型，这里我们只涉及 base64；紧接着就是文件编码后的
java todataurl,canvas.toDataUrl（）返回'data :,'
weixin_26712065的博客
02-27 972
I am trying to resize an image and get back the base64 string representation using canvas.toDataUrl().My code is as follows (see below). My issue is that every time when I first initiate it, it return...
base64压缩/canvas.toDataURL
song854601134的博客
01-11 2368
在指定图片格式为 image/jpeg 或 image/webp 的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。“jpg和jpeg没有区别，是缩写的程度不同。jpeg文件扩展名应该为.jpeg，dos 时代的8.3文件规定扩展名不能超过3个字符，就使用了.jpg。如果传入的类型非“image/png”，但是返回的值以“data:image/png”开头，那么该传入的类型是不支持的。, 支持的是"image/jepg"，encoderOptions 可选。
【前端】利用canvas实现图片压缩（附demo源码）
最新发布
qq_2511276124的博客
05-16 659
有的时候会遇到图片压缩的场景，我们可以使用canvas重新绘制图片，然后利用canvas的toDataURL()API导出base64数据实现图片压缩。
canvas toDataURL
ctxwzc的博客
05-03 474
公司项目的需求，对一个视频进行截图，用的时canvas的getImageData方法,然后再使用toDataURL导出base64的图片。 语法是 canvas.toDataURL(type, encoderOptions); 其中type是图片的格式,用png格式的时候会比jpeg大，如果导出的图片太大，感觉可以用jpeg格式的压缩。encoderOptions可选，0-1，可以调整图片的质量。 ...
html5 todataurl,HTML5 Canvas toDataURL()
weixin_29129919的博客
06-29 728
HTML5 Canvas toDataURL()HTML5 Canvas toDataURL()功能可以抓取HTML5 canvas的内容，从toDataURL()函数返回的数据是一个字符串，表示包含抓取的图形数据的编码URL。在线示例使用canvas toDataURL()功能可以抓取HTML5 canvas的内容。这是完成的代码示例:varcanvas=document.getElem...
HTMLCanvasElement.toDataURL()
sayyy的专栏
08-04 448
HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI。
快速解决Canvas.toDataURL 图片跨域的问题
01-19
如题，在将页面的图片地址进行本地输出时（Html2Canvas.js），因不同源存在跨域问题，会出现toDataURL访问权限问题： 【Redirect at origin ‘http://sub1.xx.com’ has been blocked from loading by Cross-Origin ...
关于canvas.toDataURL 在iOS运行失败的问题解决
11-19
本文将探讨一个特定的问题：`canvas.toDataURL()`在iOS设备上执行失败的问题，以及如何解决这个问题。 首先，`canvas.toDataURL()`方法是HTML5 Canvas API的一部分，用于将画布的内容转换为一个data URL，通常是一...
canvas.toDataURL image/png 报错处理方法推荐
09-28
其中，`canvas.toDataURL()` 方法是将 `canvas` 上的内容转换为一个数据 URL，通常用于保存或分享画布上的图像。然而，在某些情况下，调用这个方法可能会遇到“安全错误”（SecurityError），提示“Tainted canvases...
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
08-28
在IE11浏览器中，使用`canvas.toDataURL`方法可能会遇到`SecurityError`的问题，这是因为IE11在处理跨域图像时的安全策略比其他现代浏览器更为严格。在尝试获取canvas对象上的数据URL时，如果canvas上绘制了来自不...
详解canvas.toDataURL()报错的解决方案全都在这了
11-21
报错详尽信息 Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported. 关键词 canvas.toDataURL() crossOrigin Access-Control-Allow-Origin 前言 最近在做一个创意类的图片合成工具，大概齐就是通过拼接自定义的文字和图片信息生成一张商品图片类似的功能，项目中用到了fabric.js这个画板库，最后一步在保存图片的时候报上面的一长串错误，墙内墙外
【基础知识】HTML5 Canvas API的toDataUrl()的使用（图文、演示）
苏一恒
08-16 5528
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。 教程介绍、教程目录等能在README里查阅。 传送门：https://github.com/827652549/CanvasStudy 方法介绍 HTMLCanvasElement.toDataURL()方法返回一个包含图片展示的 data URL。可以使用ty...
canvas的toDataURL()方法
热门推荐
first_shun的博客
06-14 6万+
canvas的toDataURL()方法是返回一个包含图片展示的 数据URL。可以使用type参数其类型，默认为PNG格式。图片的分辨率为96dpi。 一、语法 canvas.toDataURL(type, encoderOptions); 二、参数 1、type：图片格式，默认为 image/png,可以是其他image/jpeg等 2、encoderOptions：0到1之间的取值，主要用来选定图片的质量，默认值是0.92，超出范围也会选择默认值。 三、返回值 返回值是一个数据u...
html2canvas中toDataURL方法返回值为：data,解决方案
SCscHero的博客
06-02 2238
阅文时长 | 0.35分钟 字数统计 | 572字符 主要内容 | 1、引言&背景 2、解决方案 3、声明与参考资料 a) 应对问题 html2canvas插件中toDataURL方法返回值为：data:,的解决方案？ b) 应用场景 使用html2canvas需要将dom元素保存成图片的场景中。 c) 解决方案概述 博主前端用了elementUI组件，需要保存的dom元素是el-tabs下其中一个el-tab-pane。而触发保存图片的button是在另外一个el-tab-pane，点击这个butto
canvas学习——toDataURL()方法
xm2by的博客
09-12 5万+
toDataURL()方法 1、toDataURL()方法是什么？ toDataURL()是canvas对象的一种方法，用于将canvas对象转换为base64位编码； 2、利用canvas的toDataURL()方法如何将图片转换为base64编码？ 通过将图片绘制到canvas中，然后将canvas对象转换为base64编码，从而实现图片转为base64编码； 3、将图片转换为bas...
今日学习知识点-canvas的toDataURL()方法
Wsyzzzn的博客
12-19 1773
首先复习一下base64位编码，有时我们会先将图片转化为base64格式的情况，这样的好处是减少一张图片的http请求，但是相应的缺点就是转换之后会导致css文件体积增大，而css的体积会影响页面渲染，因此会导致白屏时间长。注：如果传入的类型非“image/png”，但是返回的值以“data:image/png”开头，那么该传入的类型是不支持的。用于设置转换为base64编码后图片的质量，取值范围为0-1，超出取值范围用默认值0.92代替；对象的一种方法，用于将canvas对象转换为base64位编码；
基于canvas.toDataURL实现video和webGl的截图功能
pgLi
01-12 2384
一、背景 开发视频截图功能 其中H264格式使用的是H5的video进行播放 H265格式使用的是WebAssembly解帧，然后通过webGl绘制 二、技术方案 使用canvas.toDataURL(type, encoderOptions);转换成base64，然后放到a标签中，使用浏览器的特性，讲图片下载下来。 type 图片类型，默认值image/png，支持image/jpeg，image/webp encoderOptions 清晰度 默认值为0.92，超过1则使用默认值。（im.
JavaScript 的 canvas.toDataURL 详解
subsistent的博客
09-23 5097
元素以及保存的图像质量要求，生成的数据 URL 可能会较长。在某些情况下，这可能会导致性能问题或网络传输的限制。在这种情况下，可以考虑使用其他方法，如将图像数据上传到服务器进行处理。元素的内容转换为数据 URL 的方法。它返回一个包含图像表示的字符串，可以作为图片的源值使用。返回一个字符串，其中包含了一个基于指定类型的图像表达的数据 URL。需要注意的是，由于数据 URL 包含了完整的图像数据，因此对于较大的。的字符串，表示一个 PNG 格式的图片数据 URL。是 JavaScript 中用于将。
解决canvas.todataurl图片跨域问题指南
在“操作模式说明-快速解决canvas.todataurl 图片跨域的问题”这个主题中，我们可能不会直接关联到ADT-CNC4860铣床控制系统的内容，但我们可以从一般的技术角度探讨图片跨域问题。在Web开发中，`canvas.toDataURL` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值