.Net Core 3.1 和 uni-app h5 分享图/图片 toDataURL 跨域问题的终极解决办法

yufei       4 月, 1 周 前       263

废话就不多说了,直接说解决方法

1. .NetCore Program.cs 中跨域配置

builder.Services.AddCors(options =>
{
    options.AddPolicy(name: "shareimg",builder => builder.AllowAnyHeader().AllowAnyMethod().AllowAnyOrigin());
});

2. 具体的 controller/action 添加跨域选项

[EnableCors("shareimg")]
public ActionResult GetMine([FromQuery] string bgPath, [FromQuery] string logoPath,[FromQuery] string text)
{
    return _shareService.GetMine(bgPath, logoPath, text);
}

3. h5 / uni-app 前端跨域

<meta charset="utf-8"/>
<head>
    <script>
    function savePicture (url) {
            var image = new Image();
            image.crossOrigin = 'anonymous'
            image.onload = function() {

                // 创建隐藏的可下载链接
                var eleLink = document.createElement('a');
                eleLink.download = (+ new Date()) + '.jpg';
                eleLink.style.display = 'none';
                // 图片转base64地址
                var canvas = document.createElement('canvas');
                var context = canvas.getContext('2d');
                canvas.width = this.naturalWidth;
                canvas.height = this.naturalHeight;
                context.drawImage(this, 0, 0);
                // 如果是PNG图片,则canvas.toDataURL('image/png')
                eleLink.href = canvas.toDataURL('image/jpeg');
                // 触发点击
                document.body.appendChild(eleLink);
                eleLink.click();
                // 然后移除
                document.body.removeChild(eleLink);
            }
            image.src = url;
    };
    function saveImg(){
        var url ="图片地址"
        savePicture(url)
    }
    </script>
</head>
<img src="图片地址" />
<p><button onclick="saveImg()">下载图片</button></p>
目前尚无回复
简单教程 = 简单教程,简单编程
简单教程 是一个关于技术和学习的地方
现在注册
已注册用户请 登入
关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.