canvas将图片转成base64

最新推荐文章于 2024-05-20 22:28:51 发布
最新推荐文章于 2024-05-20 22:28:51 发布
阅读量1.8w 收藏 10
点赞数 5
分类专栏： html5 javascript canvas
javascript 同时被 3 个专栏收录
28 篇文章 0 订阅
订阅专栏
html5
21 篇文章 0 订阅
订阅专栏
canvas
1 篇文章 0 订阅
订阅专栏 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>canvas将图片转base64</title>
    </head>
    <body>
        <p>canvas绘制的网络图片</p>
        <canvas id="canvas"></canvas>
        <p>img显示的base64格式图片</p>
        <img src="" id="img">
        <script>
            // 参考链接 https://www.jianshu.com/p/6fe06667b748
            // 网络图片地址必须服务器设置允许跨域
            var image = "https://www.xx.jpg" 
            // 调用
            convertImageToBase64(image)
            function convertImageToBase64(image) {
                var canvas = document.getElementById("canvas");
                var ctx = canvas.getContext('2d');
                var imgObj = new Image();
                // 先设置图片跨域属性
                imgObj.setAttribute("crossOrigin",'anonymous')
                // 再给image赋值src属性，先后顺序不能颠倒
                imgObj.src = image;
                // 当图片加载完成后，绘制图片到canvas
                imgObj.onload = function () {
                    // 设置canvas宽高等于图片实际宽高
                    canvas.width = this.width;
                    canvas.height = this.height;
                    ctx.drawImage(this, 0, 0);
                    // 将图片转成base64格式
                    var img = canvas.toDataURL("image/jpeg", 0.5); // toDataUrl可以接收2个参数，参数一：图片类型，参数二： 图片质量0-1（不传默认为0.92）
                        document.getElementById('img').setAttribute("src", img) // 将base64格式图片显示到页面上
                }
            }
        </script>
    </body>
</html>
、不知不觉、
关注
  • 5
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
实现canvas 图片拖拽旋转移动 点击转成base64
04-14
使用hammer.js监听触控时产生的位移，并用Jcanvas.js画出来，从而实现在canvas画布内进行手势的拖拽 旋转 ...不足：canvas加载图片缩放时有失真（前一个上传的demo则不失真） 优点:可双点触控 同时进行移动缩放旋转效果
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
09-27
在进行Web开发时，我们经常会遇到使用HTML5的`canvas`元素处理图像的情况，特别是将图像转换成`base64`编码或者特定格式如JPEG。然而，在处理具有透明度的PNG图片时，可能会遇到一个问题：当`canvas`将PNG转换为JPEG...
canvas压缩图片转换成base64格式输出文件流
08-31
本文主要介绍了canvas压缩图片转换成base64格式输出文件流的方法，具有很好的参考价值。下面跟着小编一起来看下吧
利用canvas 转换图片成base64
qq_36710806的博客
03-27 1679
/通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img> 省去了 append()，也就避免了文档冗余和污染。const canvas = document.createElement("canvas"), //创建canvas元素。width=Img.width, //确保canvas的尺寸和图片一样。
把图片转换成Base64形式存储
最新发布
sun0322
05-20 3491
类来进行Base64编码，它是在Java 8中引入的官方 API，提供了更稳定和可靠的Base64编码功能。最好的做法是事先知道流的大小，或者使用其他方法来准确获取流的大小，比如记录文件大小或者使用其他方式来确定流的结束标记。方法的返回值取决于操作系统和文件系统的不同，可能会导致错误的结果。更为可靠的方式是根据实际读取到的数据大小来确定字节数组的大小。方法来确定流的大小，因为它并不总是返回精确的流大小。方法会返回缓冲区中的字节数，而不是整个流的大小。方法的行为有不同的解释，导致返回值的不确定性。
利用canvas图片压缩 转base64
qq_44766377的博客
06-07 2642
canvas 压缩 图片 并以base64上传
canvas转base64image
weixin_45422787的博客
03-29 217
let canvas = document.getElementsByTagName('canvas')[0]; let image = new Image(); image.src = canvas.toDataURL("image/png"); console.log(image.src)
前端使用canvas实现图片旋转，得到base64
qq_39177417的博客
12-05 543
前端实现图片旋转
js 将图片连接转换成base64格式的简单实例
01-21
function convertImgToBase64(url, callback, outputFormat){ var canvas = document.createElement('CANVAS'), ctx = canvas.getContext('2d'), img = new Image; img.crossOrigin = 'Anonymous'; img.onload ...
uniapp 生成海报图片base64转换
04-16
uniapp 生成海报图片base64转换 （微信头像贴在海报上需要base64转换）import { pathToBase64, base64ToPath } from "路径" base64ToPath(res.data.data.poster) .then(path => {}） .catch(error => { ...
Vue项目pdf(base64)转图片遇到的问题及解决方法
10-17
主要介绍了Vue项目pdf(base64)转图片遇到的问题及解决方法,需要的朋友可以参考下
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
11-27
将图片转换成base64编码的，在web网上一般用于小图片上，不仅可以减少图片的请求数量（集合到js、css代码中），还可以防止因为一些相对路径等问题导致图片404错误。 引言 假设一个应用场景：由于某些特殊原因从...
图片转成Base64字符串,供<img/>使用
11-14
将图片转成Base64字符串。供前端Html <img/> 使用 将转换结果替换至src的值就OK了
JQ JS javascript 普通图片上传 图片格式转换 图片base64转换 jpg转base64 png转base64
04-18
本文将深入探讨如何使用jQuery（JQ）、JavaScript（JS）以及base64编码技术来实现普通图片的上传、格式转换以及base64编码转换。我们将讨论jpg和png图片如何转化为base64字符串，以便在网络上传输或存储。 首先，让...
JS实现图片转换成base64的各种应用场景实例分析
10-18
在本文中，我们将深入探讨如何使用JavaScript将图片转换为Base64编码，并讨论其在不同场景下的应用。 首先，让我们看看场景一：将用户本地上传的资源转化为Base64。这种场景通常发生在用户通过浏览器上传图片时。...
vue使用html2canvas生成图片 以及图片转Base64 Base64转文件
weixin_59685936的博客
08-28 828
vue使用html2canvas生成图片 以及图片转Base64 Base64转文件
canvas使用及转换base64+上传图片
weixin_45797900的博客
06-08 2286
canvas使用
使用canvas把png图片转base64编码
CSDN18202250010的博客
05-20 202
使用canvas把png图片转base64编码。
怎么将图片转成base64传给后端
06-07
要将图片转成base64传给后端，可以使用JavaScript中的FileReader对象和canvas对象。 首先，使用FileReader对象读取图片文件，将图片转换成Data URL格式。然后，使用canvas对象将Data URL格式的图片绘制到canvas上，并使用canvas对象的toDataURL()方法将canvas对象中的图片转换成base64格式。 以下是一个示例代码： ```javascript // 选择图片文件 const fileInput = document.getElementById('fileInput'); const file = fileInput.files[0]; // 读取图片文件 const reader = new FileReader(); reader.readAsDataURL(file); // 将图片转换成base64格式 reader.onload = function() { const dataURL = reader.result; const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const img = new Image(); img.onload = function() { canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); const base64 = canvas.toDataURL('image/jpeg'); // 将base64格式的图片传给后端 // ... }; img.src = dataURL; }; ``` 注意，使用canvas对象将图片转换成base64格式时，需要指定图片的格式，例如上面的代码中指定了图片格式为jpeg。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值