为什么 img onload方法不执行 我是在点击按钮事件 触发的

需求是我要截取前端页面的一个dom 生成截图,于是我用了canvas,但是他提示我有跨域问题,因为我页面里很多图片都是以 http://123.jpg%E7%9A%84%E5%BD%A2%E5%BC%8F%E5%87%BA%E7%8E%B0%2C%E6%B6%89%E5%8F%8A%E4%BA%86%E5%85%B6%E4%BB%96%E5%9F%9F%2C%E6%88%91%E7%99%BE%E5%BA%A6%E4%BA%86%E4%B8%80%E4%B8%8B%2C%E5%BE%88%E5%A4%9A%E4%BA%BA%E8%AF%B4%E8%A6%81%E8%BD%ACbase64%E5%90%8C%E6%BA%90%E5%B0%B1%E5%A5%BD%E4%BA%86%2C%E6%88%91%E5%B0%B1%E6%89%BE%E4%BA%86/ js 图片url转base64的方法 ,如图下, 点击按钮的时候调用,循环所有img标签获取url并转换base64并返回, 但是其中 img.onload事件不执行,导致我转换失败,不太清楚具体问题出在哪
需要转换的图片形式

点击截图按钮调用js

function SavePageData() {
    //获取生成图片URL
    $(".modules").removeClass("editing");
    $("#sortable").scrollTop(0);

    var avatar = '';
    let imgs = document.getElementById('picapp').querySelectorAll('img')

    var base64 = "";
    for (i = 0; i < imgs.length; i++) {
        const cav = document.createElement('canvas');
        const ctx = cav.getContext('2d');
        var img = new Image();
        var url = imgs[i].src
        img.src = imgs[i].src
        ctx.clearRect(0, 0, 0, 0);
        imgs[i].src = convertImgToBase64('https://fastmarket.oss-cn-shenzhen.aliyuncs.com/oss/static/other/1/images/baseMap_index.jpg')


    }




    var _this = this;


    // 获取想要转换的dom节点
    // var dom = document.querySelector('body');
    var dom = document.getElementById('picapp');
    var box = window.getComputedStyle(dom);

    // dom节点计算后宽高
    var width = parseInt(box.width, 10);
    var height = parseInt(box.height, 10);

    // 获取像素比
    if (window.devicePixelRatio && window.devicePixelRatio > 1)
        scaleBy = window.devicePixelRatio;
    else
        scaleBy = 1;


    // 创建自定义的canvas元素
    var canvas = document.createElement('canvas');

    // 设置canvas元素属性宽高为 DOM 节点宽高 * 像素比
    canvas.width = width * scaleBy;
    canvas.height = height * scaleBy;

    // 设置canvas css 宽高为DOM节点宽高
    canvas.style.width = width + 'px';
    canvas.style.height = height + 'px';

    // 获取画笔
    var context = canvas.getContext('2d');

    // 将所有绘制内容放大像素比倍
    context.scale(scaleBy, scaleBy);

    // 设置需要生成的图片的大小，不限于可视区域（即可保存长图）
    var w = document.getElementById('picapp').style.width;
    var h = document.getElementById('picapp').style.height;

    html2canvas(dom, {
        allowTaint: true,
        width: width,
        height: height,
        useCORS: true
    }).then(function (canvas) {
        // 将canvas转换成图片渲染到页面上
        var PicUrl = canvas.toDataURL('image/png');// base64数据
}
    });
}
function convertImgToBase64(url, callback, outputFormat) {
    var canvas = document.createElement('CANVAS'),
        ctx = canvas.getContext('2d'),
        img = new Image;
    img.crossOrigin = 'Anonymous';
    img.onload = function () {
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0, 0);
        var dataURL = canvas.toDataURL(outputFormat || 'image/png');
        callback.call(this, dataURL);
        canvas = null;
    };
    img.src = url;
}

希望大家帮我找找问题 因为我的实际想法是要解决 url图片截图提示跨域问题, 我在线转了一个图片base64,然后是可以的 所以,我现在就差这个问题了

只有图片地址不生效 不是可在浏览器打开 或者引用错误的图片 在工程项目里应该使用require或者线上图片作为new img的src

有报错信息吗？报错信息是什么
或者是图片地址 src不对，图片没有加载完成。你再绑定一个 onerror 事件看看是不是图片加载出错

前端

我也遇到了这个问题，你解决了吗？？