js canvas转base64编码图片不全

各位大神好

我现在的需求是,选择图片,转成base64编码,上传到服务器

思路是用canvas,选择本地图片后,画到canvas上,然后通过canvas获取base64编码

代码如下:

document.choose('image',function(err,uri){
            let ctx = that.$element('drawImage').getContext('2d');
            let img = new Image();
            img.src = uri;
            img.onload = function() {
                console.log('Image load success');
                ctx.drawImage(img, 0, 0, 320, 250);
            }

        }).then(function(data){
            console.log(data)
        })

然后转base64部分

let el =this.$refs.canvas;
        let base = el.toDataURL('image/png');
        console.log(base)

 

然后我是远程模拟器上测试的,为了测试,我现在模拟器里通过相机拍了一张照片

然后选择图片后,模拟器上显示如下

js canvas转base64编码图片不全-鸿蒙HarmonyOS技术社区但是上传到服务器里,通过base64编码还原的图片如下

js canvas转base64编码图片不全-鸿蒙HarmonyOS技术社区

两者就不一样…… 感觉是不全,我本来想用手机真机测试的,结果手机上选择文件时,一点图片就自动退回桌面了……

求解

js
图片
canvas
2022-01-14 21:09:35
浏览
1
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
FrancisJ
2

我之前也遇到过这个问题, 我记得这个是toDataURL本身的问题,你可以打印一下通过这个toDataURL转换出的base64的码流,会发现只有一小截码流,远远不够转换成目标图片的长度。但是好像toDataURL在api版本为7时没有这个问题。

分享
微博
QQ
微信
回复2
2022-01-15 23:53:03
相关问题
怎么把PixelMap图片BASE64
1176浏览 • 1回复 待解决
如何base64换成图片
1256浏览 • 2回复 待解决
JS UI框架中canvas如何动态指定宽高
648浏览 • 1回复 待解决
安卓TextView鸿蒙安卓TextView鸿蒙
3386浏览 • 1回复 待解决
JS开发服务卡加载图片网络受阻
1138浏览 • 1回复 待解决
canvas 貌似不识别啊?
2042浏览 • 1回复 待解决
The <canvas> component does not exist.
1853浏览 • 3回复 待解决
求鸿蒙视频编码解码的具体demo
2094浏览 • 1回复 待解决
hi3861环境编译出现编码问题
5204浏览 • 1回复 待解决
鸿蒙int类型转为Color类型怎么
3142浏览 • 4回复 已解决
DevEco Studio 2.1.0.501 x64配置SDK出错
1059浏览 • 2回复 待解决
前端鸿蒙怎么过渡,需要学习Java吗
1846浏览 • 5回复 待解决
DevEco Studio 2.2.0.200 x64加载样例保错
1154浏览 • 1回复 待解决