点击按钮下载图片【求助大神帮看看小错误】

[美莎设计]

<div>
<style>
.content-download-dynamic {
    background: #f4c000;
    box-shadow: 0 8px 12px 0 rgba(244,194,41,.56);
}
.content-download {
    width: 208px;
    height: 64px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 10px;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
	right:auto;
}
button {
    margin: 0;
    padding: 0;
    outline: none;
    border-radius: 0;
    background-color: transparent;
    line-height: inherit;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
}
</style>
<script>
function forceDownload(link){
    var url = link.getAttribute("data-href");
    var fileName = link.getAttribute("download");
    link.innerText = "下载中...";
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "blob";
    xhr.onload = function(){
        var urlCreator = window.URL || window.webkitURL;
        var imageUrl = urlCreator.createObjectURL(this.response);
        var tag = document.createElement('a');
        tag.href = imageUrl;
        tag.download = fileName;
        document.body.appendChild(tag);
        tag.click();
        document.body.removeChild(tag);
        link.innerText="https://wallpaperm.cmcm.com/48a06bc0f87cbcb9aeca96370408bc3c.jpg"; //下载图片地址
    }
    xhr.send();
}
</script>
<a href="#" data-href="https://wallpaperm.cmcm.com/48a06bc0f87cbcb9aeca96370408bc3c.jpg" download="Images.jpg" class="content-download content-download-dynamic" onclick='forceDownload(this)'>下载高清壁纸</a>
</div>

错误：点击按钮了，下载的图片都是失败的，不知道哪里出了问题，请大神给看一眼，帮助修正下

[美莎设计]

大神在哪里啊！~~~~~~

[Logerlink]

可以下载 很漂亮

[美莎设计]

引用 2 楼 Logerlink 的回复：

可以下载 很漂亮

什么游览器

[hfhan_872914334]

请求资源一定要注意跨域问题，没有给出具体的错误信息，盲猜你这里就是跨域导致的ajax请求失败。解决办法就是利用img标签加载图片来进行，但是也有一定的限制，你这里测试没问题 ``` function downloadByData () { let url = 'https://wallpaperm.cmcm.com/48a06bc0f87cbcb9aeca96370408bc3c.jpg' let image = new Image() image.setAttribute('crossOrigin', 'anonymous') image.src = url image.onload = () => { let canvas = document.createElement('canvas') canvas.width = image.width canvas.height = image.height let ctx = canvas.getContext('2d') ctx.drawImage(image, 0, 0, image.width, image.height) let ext = image.src.substring(image.src.lastIndexOf('.')+1).toLowerCase() let dataURL = canvas.toDataURL('image/' + ext) download('test.jpg', dataURL) } } function download(filename, data){ let DownloadLink = document.createElement('a'); if ( DownloadLink ){ document.body.appendChild(DownloadLink); DownloadLink.style = 'display: none'; DownloadLink.download = filename; DownloadLink.href = data; if ( document.createEvent ){ let DownloadEvt = document.createEvent('MouseEvents'); DownloadEvt.initEvent('click', true, false); DownloadLink.dispatchEvent(DownloadEvt); } else if ( document.createEventObject ) DownloadLink.fireEvent('onclick'); else if (typeof DownloadLink.onclick == 'function' ) DownloadLink.onclick(); document.body.removeChild(DownloadLink); } } ```

[美莎设计]

引用 4 楼 hf_872914334 的回复：

请求资源一定要注意跨域问题，没有给出具体的错误信息，盲猜你这里就是跨域导致的ajax请求失败。解决办法就是利用img标签加载图片来进行，但是也有一定的限制，你这里测试没问题 ``` function downloadByData () { let url = 'https://wallpaperm.cmcm.com/48a06bc0f87cbcb9aeca96370408bc3c.jpg' let image = new Image() image.setAttribute('crossOrigin', 'anonymous') image.src = url image.onload = () => { let canvas = document.createElement('canvas') canvas.width = image.width canvas.height = image.height let ctx = canvas.getContext('2d') ctx.drawImage(image, 0, 0, image.width, image.height) let ext = image.src.substring(image.src.lastIndexOf('.')+1).toLowerCase() let dataURL = canvas.toDataURL('image/' + ext) download('test.jpg', dataURL) } } function download(filename, data){ let DownloadLink = document.createElement('a'); if ( DownloadLink ){ document.body.appendChild(DownloadLink); DownloadLink.style = 'display: none'; DownloadLink.download = filename; DownloadLink.href = data; if ( document.createEvent ){ let DownloadEvt = document.createEvent('MouseEvents'); DownloadEvt.initEvent('click', true, false); DownloadLink.dispatchEvent(DownloadEvt); } else if ( document.createEventObject ) DownloadLink.fireEvent('onclick'); else if (typeof DownloadLink.onclick == 'function' ) DownloadLink.onclick(); document.body.removeChild(DownloadLink); } } ```

能否能给出完整演示案例呢