canvas 转换加压缩base64编码图片

最新推荐文章于 2024-05-24 09:31:27 发布
最新推荐文章于 2024-05-24 09:31:27 发布
阅读量867 收藏
点赞数 1
<!DOCTYPE html>
< html lang = " en " >

< head >
< meta charset = " UTF-8 " >
< meta name = " viewport " content = " width=device-width, initial-scale=1.0 " >
< meta http-equiv = " X-UA-Compatible " content = " ie=edge " >
< title >Document </ title >
</ head >

< input index = " 0 " name = " ss " onchange = " fileUpload(this.files[0],this) " type = " file " >
< input index = " 1 " onchange = " fileUpload(this.files[0],this) " type = " file " >
< img class = " upFileImg " alt = "" style = " width:400px;height:400px;border:1px solid red; " >

< body >
< script >

function fileUpload( file, elem) {
var maxLen = 300;
var img = new Image();
var indexS = elem. getAttribute( " index "); // 获取索引
var upFileImg = document. querySelectorAll( " .upFileImg ");
var reader = new FileReader(); // 读取客户端上的文件
reader. onload = function () {
var url = reader. result; // 读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的.所以必须使用reader.onload，
img. src = url; // reader读取的文件内容是base64,利用这个url就能实现上传前预览图片
};
img. onload = function () {
// 生成比例
var width = img. width, height = img. height;
// 计算缩放比例
var rate = 1;
if ( width >= height) {
if ( width > maxLen) {
rate = maxLen / width;
}
} else {
if ( height > maxLen) {
rate = maxLen / height;
}
};
img. width = width * rate;
img. height = height * rate;
// 生成canvas
var canvas = document. createElement( " canvas ");
var ctx = canvas. getContext( " 2d ");
canvas. width = img. width;
canvas. height = img. height;
ctx. drawImage( img, 0, 0, img. width, img. height);
var base64 = canvas. toDataURL( ' image/jpeg ', 0.9);
upFileImg[ indexS]. src = base64;
console. log( base64)
};
reader. readAsDataURL( file);
}

< / script >
</ body >

