在Vue js应用程序中下载图像时遇到问题

时间:2019-04-17 11:46:53

标签: javascript image vue.js vuejs2

我正在使用Vue.js应用程序,并尝试在页面上下载图像,但是我得到了download, Failed-Network error。下面是我的示例代码,错误屏幕截图也附有参考。

<img ref='img' id='image' :src="image" class='img-fluid' :style='filters' data-original-width='760' data-original-height='476'>

<button class="btn btn-success" @click="download"> Download </button>

 download() {
            const canvas = document.createElement('canvas');
            canvas.width = document.getElementById("image").getAttribute("data-original-width");
            canvas.height = document.getElementById("image").getAttribute("data-original-height");

            const ctx = canvas.getContext('2d');
            // ctx.filter = this.filters.filter;

            var img = new Image();
            img.src = this.image;
            img.onload = function() {
                ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
                const anchor = document.createElement('a');
                anchor.href = canvas.toDataURL();
                anchor.download = 'filtered.png';
                anchor.click();
            };
    }

downloadError

0 个答案:

没有答案
相关问题