随风飘扬
随风飘扬
  • 发布:2021-10-22 16:31
  • 更新:2021-10-25 17:15
  • 阅读:602

【报Bug】canvas生成海报问题

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: window 10

浏览器平台: 微信内置浏览器

浏览器版本: 微信版本8.0.15

项目创建方式: CLI

CLI版本号: "@vue/cli-service": "~4.5.0",

App下载地址或H5⽹址: 需要试验时可联系我临时更新测试

示例代码:
<template>  
    <view>  
        <view class="aaaa" @click="addCanvas">点击生成海报</view>  
        <view class="aaaa" @click="saveCanvas">点击保存海报</view>  
        <canvas style="width: 300px; height: 300px;" canvas-id="firstCanvas"></canvas>  
        <image :src="image" v-if="image" width="300" height="300"></image>  
    </view>  
</template>  

<style>  
.aaaa {  
    height: 40px;  
    margin-bottom: 20px;  
    background-color: blue;  
    color: #fff;  
}  
</style>  

<script type="text/javascript">  
export default {  
    data () {  
        return {  
            ctx: null,  
            image: null  
        }  
    },  
    mounted () {  
        this.ctx = uni.createCanvasContext('firstCanvas', this)  
    },  
    methods: {  
        // 读取图片信息  
        setImg (img) {  
            return new Promise ( (resolve, reject) => {  
                uni.getImageInfo({  
                    src: img.url,  
                    success: function(image) {  
                        resolve(image)  
                    },  
                    fail: function(err) {  
                        console.log(err,'获取图片错误')  
                        reject(err)  
                    }  
                });  
            })  
        },  
        addCanvas () {  
            const _this = this;  
            _this.setImg({  
                url: 'https://img.trlpw.com/images/common/2021/10/11/202110116163b74541444.png'  
            }).then ((avatar) => {  
                console.log(avatar)  
                _this.ctx.drawImage(avatar.path, 0, 0, 300, 300)  
                _this.ctx.draw();  
            })  
        },  
        saveCanvas () {  
            const _this = this  
            uni.canvasToTempFilePath({  
                x: 0,  
                y: 0,  
                width: 300,  
                height: 300,  
                destWidth: 300,  
                destHeight: 300,  
                fileType: 'jpg',  
                canvasId: 'firstCanvas',  
                success: function(res) {  
                    console.log(res)  
                    _this.image = res.tempFilePath  
                },  
                fail: function(err) {  
                    uni.showToast({  
                        title: `海报生成失败,${err.errMsg}`,  
                        icon: 'none'  
                    })  
                },  
                complete: function() {  
                    uni.hideLoading();  
                }  
            }, this)  
        }  
    }  
}  
</script>

操作步骤:

同示例代码

预期结果:

微信浏览器内、手机自带浏览器能正常生成图片

实际结果:

实际目前结果微信浏览器内、手机自带浏览器报跨域了

bug描述:

使用 uni.getImageInfo 处理过的图片,能够正常话进canvas里面,但是在H5端,使用 uni.canvasToTempFilePath 把canvas转化为图片时,确报跨域问题

SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

测试结果

本地在chrome浏览器下模拟手机访问测试是正常的,可以正常生成图片,在微信内置浏览器访问、手机自带浏览器访问在保存海报生成图片的时候却报跨域问题

2021-10-22 16:31 负责人:无 分享
已邀请:
DCloud_UNI_GSQ

DCloud_UNI_GSQ

图像是否允许了跨域访问?

  • 随风飘扬 (作者)

    图片是允许跨域的,图片没允许跨域之前,浏览器端模拟手机测试也会报错

    2021-10-26 11:52

该问题目前已经被锁定, 无法添加新回复