</ html >
web渣渣辉
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas压缩图片转换成base64格式输出文件流
08-31
本文主要介绍了canvas压缩图片转换成base64格式输出文件流的方法，具有很好的参考价值。下面跟着小编一起来看下吧
canvas将图片转成base64
热门推荐
不知不觉 | 笔记
07-19 1万+
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;canvas将图片转base64&amp;lt;/title&amp;gt;
img对象，file对象，base64，canvas对象相互转换以及图片压缩
最新发布
springdk2009的博客
05-24 782
会将一个 Canvas 对象压缩转变为一个 Blob 类型对象；fn 为回调方法，包含一个 Blob 对象的参数;会将 File （ Blob ）类型文件转变为 dataURL 字符串,其中 file 参数传入一个 File （ Blob ）类型文件;有时候后它还有可能是一块canvas画布，或者是一个Image对象，或者直接就是一个图片的url地址，我们需要将它们压缩上传到远程；有时候我们也需要将一个。：这个方法便捷，且是同步的，但需要基于当前的内存，换句话说，这个url不能拿到其他页面使用。
canvas转base64image
weixin_45422787的博客
03-29 215
let canvas = document.getElementsByTagName('canvas')[0]; let image = new Image(); image.src = canvas.toDataURL("image/png"); console.log(image.src)
利用canvas 转换图片成base64
qq_36710806的博客
03-27 1666
/通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img> 省去了 append()，也就避免了文档冗余和污染。const canvas = document.createElement("canvas"), //创建canvas元素。width=Img.width, //确保canvas的尺寸和图片一样。
利用canvas图片压缩 转base64
qq_44766377的博客
06-07 2630
canvas 压缩 图片 并以base64上传
weui上传多图片,压缩,base64编码的示例代码
10-15
`FileReader.readAsDataURL(file)`将文件内容转换为Base64编码，这一步对于在网络上传输和显示图片非常有用，因为Base64编码的字符串可以直接嵌入HTML中作为图片的源。 在读取完成后，`reader.onload`回调函数会被...
canvas图片压缩base64位上传
08-14
"canvas图片压缩base64位上传"这个主题就是关于如何利用HTML5的Canvas API来压缩图片，并将其转化为Base64编码，然后通过JavaScript和Java后端进行上传。以下是对这个知识点的详细讲解： 首先，Canvas是HTML5中的一...
前端图片压缩base64后台还原图片
04-19
本文将深入探讨“前端图片压缩base64”这一主题，以及如何在后台还原这些压缩后的图片。 一、前端图片压缩 前端图片压缩的主要目标是减小图片大小，从而减少HTTP请求的数据量，加快网页加载速度。这通常通过以下两...
HTML5 JS压缩图片并获取图片BASE64编码上传
10-21
5. **获取Base64编码**：最后，调用`canvas.toDataURL`方法，传入指定的图片格式和质量（例如"image/jpeg", 0.1），得到压缩后的图片的Base64编码。 6. **上传图片**：将Base64编码的字符串发送到服务器，通常使用...
canvas 图片base64压缩
你当像鸟飞往你的山~~
01-06 278
作者：LoveEmperor-王子様 html> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=n
JS压缩图片（canvas），返回base64码
ting_125的博客
06-05 6331
上传图片时总会遇到图片过大上传不上去的问题，本方法是在网上搜的压缩图片的例子，我测试用了，确实能用，缺点就是图片会失真，不清晰 JS 图片同比例压缩 path pc端传入的路径可以为相对路径，但是在移动端上必须传入的路径是照相图片储存的绝对路径
js上传图片之前利用canvas压缩和转base64
landl_ww的博客
02-26 496
js上传图片之前利用canvas压缩和转base64简介img-compress-tool 是一个通过js和canvas api 对图片文件进行压缩，实现基于es6的语法，适用于pc端和移动端
前端使用canvas实现图片旋转，得到base64
qq_39177417的博客
12-05 537
前端实现图片旋转
vue使用html2canvas生成图片 以及图片转Base64 Base64转文件
weixin_59685936的博客
08-28 813
vue使用html2canvas生成图片 以及图片转Base64 Base64转文件
canvas使用及转换base64+上传图片
weixin_45797900的博客
06-08 2282
canvas使用
前端图片转base64，并使用canvas对图片进行压缩
m0_64642443的博客
08-16 1249
图片转base64通常用在用户上传图片的情况下使用，他的作用就是让用户看到预览的图片不受网络的影响。：首先是用户选择图片上传至服务器，服务器保存接收返回一个url地址，然后客户端带着这个url地址再去请求图片，最后才拿到用户上传的图片预览，这个过程如果是网络不好的情况，很影响用户的体验。在上传的时候不需要依赖服务器的请求，直接在客户端就进行转换，利用的是文件IO读取，这个不受网络IO的影响，并且比网络要快的多并且如果有编辑图片的需求，是不是又得重新进行一次第一步的步骤，如果网络不好，非常的影响用户的体验。
canvas保存为data:image扩展功能的实现
js起点客
08-10 552
【转载 【已知】 canvas提供了toDataURL的接口，可以方便的将canvas画布转化成base64编码的image。目前支持的最好的是png格式，jpeg格式的现代浏览器基本也支持，但是支持的不是很好。 【想要的】 往往这么简单直接的接口通常都满足不了需求。我想要的不仅是简单的通过画布生成一个png，我不想新开一个tab，然后还要右键另存为… 我还需要更方便的自由的配置生成的图
canvas图片旋转，图片base64编码，保存图片
芝芝为荔枝
06-04 3575
canvas图片旋转，图片base64编码，保存图片
JS 压缩图片转base64
05-20
可以使用 JavaScript 的 FileReader 和 Canvas API 实现图片压缩并转换为 base64 编码。 首先，使用 FileReader 将图片读取为 Blob 对象，然后使用 Canvas API 将图片压缩为指定的宽度和高度，最后将压缩后的图片...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值