Javascript Canvas:base64在调整大小和重新采样后返回文件？
在JavaScript中，Canvas API提供了一种绘制图形、图像和文本的方法。Canvas API可以将图像转换为Base64编码的字符串，并在需要时重新调整大小和重新采样。以下是如何使用Canvas API将图像转换为Base64编码的字符串，并在调整大小和重新采样后返回文件的方法：
- 首先，创建一个HTML文件，包含一个
canvas元素和一个input元素，用于选择图像文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas to Base64</title>
</head>
<body>
<input type="file" id="inputImage" />
<canvas id="canvas" style="display:none;"></canvas>
<script src="script.js"></script>
</body>
</html>- 接下来，在
script.js文件中，添加以下代码：
const inputImage = document.getElementById('inputImage');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
inputImage.addEventListener('change', (e) => {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = (e) => {
const img = new Image();
img.src = e.target.result;
img.onload = () => {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
const base64Image = canvas.toDataURL('image/jpeg', 0.8);
console.log(base64Image);
};
};
reader.readAsDataURL(file);
});在这个示例中，我们首先获取inputImage和canvas元素的引用。然后，我们为inputImage元素添加一个change事件监听器，当用户选择一个图像文件时，该事件将触发。
在事件处理程序中，我们使用FileReader对象读取用户选择的文件。当文件读取完成后，我们创建一个新的Image对象，并将其src属性设置为文件的Base64编码字符串。当图像加载完成后，我们将其绘制到canvas元素上。
最后，我们使用canvas.toDataURL()方法将canvas元素中的图像转换为Base64编码的字符串，并将其输出到控制台。在这个例子中，我们还将图像的质量设置为0.8，以减小生成的Base64字符串的大小。
这个示例展示了如何使用Canvas API将图像转换为Base64编码的字符串，并在调整大小和重新采样后返回文件。请注意，这个示例仅用于演示目的，实际应用中可能需要进行更多的错误处理和优化。
相关·内容
我很难理解如何在JavaScript中使用JavaScript元素。
我正在实现一个调整大小的功能，用户可以在lightbox中调整图像的大小。在单击预览图像后，lightbox将启动。在lightbox元素中，除了图像本身之外，还有两个宽度和高度的输入字段。其目的是以base64格式生成原始图像的副本，并将其连同给定的宽度和高度作为查询参数发送到服务器，并让服务
浏览 0提问于2018-11-27得票数 2
回答已采纳
1回答
我一直试图找到文档，详细说明关于Html5画布元素的限制，例如它可以加载的最大图像文件大小等。我问的原因是我一直试图通过ctx.scale()调整图像大小，范围从50kb到2.0mb，但这一直是可怕的不一致，因为对于同一图像，有时ctx.drawImage()会成功，有时不成功(不成功是因为画布中没有显示重新缩放的图像我还放置了console.log(base64)来监视var base64 = canvas.toDataURL()的结果，并注意到当成
浏览 1提问于2012-11-23得票数 9
回答已采纳
我有一个很大的jpeg文件，比如10000 x 150000 px。我想添加一个小徽标到底部的图像，而不是重新调整大小。我可以做到这一点，如果我下采样原始图像和绘制的标志使用canvas.But当我最终保存到文件时，图像原始尺寸将减少，因为我正在采样它。如果我在没有下采样的情况下将原始图像加载到位图中，它会超过VM。
浏览 5提问于2015-01-21得票数 0
我正在尝试写一个JAVAScript，它将采取一些base64图像，并返回图像的调整大小的版本。我写了这段代码。但它返回的是一个空图像。我在谷歌上搜索了很多。但是要得到任何解决方案。这是脚本。另外，我如何调整图像的最大宽度和最大高度？function resizeImage(dataurl) {
var canvas = document.createElement('canvas
浏览 0提问于2018-10-23得票数 0
可能重复：
我试过这样做：不起作用。这只适用于Firefox：当然，我可以也可能只将原始的base64编码字符串发送到服务器，并在那里解码它。但是如果可以在客户端做的话，我宁愿在那里做。
浏览 2提问于2011-07-07得票数 5
回答已采纳
我正在尝试创建一个函数，它接收具有宽度和高度的base64图像数据，并在javascript中返回具有给定宽度和高度的重新调整大小的base64图像数据。我目前正在做研究，以找到在js中转换图像的方法，并将在我找到新线索时更新帖子。有没有一个函数已经完成了我想要做的事情？如果不是我伪代码中的一个或多个组件？任何建议都是非常感谢的。下面是我试图实现的当前函数，但它返回一个空白画布，上面没有实际绘制的i
浏览 6提问于2014-08-16得票数 0
webkit-background-size: cover; -o-background-size: cover;}有没有人知道如何让它变得可重构？
浏览 1提问于2014-08-20得票数 1
我能够从相机或文件资源管理器中获取图像。我想上传这个图片，它已经调整了大小，但出现了安全问题。. var data = uri.replace(/^data:image\/(png|jpg);b
浏览 0提问于2014-09-17得票数 0
3回答
有没有可能用javascript或Flash调整图像的大小？我的要求：如果可能的话，我可以节省带宽。我在服务器端使用uploadify上传图片和Codeigniter。注意:参考一些库是很有帮助
浏览 1提问于2011-12-01得票数 3
回答已采纳
2回答
上传前限制图像文件大小
、、、、
我通过AJAX将图片作为base64字符串上传到ASP.NET WebService。由于AJAX/JSON，最大文件大小非常有限(在AJAX请求太长之前，我的测试大约是3MB )。那么，有没有办法将给定图像的大小调整为固定的文件大小(比如3MB)，而不是固定的分辨率？
现在我已经了解了canvas用于调整大小的功能，但是设置分辨率和/或质量并不仅仅是对我来说。
浏览 4提问于2015-11-05得票数 0
回答已采纳
你好，我们在Chrome上的文件上传和IOS 8.1.2上的Safari都有问题。一些照片上传用空字符串显示数据，另一些则显示OK。有人知道解决办法，这样上传的照片才能被一致显示吗？非常感谢。最初，我们认为这是一个已知的问题，文件上传功能破坏在iOS 8 Safari。"“。然而，这似乎是8.0.0的问题，应该已经解决了。日志对象(controllers.js，第228行) src："data:image/jpeg;base64 64，/9j&#x
浏览 2提问于2015-01-27得票数 1
我正在尝试通过桌面或移动设备上的画布元素捕获签名，并调整其大小。因为设备大小不同，所以每个设备的画布也是不同的。在保存签名图像之前，我想要调整它的大小，以便所有保存的图像大小相同。console.log(t.canvas.toDataURL()); }
image.src = this.canvas.toDataURL(&quo
浏览 14提问于2019-06-13得票数 0
回答已采纳
在CamScanner(CS)应用程序的帮助下，我正在上传一个文件(PDF)，其中大部分包含从手机摄像头上拍摄的图像。我可以处理图像文件上传，以减少图像的大小，但我不能减少PDF文件的大小，然后上传。
funct
浏览 0提问于2018-11-29得票数 6
回答已采纳
在(无边界)主表单上有一个TImage，我使用它通过TForm.TransparentColor和TForm.TransparentColorValue进行矩形单击透明区域，如下所示：该窗口的透明区域可以工作，只是在
浏览 6提问于2015-10-14得票数 1
回答已采纳
在上传之前，我一直在尝试调整图像客户端的大小(使用HTML5)。它调整它的大小并发送一个base64字符串，但是它似乎被破坏了。base64字符串有空格、换行符和奇怪的东西，即使我把它们去掉，它似乎仍然是坏的。这是我的HTML： <canvas id="canvas"&g
浏览 1提问于2014-05-05得票数 1
回答已采纳
在上传到服务器之前，我正尝试在浏览器中裁剪base64 jpeg图像并调整其大小。此操作每隔0.5秒定期执行一次。目前，我使用HTML5 canvas来完成此操作，但存在以下问题：2-每次我设置Image.src ="..."；在javascript中，IE消耗的内存增加了大约3MB (显示在任务管理器中)，显然这是一个已知的问题。我的IE版本是10。
我试着完全用ja
浏览 3提问于2013-12-16得票数 1
我正在通过Javascript调整页面上其他图像的大小，使其最大宽度/高度为300 is (取决于哪个维度更大)。
画布是否保留了其300x300维与调整大小</em
浏览 0提问于2016-12-13得票数 0
回答已采纳
任务：我使用了一个不可见的画布元素来绘制图像的完整和调整大小的版本，并通过使用canvas.toDataURL()保存它们，并将此base64编码附加到、img、和a标记。问题
我所面临的问题与我可以删除的图像的文件大小<
浏览 1提问于2014-11-12得票数 3
回答已采纳
我试图使用数据URI在画布元素中绘制图像。我使用Django并将包含照片的base64编码的变量传递给模板。我现在要用以下内容取代这一点：并使用javascript在画布中绘制图像。到目前为止，最接近工作的事情是做<em
浏览 0提问于2013-07-25得票数 2
回答已采纳
1回答
由于某些进程由于图像文件较大而表现不佳，所以我希望在用户获得它们之前调整它们的大小。surface.src = canvas.toDataURL;
我得到了调整大小，但是我只得到
浏览 3提问于2017-06-06得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
