Js<解决图片下载和保存的问题>

首先我这边是实现长按保存图片到本地，后端返回的是一个单独的二维码，没有这些背景啥的，这时候用html2canvas实现这种效果（具体实现请参考：https://www.jianshu.com/p/e7e3b19cfa21），会发现中间没有二维码。那是因为背景图片是本地的，而二维码是后端返回的，不是本地的，所以就会出现这种问题。

image.png

把路径转换为base64(_this.QRcodeImg 是后端返给你的路径)

            var image = new Image();
            image.crossOrigin = "anonymous"; // 如果图片是跨域的，填上"*"或者"anonymous" 核心是请求头中包含了 Origin: "anonymous"或"*" 字段，响应头中就会附加上 Access-Control-Allow-Origin: * 字段,
            image.src = _this.QRcodeImg;
            function getBase64Image(image, ext) {
              var canvas = document.createElement("canvas");
              canvas.width = image.width;
              canvas.height = image.height;
              var context = canvas.getContext("2d");
              context.drawImage(image, 0, 0, image.width, image.height);
              // 这里是不支持跨域的
              var base64 = canvas.toDataURL("image/" + ext);
              return base64;
            }
            // 路径加载
            image.onload = function() {
              var ext = _this.QRcodeImg.substring(
                _this.QRcodeImg.lastIndexOf(".") + 1
              );
              var base64 = getBase64Image(image, ext);
              _this.QRcodeImg = base64;
              console.log(_this.QRcodeImg);

如果出现下面这种问题，那就需要后端配合解决下图片的跨域问题

image.png

详情请参考：https://www.jb51.net/article/101616.htm