【报Bug】canvasToTempFilePath h5端生成的是base64是空白

H5 浏览器限制，只能输出base64
下版会支持jpg和app/小程序平台保持一直，可以先写成jpeg(w3c标准)
没有像素问题请提供测试代码

        // 获取图片  

        getImageInfo() {  

            var _this = this;  

            uni.showLoading({  

                title: '图片生成中...',  

            });  

            setTimeout(function () {  

                uni.hideLoading();  



            }, 10000);  

            // 将图片写入画布  

            var ctx = uni.createCanvasContext('myCanvas',this);  



            ctx.drawImage(this.imageSrc, 0, 0, IMG_REAL_W, IMG_REAL_H);  

             // console.log(ctx)  

            ctx.draw(true, (e) => {  

                // 获取画布要裁剪的位置和宽度   均为百分比 * 画布中图片的宽度    保证了在微信小程序中裁剪的图片模糊  位置不对的问题 canvasT = (_this.cutT / _this.cropperH) * (_this.imageH / pixelRatio)  

                var canvasW = ((_this.cropperW - _this.cutL - _this.cutR) / _this.cropperW) * IMG_REAL_W;  

                var canvasH = ((_this.cropperH - _this.cutT - _this.cutB) / _this.cropperH) * IMG_REAL_H;  

                var canvasL = (_this.cutL / _this.cropperW) * IMG_REAL_W;  

                var canvasT = (_this.cutT / _this.cropperH) * IMG_REAL_H;  

                var fileType=_this.imageSrc.replace(/^.+\./,'');  

                if(fileType=='png'){  

                    fileType='png';  

                }else{  

                    fileType='jpg';  

                }  

                // console.log(fileType)  

                uni.canvasToTempFilePath({  

                    x: canvasL,  

                    y: canvasT,  

                    width: canvasW,  

                    height: canvasH,  

                    destWidth: canvasW,  

                    destHeight: canvasH,  

                    quality: 0.5,  

                    canvasId: 'myCanvas',  

                    fileType:fileType,  

                    success:(res)=>{  

                        res.fileType=fileType;  

                        uni.hideLoading()  

                      _this.$emit("changes",res);  

                      }  

                },this);  

            });  

        },

这个代码在小程序，h5+ 都是有效的。h5 是空白的并且返回的base64 是png jpg无效

2019-04-25 17:01

弹一尘 (作者) - app全栈开发

我就是输出base64 但是这个base64是空白的。你可以试试。h5 输出的是空白透明的png。不支持jpg

5***@qq.com

请问你用uni.canvasToTempFilePath在微信上能成功吗？

2019-04-25 17:23
弹一尘 (作者)

回复 5***@qq.com: 能，h5+打包的app也可以

2019-04-25 22:06
弹一尘 (作者)

目前就是h5 不行是透明的png没像素

2019-04-25 22:07

1***@qq.com

H5 透明大bug啊啥时处理下急急急

1***@qq.com

getImageInfo() {
var _this = this;
uni.showLoading({
title: '图片生成中...',
});
// 将图片写入画布
const ctx = uni.createCanvasContext('myCanvas');
ctx.drawImage(_this.imageSrc, 0, 0, IMG_REAL_W, IMG_REAL_H);
ctx.draw(true, () => {
// 获取画布要裁剪的位置和宽度均为百分比 画布中图片的宽度保证了在微信小程序中裁剪的图片模糊位置不对的问题 canvasT = (_this.cutT / _this.cropperH) (_this.imageH / pixelRatio)
var canvasW = ((_this.cropperW - _this.cutL - _this.cutR) / _this.cropperW) IMG_REAL_W;
var canvasH = ((_this.cropperH - _this.cutT - _this.cutB) / _this.cropperH) IMG_REAL_H;
var canvasL = (_this.cutL / _this.cropperW) IMG_REAL_W;
var canvasT = (_this.cutT / _this.cropperH) IMG_REAL_H;
uni.canvasToTempFilePath({
x: canvasL,
y: canvasT,
width: canvasW,
height: canvasH,
destWidth: canvasW,
destHeight: canvasH,
quality: 0.5,
canvasId: 'myCanvas',
success: function (res) {
uni.hideLoading()
// 成功获得地址的地方
/ uni.previewImage({
current: '', // 当前显示图片的http链接
urls: [res.tempFilePath] // 需要预览的图片http链接列表
}) /

                        // #ifdef H5  
                        _this.filePathsss = res.tempFilePath  
                        console.log('H5===>' + _this.filePathsss)  
                        _this.getchangeHeadImg()  
                        // #endif  

                        //#ifdef MP-WEIXIN  
                        uni.getFileSystemManager().readFile({  
                                filePath: res.tempFilePath, //选择图片返回的相对路径  
                                encoding: 'base64', //编码格式  
                                success: res => { //成功的回调  
                                console.log('data:image/png;base64,' + res.data)  
                                _this.filePathsss = res.data  
                                    console.log('MP-WEIXIN===>' + _this.filePathsss)  
                                _this.getchangeHeadImg()  
                                }  
                        })  
                        //#endif  

                        // #ifdef APP-PLUS  
                        var file = res.tempFilePath  
                         plus.io.resolveLocalFileSystemURL(file, function ( entry ) {  
                                var reader = new plus.io.FileReader();  
                                reader.onload = function(e) {  

                                console.log('file0000000000000000000000' + e.target.result)  
                                _this.filePathsss = e.target.result  
                                    console.log('APP-PLUS===>' + _this.filePathsss)  
                                _this.getchangeHeadImg()  
                                }  
                                reader.readAsDataURL(entry,"UTF-8");  
                                });  
                        // #endif  
                         console.log(_this.filePathsss)  

                    }  
                });  
            });  
        },

DCloud_uni-ad_HDX

已修复设置输出宽高属性计算错误问题，下次发版时生效

width: ,  
height: ,  
destWidth: ,  
destHeight: ,

l***@sina.com

啥时发版

2019-05-17 15:26
DCloud_uni-ad_HDX

回复 l***@sina.com: 试试HBuilderX 1.9.7 alpha，已修复此问题

2019-05-17 20:22
l***@sina.com

回复 DCloud_uni-ad_HDX: 试了下，图片出来了，但是有点点截的范围不准，确切的说是起始点越往右越不准,官方示例中把这个改成这样就可以了，要变成2倍 uni.canvasToTempFilePath({

x: canvasL + canvasL,

y: canvasT + canvasT,

2019-05-20 11:09
rudy_24

回复 l***@sina.com: 感觉是3倍比较准

2019-07-09 16:57

【报Bug】canvasToTempFilePath h5端生成的是base64是空白

详细问题描述

5 个回复

公告

相关问题

【报Bug】canvasToTempFilePath h5端生成的是base64是空白

详细问题描述

与内容相关的链接

5 个回复

公告

相关问题