vue 如何保存已上传的图片

Question

1. 背景：vue前端上传图片，上传之后，会显示图片的预览效果，调整图片的角度，调整之后保存调整之后的图片。
2. 目前已实现调整图片角度，但是不知如何保存调整之后的图片。

Answer 1

 downLoadImg() {
            var img = this.$jq(".qrcode-preview .copy-writer-details-box")
                .children("div")
                .children("canvas")[0];
            // 构建画布
            var canvas = document.createElement("canvas");
            var ctx = canvas.getContext("2d")
            const commonH = 200;
            canvas.setAttribute("width",commonH)
            canvas.setAttribute("height",commonH)
            ctx.fillStyle = '#fff';
            ctx.fillRect(0, 0, commonH,commonH);
            ctx.drawImage(img, 0, 0, commonH, commonH);
            // 构造url
            var url = canvas.toDataURL("image/png");
            // // 构造a标签并模拟点击
            var downloadLink = document.createElement("a");
            downloadLink.setAttribute("href", url);
            downloadLink.setAttribute("download", "二维码.png");
            downloadLink.click();
        },

Answer 2

本地预览先用base64预览，调整之后进行上传操作

Answer 3

cropperjs 很好用，可以解决这个问题